文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Flutter 入门指北之手势处理和动画

在 Flutter 中，自带手势监听的目前为止好像只有按钮部件和一些 chip 部件，例如 Text 等部件需要实现手势监听，就需要借助带有监听事件的部件来实现了，这节我们会讲下 InkWell 和 GestureDetector...InkWell 在前面的一些例子中，小伙伴应该看到了好几次 InkWell 这个部件，通过它我们可以实现对一些手势的监听，并实现 MD 的水波纹效果，举个简单的一个例子 InkWell( child...InkWell 是在 MaterialDesign 风格下的一个用来响应触摸的矩形区域（注意加粗的文字，1.如果不是 MD 风格的部件下，你是不能用这个来做点击响应的；2.InkWell 是一块矩形区域...或者 InkResponse 就能够实现，但是面临一些比较复杂的手势，就有点不太够用了，我们需要通过 GestureDector 来进行处理 GestureDector GestureDetector...Hero 通过指定 Hero 中的 tag，在切换的时候 Hero 会寻找相同的 tag，并实现动画，具体的实现逻辑，这里可以推荐一篇文章 谈一谈Flutter中的共享元素动画Hero，里面写的很详细，

2.2K30

Flutter 零基础入门（二十五）：手势 GestureDetector 与 InkWell

手势 GestureDetector 与 InkWell 在上一篇中，我们学习了 Flutter 的按钮体系： TextButton ElevatedButton IconButton 按钮解决了**“...但在真实 App 中，你会发现： 很多地方根本不是按钮，却可以被点击 比如： 整个列表项 一张图片 一个卡片 自定义区域 这正是本篇要学习的内容。...一、为什么需要 GestureDetector 和 InkWell？...Flutter 的一个核心设计理念： 任何 Widget 都可以有交互 GestureDetector 和 InkWell 的作用是： 给任意 Widget 添加点击、滑动等手势能力 二、GestureDetector...padding: EdgeInsets.all(16), child: Text('圆角点击'), ), ) ⚠️ 建议： borderRadius 与 UI 圆角保持一致 七、点击图片或卡片

