当unPressed颤动时，更改按钮onPressed的背景颜色和文本颜色并设置回默认值 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Flutter 1.22版本新增的Button

简单使用： TextButton( child: Text('TextButton'), ) 当 onPressed 不设置或者设置为 null 时，按钮为不可用状态。...TextButton( child: Text('TextButton'), onPressed: (){}, ) onPressed 为点击回调，onLongPress 为长按回调。..., //背景色 this.foregroundColor, //前景色 this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色...和[elevation]的动画更改的持续时间。...this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。

1.9K1 0

【Flutter 组件】003-基础组件：按钮

所有 Material 库中的按钮的共同点：按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按钮上会出现水波扩散的动画）。...有一个 onPressed 属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。...1、概述 TextButton即文本按钮，默认背景透明并不带阴影。...按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。...默认值由各个按钮小部件定义，通常基于整体主题的ThemeData.colorScheme和ThemeData.textTheme。 2、构造方法注释见代码示例。

3620 0

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

是的

没有找到

Flutter | 常用组件

库中的按钮都有如下的相同点： 1，按下都会有 “水波纹动画” 2，都有一个 onPressed 属性来设置点击事件的回调,若没有该回调则按钮会处于禁用状态，禁用状态不响应用户点击各种常见的按钮 class...@required this.onPressed, //按钮点击回调 this.textColor, //按钮文字颜色 this.disabledTextColor, //按钮禁用时的文字颜色...this.color, //按钮背景颜色 this.disabledColor,//按钮禁用时的背景颜色 this.highlightColor, //按钮按下时的背景颜色 this.splashColor...: () => print('提交'), ) 复制代码 Flutter 中没有提供去除背景的设置，如果需要去除背景，可通过将背景颜色设置为透明来实现，将 color: Colors.blue 替换为...，设置激活状态的颜色宽高：Checkbox 无法自定义，Switch 只能定义宽度 Checkbox 有一个属性 tristate，表示是否为三态，默认值为false，如果为true 时，valude

12.2K3 0

Flutter lesson 7: Flutter组件之基础组件（三）

onHighlightChanged, //水波纹高亮变化回调,按下返回true,抬起返回false 使用默认值就可以 ButtonTextTheme textTheme, //按钮的主题 Color...textColor, //按钮文字的颜色 Color disabledTextColor, //按钮禁用时候文字颜色 Color color, //按钮背景色 Color disabledColor..., //按钮禁用时候背景色 Color highlightColor, // 点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色 Color splashColor, //水波纹的颜色...: Text("textColor文本的颜色，color背景颜色，highlightColor按钮按下的颜色"), textColor: Color(0xffff0000), color...: () {}, child: Text("disabledTextColor禁用时文本颜色，disabledColor禁用时背景颜色"), disabledTextColor:

1.7K5 0

Flutter 的按钮，看这篇文章就够了

我在之前的文章文本、图片和按钮在Flutter中怎么用中，简单介绍过按钮组件，本篇文章来详细聊聊Flutter中的各种按钮组件的各种应用场景。...首先来看一下按钮组件的属性： onPressed，必填参数，按下按钮时触发的回调，接收一个方法，传null值表示按钮禁用，会显示禁用相关样式 child，表示按钮展示状态的Widget，一般为一个文本组件...textColor，文本颜色 color，按钮的背景颜色 disabledColor，按钮禁用时的背景颜色 disabledTextColor，按钮禁用时的文本颜色 splashColor，点击按钮时水波纹的颜色...highlightColor，点击（长按）按钮后按钮的背景颜色 elevation，阴影的范围，值越大阴影范围就越大 padding，内边距 shape，设置按钮的形状下面是代码实例： Column...实际上，RaisedButton是立体效果的，而FlatButton是扁平化的平面效果；OutlineButton是边框按钮，对齐设置背景颜色是不起效果的。

10.5K3 1

【Flutter 专题】61 图解基本 Button 按钮小结 (一)

