为什么其中的onTap和函数不能在InkWell中工作？ - 腾讯云开发者社区

答案是打印出来的都是 3。为什么呢？...让我们看这段代码编译后的逻辑，如下所示代码，可以看到上述代码编译后， print 函数里指向的永远是 idx 这个 int* 指针，当我们点击时，最终打印出来的都是最后的 idx 的值。...如下代码所示，把 InkWell 放到一个 getItem 函数里返回，然后 index 通过函数参数传递进来，可以看到运行后的结果，也是点击对应 InkWell 打印对应的 index 。...为什么呢？我们继续看编译后的代码，可以看到都是打印的 idx ，为什么这样就可以正常呢？这里最大的不同就是idx 被声明的位置不同。...至于为什么会有这样的逻辑，在深入的运行时逻辑就没有去探索了（懒），推测应该是编译后的二进制文件在运行时，针对循环外的参数和循环内的参数优化有关系。

1.3K2 0

Flutter Widgets 之 InkWell 和 Ink

InkWell InkWell组件在用户点击时出现“水波纹”效果，InkWell简单用法： InkWell( onTap: (){}, child: Text('这是InkWell...点击效果'), ) onTap是点击事件回调，如果不设置无法出现“水波纹”效果，效果如下： ?...设置高亮颜色颜色： InkWell( onTap: () {}, highlightColor: Colors.blue, ... ) 高亮颜色是按住时显示的颜色，效果如下： ?...给字体添加边距和圆角边框，扩大“水波纹”效果： InkWell( onTap: (){}, child: Container( padding:...简单翻译：Ink控件用于在[Material]控件上绘制图像和其他装饰，以便[InkWell]、[InkResponse]控件的“水波纹”效果在其上面显示。

1.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

这里onTap会调用一个showDialog来弹出一个对话框，运行之后结果如下：会动的组件在上面的例子中，我们用手去tap按钮是没有互动效果的，也就是说按钮是不会变化的。...那么InkWell和GestureDetector有什么联系呢？ InkWell和GestureDetector很类似，都提供了对手势的支持。...在使用上，InkWell和GestureDetector也很类似，我们可以完全照搬GestureDetector的用法。...现在Dismissible实际上就可以工作了，当你滑动ListTile的时候，对应的item就会被删除。...总结以上就是日常手势的基本使用了，我们可以通过GestureDetector，InkWell和Dismissible来和手势进行结合来实现相应的功能。

1.1K4 0

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

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

9951 0

Flutter中GridTile中图像上方的InkVell波纹

Flutter中GridTile中图像上方的InkVell波纹我认为这是在图像上显示波纹效果的更好方法。...Ink.image( image: AssetImage('sample.jpg'), fit: BoxFit.cover, child: InkWell( onTap...: () {}, ), ), 使用Stack，我们可以将Material和InkWell带到图像上。...( onTap: () { ... }, ), ), ), ], ); 我们创建了这个简单的小部件，以在任何给定孩子的上方绘制墨水反应。...), ], ); } } 优秀的方法。

8003 0

