Flutter InkWell小部件未通过容器的渐变和颜色显示 - 腾讯云开发者社区

在 Flutter 中，自带手势监听的目前为止好像只有按钮部件和一些 chip 部件，例如 Text 等部件需要实现手势监听，就需要借助带有监听事件的部件来实现了，这节我们会讲下 InkWell 和 GestureDetector...InkWell 在前面的一些例子中，小伙伴应该看到了好几次 InkWell 这个部件，通过它我们可以实现对一些手势的监听，并实现 MD 的水波纹效果，举个简单的一个例子 InkWell( child...InkWell 是在 MaterialDesign 风格下的一个用来响应触摸的矩形区域（注意加粗的文字，1.如果不是 MD 风格的部件下，你是不能用这个来做点击响应的；2.InkWell 是一块矩形区域...InkWell 必须要有一个 Material 风格的部件作为锚点，巴拉巴拉巴拉....再次强调必须要在 MD 风格下使用。...，那么很多小伙伴肯定会问了，「**，加了那么多代码，效果还是和以前的一样，还不如不加...」好吧，我无法反驳，但是如果要实现多个动画呢，那么使用 Tween 就有优势了，比如我们让图标大小变化的同时，颜色和位置也发生变化

1.8K3 0

Flutter开发中的一些Tips

我们在Flutter中常使用的BottomNavigationBar 和 AppBar 其实就在内部处理了此类问题。...比如将一些部件、属性进行封装，避免重复的书写。不过封装也讲究使用场景。如果这种样式的部件仅仅只是某一两处使用，封装显得有点小题大做。并且封装的大而全也会增加使用的复杂度。...，比如FlatButton的默认宽度为88，高度为36，但是FlatButton中没有直接修改的属性，网上好多的方法都是通过包一层Container去修改，不仅增加的嵌套，有些需求还不能达到。...Scaffold的 AppBar，AppBar中默认的title在Android中靠左显示，IOS中居中显示。如果需要两个平台效果统一，需要设置在AppBar中主动设置centerTitle属性。...使用场景是给一些无点击事件的部件添加点击事件时使用（也支持长按、双击等事件），同时你也可以去修改它的颜色和形状。

2.1K3 0

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

是的

没有找到

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

处理点击我们不仅希望向用户展示信息，还希望我们的用户与我们的应用进行互动！那么，我们如何回应基本操作，如点击和拖动？我们将使用GestureDetector部件！...虽然我们已经创建了一个自定义按钮来演示这些概念，但Flutter包括一些开箱即用的按钮：RaisedButton，FlatButton和CupertinoButton 完整例子 import 'package...添加材质涟漪效果在设计应遵循材质设计指南的应用程序时，我们希望在点击时将涟漪动画添加到部件。 Flutter提供InkWell部件来达到这个效果。...路线创建一个我们想要点击的部件将其包装在InkWell部件中以管理点击回调和涟漪动画 // The InkWell Wraps our custom flat button Widget new InkWell...Flutter通过提供Dismissible部件使这项任务变得简单。

1.8K2 0

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

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

1.1K3 1

Flutter中构建布局顶

当您重新加载应用程序时，应该会看到截图中显示的相同布局。您可以通过将交互添加到您的Flutter应用中来为此布局添加交互功能。 Flutter的布局方法重点是什么？...但是你看不到的东西也是小部件，例如排列，约束和对齐可见小部件的行，列和网格。您可以通过构建小部件来创建布局来构建更复杂的小部件。例如，左边的屏幕截图显示了3个图标，每个图标下有一个标签： ? ?...有关更多信息，请参阅可视化调试，这是调试Flutter应用程序中的一部分以下是此UI的部件树图： ? 大部分应该看起来像你所期望的，但你可能想知道容器（以粉红色显示）。...您可以通过将整个布局放入Container并更改其背景颜色或图像来更改设备的背景。...每个图像使用一个Container来添加一个圆形的灰色边框和边距。包含图像行的列使用容器将背景颜色更改为浅灰色。

43.1K1 0

flutter InkWell实现水波纹点击效果

在flutter 开发中用InkWell或者GestureDetector将某个组件包起来，已添加点击事件。...: 28, width: 120, child: Text("InkWell单击事件"), ), ), 如果在InkWell的上下都出现的颜色的设置，如上中的Container中如果加入了color..., //.InkResponse内部的radius这个需要注意的是，我们需要半径大于控件的宽，如果radius过小，显示的水波纹就是一个很小的圆， //水波纹的半径 radius: 300.0...容器内部设置装饰器颜色，否则会遮盖住水波纹颜色的，containedInkWell设置为false就能看到是否是遮盖了。...容器内部设置装饰器颜色，否则会遮盖住水波纹颜色的，containedInkWell设置为false就能看到是否是遮盖了。

