为什么没有将Inkwell赋值给参数Widget？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

首先我们看一段代码，如下代码所示，可以看到：首先我们定义了一个叫 idx 的 int 型参数；然后在 for 循环里添加了三个 InkWell 可点击控件；最后在 onTap 里面将 idx 打印出来...为什么呢？...如下代码所示，我们在 for 循环里增加了一个 index 参数，把每次 idx 都赋值给 index ，这样点击打印出来的结果，就会是点击对应的 index 。...如下代码所示，把 InkWell 放到一个 getItem 函数里返回，然后 index 通过函数参数传递进来，可以看到运行后的结果，也是点击对应 InkWell 打印对应的 index 。...至于为什么会有这样的逻辑，在深入的运行时逻辑就没有去探索了（懒），推测应该是编译后的二进制文件在运行时，针对循环外的参数和循环内的参数优化有关系。

1.5K2 0

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

一、为什么需要 GestureDetector 和 InkWell？...Flutter 的一个核心设计理念：任何 Widget 都可以有交互 GestureDetector 和 InkWell 的作用是：给任意 Widget 添加点击、滑动等手势能力二、GestureDetector...只负责“监听” 3️⃣ 常用回调 onTap（点击） onDoubleTap（双击） onLongPress（长按） 4️⃣ GestureDetector 的特点总结 ✅ 非常灵活 ❌ 没有水波纹...你已经掌握了：给任意 Widget 添加点击事件 GestureDetector 与 InkWell 的区别水波纹的正确使用方式实战级点击区域写法现在你的 App：不再“点哪哪没反应”了十一...本篇你学会了： Flutter 的手势系统基础常见点击场景实现专业交互写法下一篇预告《Flutter 零基础入门（二十六）：StatefulWidget 与状态更新 setState》下一篇我们将学习

1171 0

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

是的

没有找到

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