Flutter手势交互+自定义绘板组件v0.01

]------- class InkWell extends InkResponse { const InkWell({ GestureTapCallback onTap, }) : super...是一个无状态的Widget 2.1:响应事件的盒子既然GestureDetector的onTap可以传入一个函数作为回调处理，那何妨一试 var box = Container( color...:Pan和scale回调不能同时使用，因为scale是Pan的超集。...简单的话，使用scale回调函数即可。在使用上和前面的拖动时间基本一致,这里就不再赘述。...: () { print("OnTap in InkWell"); }, ); 3.手绘板 v0.01 3.0:前置准备需要的知识点:Flutter中的手势交互,主要是移动相关 1.

1.4K1 0

关于拖拽功能在IE11 、Firefox和Safari中不兼容的问题

） 3是firefox在拖动的时候会打开一个新窗口（firbox） 4是ie11不支持onclick属性方法； ie11 里元素对象的attributes的排序和其他浏览器不同, ie11 中...remove()方法不work (ie) 对于原因1的解决方案其中IE11 压根就不支持path属性，firefox和Safari还勉强通过hack的方式获取到path，获取方式如下： const...('click', function () {}) 如果你的业务代码里包含获取对象attributes的值的代码，比如 event.target.attributes[n].xxx 在ie11中attributes...的属性排序和其他浏览器不同，会引起bug。...解决这个问题，我是通过遍历attributes 找到符合我要的代替之前的写死的attributes顺序针对ie11 remove()不work的情况，可以用代码 parent.removeChild

3.4K3 0

为什么从乙方出来的技术人，能在工作中 ‘更猛，更持久’？

即便你个人的影响力达到极高的程度，或许也无法在与 “独角兽” 争夺人才的战斗中讨得便宜。该采取什么样的应对措施呢？ “拥抱现实，应对现实” ，这是《原则》中让我记忆较为深刻的一句话。...简单来说，与你签合同的公司并不是你要服务的对象，而是以长期外派的形式被派到另一个公司工作，接受服务的公司叫 “甲方”，而与你签订合同的公司叫 “乙方”。...签完合同后，基本上你和你签合同的单位是没有任何交集的，他们只负责每个月给你发工资。为什么 “更猛，更持久” ？不可否认，有许多企业排斥从 “乙方公司” 出来的小伙伴，甚至根本不看类似的简历。...只有你自己的公司才能给你归属感。可是你却永远不在自己的公司工作，又怎么可能有归属感呢？...这时候，也许你就要再重新考虑住处和交通了，因此换工作的可能性会非常大。

4722 0

Flutter从静态界面到抽取封装

,在最外层用一个InkWell涟漪事件响应组件来触发监听在其中将_checked字段进行改变,再用setState重新渲染。...]---- return InkWell( child: Container(child: body, padding: EdgeInsets.all(10)), onTap: () {...3、掘金简介的静态界面个人觉得掘金的简介还是挺好看的,就来看看这个如何布局： 3.1:布局分析最外层做个Card,其中主要三部分,可以用Row来包, 左边头像，可以用Image ,加圆形裁剪。...,有一点要注意的Flex中的textBaseline属性对文字中的作用使用Expanded可以让Row尽可能延展,文字到头也会自动换行，当横屏是也会适应。...上面写的只是一个静态的布局，也只是个玩偶而已,复用和可维护性是很低的。

1.1K1 0

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

处理点击我们不仅希望向用户展示信息，还希望我们的用户与我们的应用进行互动！那么，我们如何回应基本操作，如点击和拖动？我们将使用GestureDetector部件！...虽然我们已经创建了一个自定义按钮来演示这些概念，但Flutter包括一些开箱即用的按钮：RaisedButton，FlatButton和CupertinoButton 完整例子 import 'package...路线创建一个我们想要点击的部件将其包装在InkWell部件中以管理点击回调和涟漪动画 // The InkWell Wraps our custom flat button Widget new InkWell...用户将该项目删除后，我们需要运行一些代码以从列表中删除该项目并显示Snackbar。在真实的应用程序中，您可能需要执行更复杂的逻辑，例如从Web服务或数据库中删除项目。...这是Dismissible部件发挥作用的地方！在我们的例子中，我们将更新我们的itemBuilder函数以返回一个Dismissible部件。

1.8K2 0

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

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

1.4K2 0

Flutter - 处理手势

处理点击步骤创建自定义button类在其中使用GestureDetector并复写onTap回调代码实现 import 'package:flutter/material.dart'; //...使用InkWell。...) { return InkWell( onTap: () { final snackBar = SnackBar(content: Text("Now you tap...RaisedButton和FlatButton。...这个列表不能放在build中，要定义为State的全局变量。否则删除item时，无法从view tree中移除item，从而报错。

1.3K2 0

【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )

动画简介 ---- Hero Widget 动画效果 : Hero 通过动画从源界面运动到目标界面时 , 目标界面透明度逐渐增加 , 淡入显示 ; Hero 是界面的组成部分 , 在源界面和...Hero 组件都设置相同的标识 , 通过该标识可以标识两个 Hero 组件之间进行动画过渡 ; 该 Hero 动画组件封装内容 : VoidCallback onTap : 从外部传入一个回调事件 ,...这是点击组件后 , 回调的函数 ; String imageUrl : 作为 Hero 动画的 tag 标识 , 同时也是图片的 url 网络地址 ; double width : 用于约束 Hero...,), ), ),), ); } } 二、创建源页面 ---- 创建一个 StatelessWidget 组件作为源页面 , 其中封装 HeroWidget 组件..., 作为显示的核心组件 , 传入一个 VoidCallback 方法 , 在该方法中跳转到目的界面 ; class HeroAnimation extends StatelessWidget{ @

9642 0

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

今天我们来聊聊Flutter中的日期和日期选择器。...Flutter中的日期和时间戳使用代码如下： //将时间转换成时间戳 var nowTime = DateTime.now();//获取当前时间 print(nowTime...，接下来我将为大家介绍Flutter中自带的日期选择器和时间选择器。...InkWell来让某组件可以响应用户事件 InkWell( onTap: () { //调起日期选择器 _showDatePicker(); }, child: Row(...在iOS和Android中，都有国际化配置的概念，Flutter中也不例外。在Flutter中如何配置国际化呢？

26.1K5 2

Flutter中自定义提示框

material.dart'; class MyDialog extends Dialog{ final String title; final String content; // 构造函数赋值...child:Icon(Icons.close), onTap...// 引入上面定义的模态框组件，注意路径 import '...../components/Dialog.dart'; // 在类中调用自定义模态框 // context为类中的上下文 showDialog( context:context, builder...material.dart'; class MyDialog extends Dialog{ final String title; final String content; // 构造函数赋值

1.4K0 0

Flutter - ListView 挂件中使用 JSON 文件

在 app 开发中，最重要的部分是，我们需要从服务或者本地获取数据，渲染到我们的挂件中。...( onTap: () {}, child: Text( 'Country...这里的 loadString() 函数是用来获取本地 JSON 文件。 future 参数接收到函数返回来的数据之后，将数据传递给 futureBuilder 参数。...第 5 步：将获取的 JSON 文件的数据写入 ListView 挂件中 return ListView.builder( itemBuilder: (BuildContext context, int...0 : data.length, ); itemCount 允许我们在 ListView 挂件中显示所需的条数。

1.3K1 0

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

前言：为什么我们需要文件列表？在现代科技发展迅速的时代，我们的电脑、手机、平板等设备里积累了大量的文件，这些文件可能是我们的照片、文档、音频、视频等等。...希望通过本文，读者可以了解到构建文件列表的基本原理和方法，以及如何在自己的应用中应用这些技术，提升用户体验，提高工作效率。...我们创建了一个简单的文件列表页面，其中包含了三个文件的名称。...在每个文件的Card中，我们放置了一个文件图标和文件名，并通过InkWell来处理文件的点击事件。通过以上步骤，我们已经成功实现了网格布局的文件列表。...现在，我们的文件列表已经可以动起来了！（GIF动不了啊）（又可以动了）总结在本文中，我们详细探讨了如何在Flutter应用中构建文件列表，并逐步改进和优化这个文件列表，以提升用户体验和功能性。

2651 2

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

在 Flutter 中，自带手势监听的目前为止好像只有按钮部件和一些 chip 部件，例如 Text 等部件需要实现手势监听，就需要借助带有监听事件的部件来实现了，这节我们会讲下 InkWell 和 GestureDetector...InkWell 在前面的一些例子中，小伙伴应该看到了好几次 InkWell 这个部件，通过它我们可以实现对一些手势的监听，并实现 MD 的水波纹效果，举个简单的一个例子 InkWell( child...Ctrl 点击 InkWell 来查看源码(Android Studio 的操作，别的我不懂喔...)，然后，「嗯...除了构造函数怎么什么都没有？？？」...在这个例子中，通过设置 AnimationController 的 lowerBound 和 upperBound 实现了动画的变化范围，接下来，将通过 Tween 来实现动画的变化范围。...Hero 通过指定 Hero 中的 tag，在切换的时候 Hero 会寻找相同的 tag，并实现动画，具体的实现逻辑，这里可以推荐一篇文章谈一谈Flutter中的共享元素动画Hero，里面写的很详细，

1.9K3 0

19.Flutter学习之路Dialog种类

context: context, builder: (context) { return Container( height: 200,//不设置默认高度为一半...), ListTile( title: Text('分享B'), onTap..._toast(); }, ), ], ), ), ); } } 其中我们用到的第三方...这里就不进行详解了自定义Dialog 自定义Dialog的步骤：自定义类继承Dialog类重写build方法，并且最外层return Material() 在调用时，与其他Dialog一直，通过...Expanded(flex: 1,child: Text('1111',textAlign: TextAlign.center,),), InkWell

3041 0

Flutter AnimatedIcon 了解一下

在给定的动画进度[3]中显示动画图标。可用的图标在AnimatedIcons[4]中。...构造函数接着来看构造函数： const AnimatedIcon({ Key key, @required this.icon, @required this.progress, // Animation...：在该字段的上方，注释也给出了解释：动画的进度，值应该是0-1•color：icon 的颜色•size：icon的大小•semanticLabel：语义标签，不在UI中显示，在辅助功能模式下有用。...然后我们在 AnimatedIcon 外层包裹一个 InkWell ，用来设置点击事件。...个人认为常用的就两个： •play_pause•list_view 一个用来播放和暂停，一个用来切换列表显示样式。

2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

Flutter Widgets 之 InkWell 和 Ink

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

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

Flutter中GridTile中图像上方的InkVell波纹

Flutter手势交互+自定义绘板组件v0.01

关于拖拽功能在IE11 、Firefox和Safari中不兼容的问题

为什么从乙方出来的技术人，能在工作中 ‘更猛，更持久’？

Flutter从静态界面到抽取封装

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

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

Flutter - 处理手势

【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )

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

Flutter中自定义提示框

Flutter - ListView 挂件中使用 JSON 文件

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

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

19.Flutter学习之路Dialog种类

Flutter AnimatedIcon 了解一下

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