5.3K2 0

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

Image 一个显示图像的部件。 ?...支持以下图像格式：JPEG，PNG，GIF，GIF动画，WebP，WebP动画，BMP和WBMP 要自动执行像素密度感知资产解析，请使用AssetImage指定图像并确保在部件树中的Image部件外部存在...也可以看看: Icon, 显示来自字体的图像. new Ink.image,这是在材质应用程序中显示图像的首选方式（特别是如果图像位于Material中，并且在其上会有InkWell）....read-only highlightColor → Color 该按钮的InkWell的高光颜色. [...]...final textTheme → ButtonTextTheme 定义按钮的基本颜色，以及按钮的最小尺寸，内部填充和形状的默认值. [...]

4.4K2 0

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

Flutter中GridTile中图像上方的InkVell波纹我认为这是在图像上显示波纹效果的更好方法。...: () {}, ), ), 使用Stack，我们可以将Material和InkWell带到图像上。...要拉伸材质，我们将使用Positioned.fill小部件。...( onTap: () { ... }, ), ), ), ], ); 我们创建了这个简单的小部件，以在任何给定孩子的上方绘制墨水反应。...splashColor, onTap: onTap, ), ), ), ], ); } } 优秀的方法

7753 0

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

当用户未选中时，即value 为null，显示''请选中"，用法如下： DropdownButton( hint: Text('请选择'), value: null, ... ) 效果如下...RawMaterialButton RawMaterialButton是基于Semantics, Material和InkWell创建的组件，它不使用当前的系统主题和按钮主题，用于自定义按钮或者合并现有的样式...BackButton() Android和IOS平台显示的图标是不一样的，ios效果如下： ? Android效果如下： ?...ButtonBar ButtonBar并不是一个单独的按钮控件，而是末端对齐的容器类控件，当在水平方向上没有足够空间时候，按钮将整体垂直排列，而不是换行。...如果开发的是web程序，我们可以设置鼠标悬停颜色： ToggleButtons( hoverColor: Colors.cyan, ) 欢迎加入Flutter的微信交流群(mqd_zzy

1.9K3 0

Flutter创建圆圈图标按钮

我找不到任何显示如何创建IconButton类似于的圆的示例FloatingActionButton。...例： import 'package:flutter/material.dart'; class SettingPage extends StatefulWidget { @override...Colors.black38)), ),//............ ), ), ); } } 如果要利用splashColor，请使用材料类型为circle的小部件...highlightColor包装InkWell小Material部件。...然后decoration在Container小部件中删除。

1.7K3 0

Flutter 小技巧之 Flutter 3 下的 ThemeExtensions 和 Material3

本篇分享一个简单轻松的内容： ThemeExtensions 和 Material3 ，它们都是 Flutter 3.0 中的重要组成部分，相信后面的小知识你可能还没了解过～。...ThemeExtensions相信大家都用过 Flutter 里的 Theme ，在 Flutter 里可以通过修改全局的 ThemeData 就来实现一些样式上的调整，比如：全局去除 InkWell...事实上现在 Flutter 3.0 里 colorScheme 才是主题颜色的核心，而 primaryColorBrightness 和 primarySwatch 等参数在未来将会被弃用，所以如果目前你还在使用...相关的值去计算显示。...更多可见《HCT 的色彩原理》最后最后我们回顾一下，今天的小技巧有：通过 ThemeExtensions 拓展想要的自定义 ThemeData通过 useMaterial3 启用 Material3