赋予widget可以点击的功能一般情况下，我们的普通widget，比如文本是不能进行交互的，但是如果将其用GestureDetector进行包装之后，就可以将其伪装成为一个button。...那么有没有可能模拟手指的按压效果呢？答案是肯定的，flutter为我们提供了一个InkWell组件，这样手指按压下组件会产生波纹的效果。...还是上面的例子，我们可以将GestureDetector替换成为InkWell,如下所示： Widget build(BuildContext context) { return InkWell...为了明显起见，我们可以给Dismissible添加一个background属性，这样滑动删除的时候就有了一个背景颜色： background: Container(color...，这个参数表示的是滑动删除的方向，我们可以通过这个方向来判断是否真正的进行删除操作。

1.6K4 0

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

赋予widget可以点击的功能一般情况下，我们的普通widget，比如文本是不能进行交互的，但是如果将其用GestureDetector进行包装之后，就可以将其伪装成为一个button。...那么有没有可能模拟手指的按压效果呢？答案是肯定的，flutter为我们提供了一个InkWell组件，这样手指按压下组件会产生波纹的效果。那么InkWell和GestureDetector有什么联系呢？...还是上面的例子，我们可以将GestureDetector替换成为InkWell,如下所示： Widget build(BuildContext context) { return InkWell...为了明显起见，我们可以给Dismissible添加一个background属性，这样滑动删除的时候就有了一个背景颜色： background: Container(color:...，这个参数表示的是滑动删除的方向，我们可以通过这个方向来判断是否真正的进行删除操作。

1.5K1 0

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

InkWell 在前面的一些例子中，小伙伴应该看到了好几次 InkWell 这个部件，通过它我们可以实现对一些手势的监听，并实现 MD 的水波纹效果，举个简单的一个例子 InkWell( child...Ctrl 点击 InkWell 来查看源码(Android Studio 的操作，别的我不懂喔...)，然后，「嗯...除了构造函数怎么什么都没有？？？」.../// The [InkWell] widget must have a [Material] widget as an ancestor....// 监听手指点击事件 this.onTap, // 一个 `GestureTapDownCallback` 类型参数，需要 `TapDownDetails` 类型参数， //...但是还是做了自己的修改，很多地方看着不舒服，然后就改成自己的实现方式了)：flutter_shop https://github.com/kukyxs/flutter_shop 如果对你有帮助的话，记得给个

2.2K3 0

Flutter - ListView 挂件中使用 JSON 文件

>[ InkWell( onTap: () {}, child: Text...List data; 将下面的代码添加上去： FutureBuilder( future: DefaultAssetBundle.of(context) .loadString('assets...future：此参数接收结果并将结果发送到 Builder。 builder：此参数接收来自 feature 的数据并返回给小挂件。可以在此处对接接收到的数据并执行任何操作。...initialData：可选的参数，如果我们设置 initialData 参数的值，builder 将会在 future 返回数据前展示 initialData。...future 参数接收到函数返回来的数据之后，将数据传递给 futureBuilder 参数。 builder 解析字符串并返回生成的 Json 对象。

1.9K1 0

Flutter中日期组件DatePicker及组件汉化

lastDate:DateTime(2100), ); // 异步回调的结果 print(result); // 将选择的时间进行赋值...>[ // 日期选择器 InkWell( // 点击有水波纹效果...>[ // 用第三方插件将选择的日期进行格式化...showDatePicker ), // 时间选择器 InkWell...>[ // 将选择的时间进行格式化 Text

1.9K2 0

【Flutter 组件集录】Card | 8 月更文挑战

没有必须要传入的参数，可以配置颜色、阴影色、形状、边距等属性。 2.Card 的简单使用如下所示，通过 buildContent 返回 Container 组件作为内容。...hardEdge, // 硬边缘 antiAlias, // 抗锯齿 antiAliasWithSaveLayer, // 抗锯齿保存图层 } 如下左图，在内容的容器中使用图片装饰，你会很疑惑，为什么没有圆角了...二、Card 的水波纹 1.错误的使用如果你将 InkWell 放在了 Center 之上，那么它水波纹会被前景所覆盖。如下图所示，之上 margin 的那点区域显示出来水波纹。...@override Widget build(BuildContext context) { return Scaffold( body: Center( child: InkWell...正确的使用正确的使用方式是在 child 组件上嵌套 InkWell。

1.2K4 0

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

//调起日期选择器 _showDatePicker() { //获取异步方法里面的值的第一种方式：then showDatePicker( //如下四个参数为必填参数...>[ //可以通过在外面包裹一层InkWell来让某组件可以响应用户事件 InkWell( onTap: () {...//调起日期选择器 _showDatePicker() async { //第一种方式：then showDatePicker( //如下四个参数为必填参数...InkWell来让某组件可以响应用户事件 InkWell( onTap: () { //调起日期选择器 _showDatePicker(); }, child: Row(...: false, onGenerateRoute: prefix0.onGenerateRoute, initialRoute: "/", //配置如下两个国际化的参数

30.5K5 2

Flutte部件目录-基本部件（二）顶

图像的Key是由name参数给出 . [...]...final colorBlendMode → BlendMode 用于将颜色与此图像组合. [...]...final fit → BoxFit 如何将图像写入布局过程中分配的空间. [...]...style参数是可选的。省略时，文本将使用最接近的DefaultTextStyle中的样式。...如果您试图更改按钮的color并且没有任何效果，请检查您是否传递了非空onPressed处理函数。如果您想为点击提供墨水飞溅效果，但不想使用按钮，请考虑直接使用InkWell。

5.4K2 0

Flutter开发中的一些Tips

使用场景是给一些无点击事件的部件添加点击事件时使用（也支持长按、双击等事件），同时你也可以去修改它的颜色和形状。...包一层 Material，将背景色设置在 Material中的color里。...Material( color: Colors.white, child: InkWell(), ) 使用Stack布局，将InkWell放置在上层。...这种适用于给图片添加点击效果，比如Banner图的点击。...但是发现打包后没有将插件中的AndroidManifest.xml文件合并。

2.7K3 0

Flutter 入门指北之弹窗和提示（干货）

，同时给用户一个撤销该操作的按钮，那么就可以通过 SnackBar 来简单实现。...和 showModalBottomSheet，两种方式只有在展示类型上的差别，方法调用无差，而且 showBottomSheet 和 fab 有组合动画，showModalBottomSheet 则没有...SimpleDialog SimpleDialog 相比于 AlertDialog 少了 content 和 action 参数，多了 children 属性，需要传入 Widget 列表，那就可以自定义全部内容了...AboutDialog 会自带两个按钮 VIEW LICENSES 和 CLOSE，VIEW LICENSES 会跳转一个 Flutter Licenses 的网页，CLOSE 会关闭，至于为什么是英文的...，是因为我们没有设置语言的原因，这个涉及到多语言，这边推荐几篇之前看过的文章，如果下次有时间的话会单独拿出来讲下这边为了支持中文，我们做下如下的修改，首先打开 pubspec.ymal 文件加入如下支持

2.9K2 0

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提供background参数。

2.3K2 0

Flutter 小技巧之 MediaQuery 和 build 优化你不知道的秘密

：viewInsets 在没有弹出键盘时是 0，弹出键盘之后 bottom 变成 336 padding 在弹出键盘的前后区别， bottom 从 34 变成了 0viewPadding 在键盘弹出前后数据没有发生变化可以看到...那正常情况下 Navigator 都触发 rebuild 了，为什么页面不会都被 rebuild 呢？...这就和路由对象的基类 ModalRoute 有关系，因为在它的内部会通过一个 _modalScopeCache 参数把 Widget 缓存起来，正如注释所说：缓存区域不随帧变化，以便得到最小化的构建。...所以，看到这里有没有想到什么？...为什么时不时通过 MediaQuery.of(context) 获取的 padding ，有的 top 为 0 ，有的不为 0 ，原因就在于你获取的 context 来自哪里。

1.5K2 0

【Flutter 实战】简约而不简单的计算器

历史上的今天 1997年的今天英国将中国香港主权移交中华人民共和国，中国香港回归。...中国香港回归是指中华人民共和国政府决定在1997年7月1日对中国香港恢复行使主权，大不列颠及北爱尔兰联合王国政府于1997年7月1日将中国香港交还给中华人民共和国的历史事件。...，其中高亮颜色（按住时颜色）、背景颜色、按钮文本、文本颜色属性作为参数，封装如下： class _CalculatorItem extends StatelessWidget { final String...不足之二：此App没有考虑横屏的情况，为什么？因为横屏很可能导致整体布局发生变化，横屏时按钮是变大还是拉伸，或者拉伸间隙？...其实这是一个用户体验的问题，首先问问自己，为什么要横屏？横屏可以显著的提升用户体验吗？如果不能，为什么要花费大力气适配横屏呢？ ?

7841 0

18.Flutter学习之路日期和时间戳，以及日期组件

//当前的时间戳 1584023909627 print(DateTime.fromMillisecondsSinceEpoch(now.millisecondsSinceEpoch));//将时间戳转化为...>[ InkWell( //没有样式，带有点击时水波纹的效果 child: Row( mainAxisAlignment...], ), onTap: _showDatePicker, ), InkWell...( //没有样式，带有点击时水波纹的效果 child: Row( mainAxisAlignment: MainAxisAlignment.center...>[ InkWell( child: Row( mainAxisAlignment: MainAxisAlignment.center

2.6K1 0

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

一、老套路，先看样式左图是我业务中的样式，右图是下方源码展示样式（复制可直接运行，无额外组件引入）二、讲解 1.涉及组件首先，没有一个单一组件来实现这个效果实现这个效果涉及以下组件： AppBar...Text：文本 Container：布局组件 CustomScrollView：自定义滚动效果组件，比如列表和网格组件都可以包含在其中 SliverGrid：网格视图组件 SliverList：列表控件 InkWell...：效果控件，可以给其他widget包裹一个点击效果 ListTile：标题组件，通常填充listview 2.首先设置下标题样式 getItem是我们的主内容 @override Widget...这个是顶部tab样式，如果不需要可以去掉 body: Container( child: getItem(), )); } 3.换一批点击效果我们给换一批样式设置一个点击效果...habitIcon(item) { return InkWell( onTap: () { setState(() { _icon = item

1.8K2 0

Flutter 时间选择组件

Flutter默认提供了DatePicker日期选择器，如果对样式没有特殊的要求，那么可以使用它来进行时间的选择，默认的样式如下所示。...>[ InkWell( onTap: _selectDate, child: Row(...Icons.arrow_drop_down), ], ), ), InkWell...跳转到指定日期，默认支持动画切换自定义日历Item，支持组合widget的方式和利用canvas绘制的方式自定义顶部的WeekBar 根据实际场景，可以给Item添加自定义的额外数据，实现各种额外的功能...(fontSize: 15, fontWeight: FontWeight.w300), ), ), ), InkWell

4.3K3 0

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

前言：为什么我们需要文件列表？在现代科技发展迅速的时代，我们的电脑、手机、平板等设备里积累了大量的文件，这些文件可能是我们的照片、文档、音频、视频等等。...构建文件列表的动机在我们的日常生活中，我们可能会遇到一些这样的场景：比如我们想要查找某个重要的文档，但是却不记得放在了哪个文件夹里；又或者我们想要分享一张照片给朋友，但是却找不到它在哪个文件夹下。...本文将探索的内容在本文中，我们将深入探讨如何使用Flutter构建一个简单而实用的文件列表。我们将从最基础的文件列表开始，逐步完善和优化，直至实现一个功能强大、用户友好的文件列表。...如果没有，不要担心，你可以通过命令flutter create 文件列表项目来创建一个新的Flutter项目。接下来，让我们打开项目，并找到lib文件夹。...接下来，我们将进一步改进网格布局，使其更加灵活和美观。

1.5K1 2

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

上 @override Widget build(BuildContext context) { final Widget result = Focus( //略......child: InkWell( onTap: widget.onPressed, } ---->[flutter/lib/src/material/ink_well.dart:813...]------- class InkWell extends InkResponse { const InkWell({ GestureTapCallback onTap, }) : super...if (widget.onTap !...Simply /// use the pan callbacks instead. 2.4:事件一览(第三波):五火教主别怕，如上面所说，这也五个是拖动事件,只不过没有方向区分而言事件名

1.7K1 0

点击加载更多

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

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

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

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

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

Flutter - ListView 挂件中使用 JSON 文件

Flutter中日期组件DatePicker及组件汉化

【Flutter 组件集录】Card | 8 月更文挑战

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

Flutte部件目录-基本部件（二）顶

Flutter开发中的一些Tips

Flutter 入门指北之弹窗和提示（干货）

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

Flutter 小技巧之 MediaQuery 和 build 优化你不知道的秘密

【Flutter 实战】简约而不简单的计算器

18.Flutter学习之路日期和时间戳，以及日期组件

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

Flutter 时间选择组件

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

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