和 onPressed 是必须要设置的，其余属性根据需求而适当调整；案例尝试和尚首先尝试最基本的 IconButton；长按会由 tooltip 提醒，点击为默认主题色； IconButton(icon...，水波纹颜色为 redAccent；注意当 icon 自身设置颜色时 color 属性不生效； IconButton(icon: Icon(Icons.android), tooltip: 'IconButton...icon 颜色为 disabledColor 设置的 green；同样若 icon 本身设置了颜色，disabledColor 不生效；注意：onPressed: null 与 onPressed: (...，可根据 padding 或外层依赖 Container 适当调整位置和大小；默认最小尺寸为 88px * 36px；案例尝试和尚定义了一个基本的按钮，并监听其高亮改变时状态，与我们常见的按钮基本一致...foregroundColor 为按钮上层子元素颜色，若子元素本身设置颜色则不生效；backgroundColor 为按钮背景色； foregroundColor: Colors.redAccent.withOpacity

1.7K2 1

Flutter中的按钮组件Button

Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。常见的按钮组件如下： 1. RaisedButton 凸起的按钮； 2. FlatButton 扁平化的按钮； 3....FloatingActionButton 浮动按钮；按钮组件常见的属性： 1. onPressed 按下按钮时触发的回调方法，为必填参数，如果值为 null 表示禁用按钮，会显示禁用相关样式； 2.... child 子组件； 3. textColor 文本颜色； 4. color 按钮的颜色； 5. disabledColor 按钮禁用时的颜色； 6. disabledTextColor 按钮禁用时的文本颜色...； 7. splashColor 点击按钮时水波纹的颜色； 8. highlightColor 长按按钮后按钮的颜色； 9. elevation 阴影的范围； 10. padding 内边距； 11....: (){ print('浮动按钮'); }, // 背景颜色 backgroundColor

4.8K1 0

Flutter 全栈式——基础控件

因此，当遇到带有这两个单词开头的控件时，我们应该明确他们表达的意思。...VoidCallback 点击键盘完成按钮时触发的回调，无参数 onSubmitted ValueChanged 点击完成按钮时触发的回调，该回调有参数，参数即为输入的值 inputFormatters...，则使用fillColor指定的颜色填充 fillColor Color 输入框的背景颜色 errorBorder InputBorder errorText不为空，且输入框没有焦点时要显示的边框 focusedBorder...Color 水波纹效果的初始化颜色 hoverColor Color 当指针悬停在按钮上时的填充颜色 highlightColor Color 水波纹的高亮颜色 elevation double 阴影高度...groupValue 动态类型该组单选按钮当前选定的值 onChanged ValueChanged 状态变化回调 activeColor Color 选中时的颜色 materialTapTargetSize

4.5K4 0

【Flutter 专题】62 图解基本 Button 按钮小结 (二)

凸起按钮，FlatButton 扁平按钮和 OutlineButton 边框按钮；可根据不同场景灵活运用； ?...colorBrightness 代表颜色对比度，一般分为 light / dark 两种；一般时深色的背景需要浅色的文字对比，浅色的背景需要深色的文字对比； // 可点击 RaisedButton(child...和尚原来以为按钮的子元素是 Widget，可自由设置各类效果，单独的 textColor 是否会略显多余；可实际并非如此，子元素设置颜色等之后 textColor 不生效；但 textColor 与主题相关...使用 RaisedButton 时会自带阴影效果，阴影的高度和高亮时的阴影高度均可自由设置；但是阴影的颜色应该如何处理呢，官方暂未提供阴影效果属性；和尚尝试了网上大神的方式，RaisedButton 外层依赖带模糊阴影效果的...Container；和尚借鉴并稍微调整一下，解决方案并非最佳，仅作尝试；初始时定义一个默认的高度 height 作为阴影高度，监听按钮的 onHighlightChanged 方法更改

1.5K4 1

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

如果onPressed回调为空，那么该按钮将被禁用，并且默认情况下将类似于disabledColor中的平面按钮。...如果您试图更改按钮的color并且没有任何效果，请检查您是否传递了非空onPressed处理函数。如果您想为点击提供墨水飞溅效果，但不想使用按钮，请考虑直接使用InkWell。...final disabledTextColor → Color 禁用按钮时用于此按钮文本的颜色. [...] final elevation → double 放置此按钮的z坐标。...final onPressed → VoidCallback 当点击按钮或以其他方式激活时调用. [...]...final textTheme → ButtonTextTheme 定义按钮的基本颜色，以及按钮的最小尺寸，内部填充和形状的默认值. [...]

4.9K2 0

Flutter 中的按钮组件

FloatingActionButton：浮动按钮；按钮组件常见的属性： 1. onPressed 按下按钮时触发的回调方法，为必填参数，如果值为 null 表示禁用按钮，会显示禁用相关样式； 2....值的类型为Widget； 3. textColor 文本颜色。值的类型为Colors； 4. color 按钮的颜色。值的类型为Colors； 5. disabledColor 按钮禁用时的颜色。...值的类型为Colors； 6. disabledTextColor 按钮禁用时的文本颜色。值的类型为Colors； 7. splashColor 点击按钮时水波纹的颜色。...值的类型为Colors； 8. highlightColor 长按按钮后按钮的颜色。值的类型为Colors； 9. elevation 阴影的范围。...: (){ print('浮动按钮'); }, // 背景颜色 backgroundColor

4K3 0

Flutter&鸿蒙next中的按钮封装：自定义样式与交互

，我们定义了CustomButton组件，它接受onPressed（点击事件）、label（按钮文本）、color（按钮颜色）、textColor（文本颜色）和borderRadius（圆角）作为参数。...如果需要一个圆形按钮，可以将borderRadius设置为BorderRadius.circular(100)。按钮的颜色颜色是按钮视觉设计中的重要元素。...在CustomButton中，我们可以通过color参数来设置按钮的背景色，通过textColor参数来设置文本颜色。这允许我们根据不同的场景和主题来调整按钮的颜色。...点击事件处理在CustomButton中，点击事件通过GestureDetector的onTap属性来处理。当用户点击按钮时，会触发onPressed回调函数。...dartCustomButton( onPressed: () { // 按钮点击事件逻辑 }, label: 'Click Me',)按钮的可访问性在设计按钮时，我们还需要考虑到可访问性。

4000 0

6详解AppBar小部件

AppBar 通常显示概括本页的功能模块，例如图标和标题，并且通常包含按钮或其他用户交互点。...AppBar 包含各种属性，包括颜色、大小、图标主题、文本主题等等。背景颜色以下代码将 AppBar 的背景颜色更改为深橙色。500添加以访问颜色的特定阴影，900即最暗和最亮50。...: IconThemeData(color: Colors.green, size: 36), ), 文字主题假设您想将文本颜色更改为带有较浅阴影的琥珀色，200并将字体大小设置为24： AppBar...的布局和添加小部件如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题所以我们有了！...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件的 z 坐标顺序，默认值 4，对于可滚动的 SliverAppBar，当 SliverAppBar

18.9K1 0

文本、图片和按钮在Flutter中怎么用

最大缓存限制为100MB，当限定的空间已经存满数据时，把最久没有被访问到的图片清除。图片缓存只会在运行期间生效，也就是只缓存在内存中。...既然是按钮，因此除了控制基本样式之外，还需要响应用户点击行为。这就对应着按钮控件中两个最重要的参数了： onPressed 参数用于设置点击回调，告诉Flutter在按钮点击时通知我们。...与Text控件类似，按钮控件也提供了丰富的样式定制功能，比如背景颜色color、按钮形状shape、主题颜色colorBrightness，等等。...因为按钮背景颜色是浅色的，为避免按钮文字看不清楚，我们通过设置按钮主题 colorBrightness 为 Brightness.light ，保证按钮文字颜色为深色。展示效果如下： ?...其中，控件初始化的child参数用于设置按钮长什么样，而onPressed参数则用于设置点击回调。与Text类似，按钮内部也有丰富的UI定制接口，可以满足开发者的需求。

9.4K2 0

《Flutter》-- 4.Flutter组件基础

didUpdateWidget()：当组件的配置发生变化或执行热重载时，系统会回调该函数更新视图。...4.3.2 按钮组件 Materail组件库中常见的按钮组件： RaisedButton：默认是带有阴影和灰色背景的按钮，按下后阴影会变大； FlatButton：默认是背景透明并不带阴影的按钮，按下后会有背景色...； OutlineButton：默认是一个带有边框、不带阴影且背景透明的按钮，按下后边框颜色会变亮，同时会出现背景和阴影效果； IconButton：一个可点击的图标按钮，不支持文字，默认没有背景，点击后会出现背景...所有Materail组件库的按钮都有两个相同点：一是按下时会有水波动画，另一个是都有一个onPressed属性来设置单击回调。...focusNode：用于控制TextField组件是否获取输入焦点，它是用户和键盘交互的一种常见方式。 decoration：用于控制TextField组件的外观显示，如提示文本、背景颜色和边框。

13.4K3 0

Flutter的文本、图片和按钮使用

这就对应按钮控件中的两个最重要参数： onPressed参数用于设置点击回调，告诉Flutter在按钮被点击时通知我们。...若onPressed参数为空，则按钮会处于禁用状态，不响应用户点击 child参数用于设置按钮内容，告诉Flutter控件应长成啥样，即控制按钮控件的基本样式。...与Text控件类似，按钮控件也提供丰富样式定制功能，如背景颜色color、按钮形状shape、主题颜色colorBrightness等。...因为按钮背景颜色是浅色的，为避免按钮文字看不清楚，我们通过设置按钮主题colorBrightness为Brightness.light，保证按钮文字颜色为深色。...最后学习按钮控件。Flutter提供多种按钮控件，使用方法类似。控件初始化的child参数用于设置按钮长什么样，而onPressed参数则用于设置点击回调。

1.7K2 0

『Flutter』常用组件按钮、图片

它有默认的阴影和灰度效果，当按下时会有视觉反馈。 2. FlatButton（现在称为TextButton）：这是一个无阴影的平面按钮，通常用于不太重要的操作。...它在按下时不会改变外观，提供简洁的视觉效果。 3. OutlineButton（现在称为OutlinedButton）：这个按钮有一个边框，但没有背景色。...当按下时，边框和文字颜色会变化，适用于需要强调边框而非背景色的场景。 4. IconButton：这是一个图标按钮，常用于工具栏和对话框中。...TextButton 被点击时，onPressed 会被触发 • 当 TextButton 被长按时，onLongPress 会被触发 4.Icon Flutter 中的 Icon 组件用于显示 Material...2. width (double): 图片的宽度。如果不设置，图片会根据其父组件和其他内容自动调整大小。 3. height (double): 图片的高度。同样，如果不设置，会自动调整。

6771 0

Flutter | 常用组件分类、概述、实战

Flutter组件的分类文字类型容器类型辅助提示类型列表类型系统主题风格类型交互类型文字类型用于描述文字，如Text组件，一个普通的文本，属性有字体的颜色、大小、下划线、删除线...onPressed: _incrementCounter, //长按按钮的提示 tooltip: 'Increment', //悬浮按钮的图标...有输入焦点按钮的颜色默认：ThemeData.focusColor focusColor: Colors.tealAccent, // 指针悬停时按钮的颜色默认：ThemeData.hoverColor...: Colors.tealAccent, // 指针悬停时按钮的颜色默认：ThemeData.hoverColor hoverColor: Colors.white,...按钮的颜色默认：ThemeData.hoverColor // hoverColor: Colors.white, // // 点击时的水波纹颜色默认：如果为null，使用

4.7K2 1

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

: (){ }, ) 效果： [1240] onPressed为null或不设置时，按钮是禁用状态。...disabledColor 禁用状态下背景颜色 highlightColor 高亮颜色，按下时的颜色 splashColor...，用法如下： PopupMenuButton( tooltip: 'PopupMenuButton', ... ) 效果如下： [1240] 设置其阴影值、内边距和弹出菜单的背景颜色...Colors.red, onPressed: () {}, ) 当长按时显示提示，效果如下： [1240] BackButton BackButton是一个material风格的返回按钮，本身是一个..._selecteds[index]; }); }, ); isSelected 属性是bool类型集合，数量和children的数量一致，onPressed是点击回调