1.2K3 0

flutter Container容器实现圆角边框

本文实例为大家分享了flutter Container容器实现圆角边框的具体代码，供大家参考，具体内容如下在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 ?...使用 InkWell 来实现，更多关于 InkWell 可查看 flutter InkWell 设置水波纹点击效果详述 Container( margin: EdgeInsets.only(left...InkResponse( borderRadius: new BorderRadius.all(new Radius.circular(25.0)), //点击或者toch控件高亮时显示的控件在控件上层..., //.InkResponse内部的radius这个需要注意的是，我们需要半径大于控件的宽，如果radius过小，显示的水波纹就是一个很小的圆， //水波纹的半径 radius...: 300.0, //水波纹的颜色 splashColor: Colors.yellow, //true表示要剪裁水波纹响应的界面 false不剪裁如果控件是圆角不剪裁的话水波纹是矩形

9K1 0

在 Flutter 中创建漂亮的底部导航栏

,小程序,安卓，VUE，JavaScript。...如何使用: 通常，「ConvexAppBar」可以通过设置它的 bottomNavigationBar 来与脚手架一起工作。...」 (与上标图标中的白色圆圈相同) 「textIn」 (选定的离子出现相应的标题) 「titled」 (未选择的图标是显示其标题的单个图标) 「flip」 (点击图标显示一个 flip 动画) 「custom...icon) 「curveSize」 (拉伸上标图标的曲线) 「color」 (设置图标的颜色) 「backgroundColor」 (设置 appbar 背景颜色) 「gradient」 (使用渐变小部件设置...在这里，我们创建 ConvexAppBar ()并传递 Items、 initialActiveIndex 和 onTap。在条目中，我们通过所有的屏幕，我们希望在我们的应用程序中显示。

7.9K1 0

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

版本及Dart版本如下：Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Flutter内置了10多种Button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度...items中一一对应，选中样式如下： [1240] 当用户未选中时，即value 为null，显示''请选中"，用法如下： DropdownButton( hint: Text('请选择'),...BackButton() Android和IOS平台显示的图标是不一样的，ios效果如下： [1240] Android效果如下： [1240] CloseButton CloseButton是一个material...用法如下： CloseButton() 效果如下： [1240] ButtonBar ButtonBar并不是一个单独的按钮控件，而是末端对齐的容器类控件，当在水平方向上没有足够空间时候，按钮将整体垂直排列...web程序，我们可以设置鼠标悬停颜色： ToggleButtons( hoverColor: Colors.cyan, ) 欢迎加入Flutter的微信交流群(<font color

2.4K0 0

Flutte部件目录-基本部件（一）

使用Flutter的视觉，结构，平台和交互式小部件集合更快地创建漂亮的应用程序。基本部件在构建您的第一个Flutter应用程序之前，您绝对需要了解这些小部件。...没有子组件的容器尽可能大，除非传入的约束是无限的。在这种情况下，他们尽可能小，有子组件的容器将自己的尺寸扩大到他们的孩子大小，构造函数的宽度，高度和constraints参数将覆盖这些。...如果部件没有子且没有alignment(对齐)，但是提供了高度，宽度或constraints(约束)，那么基于给定这些约束和父对象的约束相结合容器会尝试尽可能小。...Ink，用于在Material上绘制装饰，允许InkResponse和InkWell飞溅来绘制它们。布局部件的目录。...该行通过在溢出的边上绘制黄色和黑色条纹警告来报告此情况。如果行外有空间，溢出量将以红色字体打印。

7.4K2 0

Flutter 入门指北之滑动部件（超详细）

前面的小节基本上讲完了常用的部件和容器部件，也可以完成很多的界面，但是又一个问题，假如我们要显示一段文字，比如将一段又臭又长的文字在界面上显示 1000 次，不难完成吧 // ..省略一些无关代码...那么这里提下可滑动的容器部件 SingleChildScrollView 这个部件非常简单，不贴源码了。最简单的使用方式只需要提供一个 child 即可。...来实现，Flutter 也提供了类似的部件 ListView 实现 ListView 的方法主要有通过 ListView 设置 children 属性实现通过 ListView.custom 实现...，所以 Flutter 提供了 separated 方法用来快速构建带有分割线的 ListView 加入我们的 item 之间的分割线需要如下样式：奇数位和偶数位之间用黑色分割线，偶数位和奇数位之间用红色分割线...因为 GridView 和 ListView 亮着都是可滑动的部件，直接拼接肯定会有「滑动冲突」，所以 Flutter 就提供了一个粘合剂，CustomScrollView，那么 Flutter 如何实现呢

2.4K3 0

为Flutter应用程序添加交互性顶

Checkbox，Radio，Slider，InkWell，Form和TextField是StatefulWidget子类的有状态小部件的示例。创建一个有状态的小部件重点是什么？...如果有疑问，首先管理父窗口小部件中的状态。我们将通过创建三个简单示例来举例说明管理状态的不同方式：TapboxA，TapboxB和TapboxC。...这些例子都是类似的工作 - 每创建一个容器，当点击时，在绿色或灰色框之间切换。 _active布尔值确定颜色：绿色表示激活或者灰色表示不激活。 ? ?...开发人员可能不在乎突出显示是如何管理的，并且倾向于轻敲框处理这些细节。 Dart代码：lib/main.dart 其它交互式小部件 Flutter提供各种按钮和类似的交互式小部件。...您可以在管理状态和Flutter图库中找到GestureDetector的示例。注意：Flutter还提供了一组名为Cupertino的iOS风格的小部件。

4.2K2 0

flutter制作具有自定义导航栏的渐进式 Web 应用程序

dart 文件，它是公司名称和导航栏的驱动程序文件。...- 并创建一个名为 - “CompanyName.dart”的文件 - 创建一个名为 CompanyName 的无状态小部件，它返回 Row() 小部件内的两个“文本”小部件。...我们这样做是为了获得我们对“P”和“raum”的不同风格。...我们可以假设，这些是按钮，所以我们可以使用 - “InkWell” - 小部件，它具有 Ontap() 函数，它被包裹着 - “材料”小部件，并取消材料小部件的默认颜色我们手动使颜色透明。...), ProjectStatisticsCards(), ], ), ), ); } } 我们正在使用这个小部件来获取具有不同颜色的不同项目名称的进度条

