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

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

但在真实 App 中，你会发现： 很多地方根本不是按钮，却可以被点击 比如： 整个列表项 一张图片 一个卡片 自定义区域 这正是本篇要学习的内容。...Flutter 的一个核心设计理念： 任何 Widget 都可以有交互 GestureDetector 和 InkWell 的作用是： 给任意 Widget 添加点击、滑动等手势能力 二、GestureDetector...InkWell 是否有反馈 ❌ ✅ 是否依赖 Material ❌ ✅ 灵活度 ⭐⭐⭐⭐⭐ ⭐⭐⭐ 常见场景 自定义交互 列表 / 卡片 经验法则： 列表、卡片 → InkWell 高度自定义 →...GestureDetector 五、点击整行列表项（经典场景） InkWell( onTap: () {}, child: Padding( padding: EdgeInsets.all...你已经掌握了： 给任意 Widget 添加点击事件 GestureDetector 与 InkWell 的区别 水波纹的正确使用方式 实战级点击区域写法 现在你的 App： 不再“点哪哪没反应”了 十一

9710

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

添加材质涟漪效果 在设计应遵循材质设计指南的应用程序时，我们希望在点击时将涟漪动画添加到部件。 Flutter提供InkWell部件来达到这个效果。...路线 创建一个我们想要点击的部件 将其包装在InkWell部件中以管理点击回调和涟漪动画 // The InkWell Wraps our custom flat button Widget new InkWell...build(BuildContext context) { // The InkWell Wraps our custom flat button Widget return new...路线 创建条目列表 将每个项目包裹在Dismissible部件中 提供“向后消除”指标 1.创建条目列表 这个配方的第一步是创建一个我们可以滑动的项目列表。...有关如何创建列表的更多详细说明，请按照使用长列表配方进行操作。 创建一个数据源 在我们的例子中，我们需要20个样品条目。 为了简单起见，我们将生成一个字符串列表。

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

    用flutter给图片加个好看的遮罩层【flutter20个实例之六】

    每个图片底部有个一定高度的遮罩层，用来放一些文字 2.看看这个布局的主内容 body里面的列表内容 右上角点击后调用了bottomModal组件 @override Widget build(...mainAxisAlignment: MainAxisAlignment.spaceBetween的布局排列 InkWell：为每个图标增加个点击事件 由于底部弹框也相当于一个页面，所以想要里面的select...选择后内容跟着变动，就需要重定义setState() 4.核心内容列表就是一个GridView 一行显示4个 crossAxisCount: 4 左右间距 crossAxisSpacing: 10 上下间距...: BoxDecoration(color: Color(0x72000000)), 以下是flutter的所有颜色透明 比如完全不透明：0xFF000000 需要将第3第4两个字母，替换为下方列表的右侧两个字符即可...), ], ), //这个是顶部tab样式，如果不需要可以去掉 body: monthList()); } //核心的内容列表数据

    4.6K30

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

    简介 之前我们介绍了GestureDetector的定义和其提供的一些基本的方法，GestureDetector的好处就是可以把任何一个widget都赋予类似button的功能。...赋予widget可以点击的功能 一般情况下，我们的普通widget，比如文本是不能进行交互的，但是如果将其用GestureDetector进行包装之后，就可以将其伪装成为一个button。...那么InkWell和GestureDetector有什么联系呢？ InkWell和GestureDetector很类似，都提供了对手势的支持。...还是上面的例子，我们可以将GestureDetector替换成为InkWell,如下所示： Widget build(BuildContext context) { return InkWell...可删除的组件 在app中的手势应用上，有一个比较常见的用法就是在list列表中，向左滑动一个item，会出现删除的按钮，这种滑动删除的效果，如何在flutter中实现呢？

    1.5K40

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

    简介之前我们介绍了GestureDetector的定义和其提供的一些基本的方法，GestureDetector的好处就是可以把任何一个widget都赋予类似button的功能。...赋予widget可以点击的功能一般情况下，我们的普通widget，比如文本是不能进行交互的，但是如果将其用GestureDetector进行包装之后，就可以将其伪装成为一个button。...InkWell和GestureDetector很类似，都提供了对手势的支持。在InkWell中提供了多种GestureTapCallback接口，用接收手势的回调，非常的方便。...还是上面的例子，我们可以将GestureDetector替换成为InkWell,如下所示： Widget build(BuildContext context) { return InkWell...可删除的组件在app中的手势应用上，有一个比较常见的用法就是在list列表中，向左滑动一个item，会出现删除的按钮，这种滑动删除的效果，如何在flutter中实现呢？

    1.5K10

    谈谈flutter中Checkbox复选框的全选与删除【flutter20个实例之三】

    _list; }); }, ), ], ) 3.listview设置一个可以滚动的列表...当我们点击右上角的编辑时，调出底部的全选和删除操作，但是这个底部样式不随着列表一起滚动 所以我们需要用叠加组件stack将两部分功能包含在一起，同时底部的样式要固定在底部 列表的内容样式可以扩散开发，...>[ getItemContent(),//这里是列表的内容 getItemBottom(),//这里是底部删除全选操作的内容 ],...，左侧放我们的复选框，右侧是列表数据 注意的是：内容里面的复选框padding，要和底部操作条的padding设置一致，看起来是对齐的 内容列表中的复选框点击的时候： 如果状态为true，判断deleteIds...>[ getItemContent(), //这里是列表的内容 getItemBottom(), //这里是底部删除全选操作的内容 ]

    4.3K30

    带你深入 Dart 解析一个有趣的引用和编译实验

    首先我们看一段代码，如下代码所示，可以看到： 首先我们定义了一个叫 idx 的 int 型参数； 然后在 for 循环里添加了三个 InkWell 可点击控件； 最后在 onTap 里面将 idx 打印出来...{core::num::+}(1); } } } 那如果我们需要打印出来的是每个 InkWell 自己的 index 呢？...如下代码所示，把 InkWell 放到一个 getItem 函数里返回，然后 index 通过函数参数传递进来，可以看到运行后的结果，也是点击对应 InkWell 打印对应的 index 。...(core::int* index) → ink5::InkWell* { return new ink5::InkWell::•(onTap: () → Null {...如下代码所示，直接用最基本的 for 循环添加 InkWell 并打印 idx ，结果会怎么样呢？

    1.5K20

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

    InkWell 在前面的一些例子中，小伙伴应该看到了好几次 InkWell 这个部件，通过它我们可以实现对一些手势的监听，并实现 MD 的水波纹效果，举个简单的一个例子 InkWell( child...InkWell 是在 MaterialDesign 风格下的一个用来响应触摸的矩形区域（注意加粗的文字，1.如果不是 MD 风格的部件下，你是不能用这个来做点击响应的；2.InkWell 是一块矩形区域.../// The [InkWell] widget must have a [Material] widget as an ancestor....InkWell 必须要有一个 Material 风格的部件作为锚点，巴拉巴拉巴拉....再次强调必须要在 MD 风格下使用。...RunningHeart 部件，记得传入的动画列表的顺序 body: RunningHeart( animations: [_colorAnimation, _scaleAnimation

    2.2K30

    实现点击换一批来切换内容，flutter之CustomScrollView【flutter20个实例之八】

    一、老套路，先看样式 左图是我业务中的样式，右图是下方源码展示样式（复制可直接运行，无额外组件引入） 二、讲解 1.涉及组件 首先，没有一个单一组件来实现这个效果 实现这个效果涉及以下组件： AppBar...：顶端栏，一个最基本的软件 Text：文本 Container：布局组件 CustomScrollView：自定义滚动效果组件，比如列表和网格组件都可以包含在其中 SliverGrid：网格视图组件 SliverList...：列表控件 InkWell：效果控件，可以给其他widget包裹一个点击效果 ListTile：标题组件，通常填充listview 2.首先设置下标题样式 getItem是我们的主内容 @override...，判断当前内容是否满足18条（一屏展示的数目） 如果不满足，说明最后一页了，重置页码为1 如果满足，说明当前数据>=18，后面可能还有数据，页码+1 然后请求数据，_getData()是封装的一个请求数据函数...habitIcon(item) { return InkWell( onTap: () { setState(() { _icon = item

    1.8K20

    【Flutter 专题】123 图解简易 GroupList 二级分类列表

    和尚在实践过程中，想实现一个可选的二级分组列表，pub.dev 插件库中已经有很多类似功能的插件，和尚还是准备从自己角度尝试实现一个简单的二级分组列表； 列表分为两级，默认均折叠 一级列表和二级列表均可选中和取消...二级列表数据可以主动添加 分组列表的实现有很多方式，和尚准备用最基本的两个 ListView 嵌套的思路来进行展示，默认是展示第一级列表信息，在点击展开操作时，展示对应的二级列表； GroupList...context) { return InkWell( child: Column(children: Widget>[ Divider(height: 0.5...二级列表 当点击一级列表 item 时，展现二级列表；而实际上只是在一级 item 中添加一个新的列表数据，仅视觉效果上是展开二级列表；当再次点击一级列表 item 时把新加的二级列表替换为空的...中不设置二级列表数据，在点击时动态添加； return InkWell( child: Column(children: Widget>[ Divider(height: 0.5

    2.1K31

    构建实用的Flutter文件列表：从简到繁的完美演进

    创建简易文件列表：一步步构建你的文件管理界面 在我们开始构建复杂的文件管理系统之前，让我们从简单的文件列表开始。这个文件列表将是我们之后改进和扩展的基础。 1....渲染文件列表数据 现在我们已经有了一个空的文件列表页面，接下来让我们来渲染一些假数据，以便我们能够看到文件列表的样子。 我们可以使用Flutter中的ListView组件来展示文件列表。..._buildGrid() : _buildList(), ); } Widget _buildList() { // 构建列表视图 } Widget _buildGrid...在每个文件的Card中，我们放置了一个文件图标和文件名，并通过InkWell来处理文件的点击事件。 通过以上步骤，我们已经成功实现了网格布局的文件列表。...使用HTTP方法接入API：让你的文件列表动起来 在我们构建的文件列表中，目前只是展示了一些假数据。为了使我们的文件列表更加实用，我们需要从后端API获取真实的文件列表数据。

    1.5K12
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券