2.9K0 0

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

onPressed为null或不设置时，按钮是禁用状态。...... ) 按钮可以设置字体及各种状态颜色，总结如下：属性说明 textColor 字体颜色 disabledTextColor 禁用状态下字体颜色 color 背景颜色 disabledColor...禁用状态下背景颜色 highlightColor 高亮颜色，按下时的颜色 splashColor 水波纹颜色，按下松开会有水波纹效果以textColor为例，用法如下： RaisedButton(...设置其阴影值、内边距和弹出菜单的背景颜色： PopupMenuButton( elevation: 5, padding: EdgeInsets.all(5), color:...fillColor是选中按钮的背景颜色。

3.6K3 0

点击加载更多

Flutter 1.22版本新增的Button

【Flutter 组件】003-基础组件：按钮

Flutter | 常用组件

Flutter lesson 7: Flutter组件之基础组件（三）

Flutter 的按钮，看这篇文章就够了

【Flutter 专题】61 图解基本 Button 按钮小结 (一)

Flutter中的按钮组件Button

Flutter 全栈式——基础控件

【Flutter 专题】62 图解基本 Button 按钮小结 (二)

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

Flutter 中的按钮组件

Flutter&鸿蒙next中的按钮封装：自定义样式与交互

6详解AppBar小部件

文本、图片和按钮在Flutter中怎么用

《Flutter》-- 4.Flutter组件基础

Flutter的文本、图片和按钮使用

『Flutter』常用组件按钮、图片

Flutter | 常用组件分类、概述、实战

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

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