2.5K2 0

Flutter | 使用 InkResponse和 InkWell组件实现事件操作

InkResponse 和 InkWell 内部使用了Ink；可以包裹不具备事件处理的组件，实现水波纹等点击事件的效果； InkWell 水波纹限制在文本组件之内； InkResponse 水波纹没有限制...； InkResponse 和 InkWell 都可以指定各种响应颜色、手势等相关属性；属性 ?...，可以编写后查看效果； ---- 参考自CSDN的Flutter入门课程 import 'package:flutter/material.dart'; import 'PageOne.dart';...省略号 visible 容器外也会渲染组件 // overflow: TextOverflow.ellipsis, // //文字的缩放比例 //...context).textTheme.display1.fontSize * 1.1 + 100.0, // ), // //容器的宽高

1.9K2 0

flutter制作具有自定义导航栏的渐进式 Web 应用程序

2.9K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

Flutter开发中的一些Tips

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

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

Flutter中构建布局顶

flutter InkWell实现水波纹点击效果

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

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

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

Flutter创建圆圈图标按钮

Flutter 小技巧之 Flutter 3 下的 ThemeExtensions 和 Material3

flutter Container容器实现圆角边框

在 Flutter 中创建漂亮的底部导航栏

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

Flutte部件目录-基本部件（一）

Flutter 入门指北之滑动部件（超详细）

为Flutter应用程序添加交互性顶

flutter制作具有自定义导航栏的渐进式 Web 应用程序

Flutter | 使用 InkResponse和 InkWell组件实现事件操作

flutter制作具有自定义导航栏的渐进式 Web 应用程序

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