21310
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Flutter开发中的一些Tips

    因为Android 和 IOS都有状态栏，甚至IOS还有叫做“HomeIndicator”的横条。所以一不留神就会出现适配问题。...我们在Flutter中常使用的BottomNavigationBar 和 AppBar 其实就在内部处理了此类问题。...5.注意平台差异 ---- 注意部分组件在Android与IOS平台之间的差异。 Scaffold的 AppBar，AppBar中默认的title在Android中靠左显示，IOS中居中显示。...主要原因是溅墨效果是在一个背景效果，并不是覆盖的前景效果。所以InkWell中的child一旦有设置背景图或背景色，那么就会遮住这个溅墨效果。如果你需要这个溅墨效果，有两种方式实现。...诸如此类的信息没有打包进去（但是引用xml中的flutter_image_picker_file_paths文件却在），导致我实际使用这些功能时没有反应，但是在平时的调试过程中却是好的。

    2.7K30

    Flutter中的日期、格式化日期、日期选择器组件在

    今天我们来聊聊Flutter中的日期和日期选择器。...Flutter的第三方库 date_format 的使用 实际上，我在之前介绍在Flutter中如何导入第三方库的文章依赖管理（二）：第三方组件库在Flutter中要如何管理中，就是以date_format...在依赖管理（二）：第三方组件库在Flutter中要如何管理中，我详细介绍了如何去查找第三方库、如何将pub.dev中的第三方库安装到Flutter项目中、date_format库的基本使用，这里我就不赘述了...，我们经常会遇到选择时间或者选择日期的场景，接下来我将为大家介绍Flutter中自带的日期选择器和时间选择器。...在iOS和Android中，都有国际化配置的概念，Flutter中也不例外。在Flutter中如何配置国际化呢？

    30.7K52

    Flutter 时间选择组件

    在Flutter 应用开发过程中，或多或少的都会涉及到时间选择器相关的内容。...通常在移动应用开发中，App的涉及多是参考iOS的设计来的，所以这时候，多半需要进行自定义组件了。...跳转到指定日期，默认支持动画切换 自定义日历Item，支持组合widget的方式和利用canvas绘制的方式 自定义顶部的WeekBar 根据实际场景，可以给Item添加自定义的额外数据，实现各种额外的功能...比如实- 现进度条风格的日历，实现日历的各种标记 支持周视图的展示,支持月份视图和星期视图的展示与切换联动 如下是部分效果图： 实际使用时，我们需要根据样式对该库进行二次开发，首先，新建一个date_picker_widget.dart...文件，然后添加如下代码： import 'package:flutter/material.dart'; import 'package:flutter_custom_calendar/flutter_custom_calendar.dart

    4.3K30

    【Flutter 专题】易忽略的【小而巧】的技术点汇总 (一)

    和尚在学习 Flutter过程中遇到很多有趣的小知识点，平时可能不太注意或一些简单直接的小功能点，准备整理一个小系列，方便日后的查找使用。 1....InkWell 水波纹效果 和尚在 Android的项目中很多需要水波纹的点击效果，Flutter当然也提供了类似的效果，除了 FlatButton按钮系列外，Flutter还提供了 InkWell...水波纹效果，使用很方便，在需要的地方嵌套即可；例如：用在 ListView的 item中整体效果会好很多。...Wrap 流式布局 和尚需要在每行布局中根据文字内容长度自定义展示个数，单独的用 Row和 Column不能实现很好的效果，这时候发现 Flutter提供的强大的 Wrap流式布局，自动根据需要显示的内容设置宽度...---- 和尚刚接触 Flutter时间不长，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。以下是和尚公众号，欢迎闲来吐槽～

    1.3K31

    Flutter 构建完整应用手册-处理手势

    虽然我们已经创建了一个自定义按钮来演示这些概念，但Flutter包括一些开箱即用的按钮：RaisedButton，FlatButton和CupertinoButton 完整例子 import 'package...添加材质涟漪效果 在设计应遵循材质设计指南的应用程序时，我们希望在点击时将涟漪动画添加到部件。 Flutter提供InkWell部件来达到这个效果。...路线 创建一个我们想要点击的部件 将其包装在InkWell部件中以管理点击回调和涟漪动画 // The InkWell Wraps our custom flat button Widget new InkWell...实现划动消除 “划动消除”模式在很多移动应用中很常见。 例如，如果我们正在编写一个电子邮件应用程序，我们可能希望允许我们的用户在列表中划离邮件消息。...用户将该项目删除后，我们需要运行一些代码以从列表中删除该项目并显示Snackbar。 在真实的应用程序中，您可能需要执行更复杂的逻辑，例如从Web服务或数据库中删除项目。

    2.4K20

    Flutter —快速开发的IDE快捷方式

    Flutter 初学者，那么您一定厌恶嵌套结构，在代码中添加或删除一个小部件，或者找到一个小部件在何处结束、何处开始是多么困难。...我们花了一些时间来找出捷径，也许您不必再找出这些捷径，因为我已经做了这些；并且我整理了所有这些捷径，这些捷径可以在Flutter中更快，更流畅地进行开发。 PS。...所有这些快捷方式均适用于Windows中的Android Studio和IntelliJ。您来自iOS吗？也许这篇文章会有所帮助。...这在列或行内不起作用。 Wrap with a Container, Column, Row or any other Widget 您可以使用相同的方法用Container包装小部件。...将代码提取到方法中 Flutter Outline是一个非常有用的工具。

    2.6K20

    Flutter主题切换——让你的APP也能一键换肤

    为了让你的 App 更美观，主题切换已经是一个必不可少的功能了，但如果想在传统的 Android 和 iOS 上分别适配不同的主题相当繁琐。但这一切，在 Flutter 中都非常容易实现。...今天我们就来看看，如何在 Flutter 中给你的 App 添加换肤功能。...添加依赖 在该案例中，我使用到了 provider 和 flustars 两个库，简单介绍一下这两个库： provider 官方推荐的状态管理库，相比其他状态管理库使用起来比较方便。...可以看出，相较于原生应用主题的适配，在 Flutter 中实现换肤的功能简单很多了。...最后来发布一篇预告，因为 iOS 13 和 Android 10 系统上都新增了「深色模式」，在文中我也提到了ThemeData的Brightness brightness属性用于表示深色还是浅色。

    5.3K40

    flutter系列之:移动端手势的具体使用

    答案是肯定的，flutter为我们提供了一个InkWell组件，这样手指按压下组件会产生波纹的效果。 那么InkWell和GestureDetector有什么联系呢？...InkWell和GestureDetector很类似，都提供了对手势的支持。 在InkWell中提供了多种GestureTapCallback接口，用接收手势的回调，非常的方便。...在使用上，InkWell和GestureDetector也很类似，我们可以完全照搬GestureDetector的用法。...可删除的组件 在app中的手势应用上，有一个比较常见的用法就是在list列表中，向左滑动一个item，会出现删除的按钮，这种滑动删除的效果，如何在flutter中实现呢？...总结 以上就是日常手势的基本使用了，我们可以通过GestureDetector，InkWell和Dismissible来和手势进行结合来实现相应的功能。

    1.6K40

    昨晚简记+Flutter桌面、Web开发

    Flutter 1.12稳定版发布，桌面和浏览器势头很强。 [1]. 官方已经有响应式的布局的打算了，坐等。(有生之年) [2]....Flutter很棒是没错，但是... Flutter不是神，只是一把跨界斩杀的最强之剑。你不会编程的心法和剑法，不磨炼技艺和逻辑控制力。握着最强的剑，耍几招三脚猫功夫就说会用了?...你会发现和原来的项目相比多了两个包，web包以及，我的是macOS 1.2 运行项目 在设备栏可以看到支持的设备 可以直接运行项目:macOS效果 可以直接运行项目:web效果 2...，说明自定义组件可以在多平台公用。...使用bloc + 网络测试，下面是我在Android/iOS端做的基于bloc状态管理的github搜索页，直接拷贝进去。

    1.6K40

    flutter系列之:移动端手势的具体使用

    答案是肯定的，flutter为我们提供了一个InkWell组件，这样手指按压下组件会产生波纹的效果。那么InkWell和GestureDetector有什么联系呢？...InkWell和GestureDetector很类似，都提供了对手势的支持。在InkWell中提供了多种GestureTapCallback接口，用接收手势的回调，非常的方便。...在使用上，InkWell和GestureDetector也很类似，我们可以完全照搬GestureDetector的用法。...可删除的组件在app中的手势应用上，有一个比较常见的用法就是在list列表中，向左滑动一个item，会出现删除的按钮，这种滑动删除的效果，如何在flutter中实现呢？...总结以上就是日常手势的基本使用了，我们可以通过GestureDetector，InkWell和Dismissible来和手势进行结合来实现相应的功能。

    1.5K10

    谷歌 Flutter 1.17 发布

    对于简单的iOS动画，您还将看到最多减少40％的CPU / GPU使用率，具体取决于硬件（在PR 14104和PR 13976中进行了详细介绍）。...测试OpenGL与金属的iOS应用程序框架渲染时间（越短的条越好） 对于不完全支持Metal的设备（A7处理器之前的版本或运行10之前的iOS版本的设备），Flutter会像过去一样使用OpenGL，从而为较旧的设备提供本地渲染速度...Google字体易于在Flutter应用中使用 Google字体允许开发人员在其应用中轻松地尝试和使用fonts.google.com中的任何字体。...此选项将您的应用程序捆绑到实际上未在您的设备上安装的通用Android“包装器”中，这与正常的启动选项不同。此外，在某些情况下它不起作用，例如，当您使用访问后台执行的插件时。...如果您希望在Android Studio或IntelliJ的Flutter插件中更早地访问此类更改，Flutter团队现在为IntelliJ插件提供了一个开发通道，您可以选择该通道以更快地进行更新。

    4.9K10

    你知道吗，Flutter内置了10多种Button控件

    版本及Dart版本如下：Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Flutter内置了10多种Button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度...凸起“的按钮，基本用法： RaisedButton( child: Text('Button'), onPressed: (){ }, ) 效果： [1240] onPressed为null或不设置时...ThemeData.brightness accent：字体颜色依赖于ThemeData.accentColor primary ：字体颜色依赖于ThemeData.primaryColor 这3个值在MaterialApp...iconEnabledColor: Colors.red, ... ) 效果如下： [1240] RawMaterialButton RawMaterialButton是基于Semantics, Material和InkWell...BackButton() Android和IOS平台显示的图标是不一样的，ios效果如下： [1240] Android效果如下： [1240] CloseButton CloseButton是一个material

    3.2K00
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券