首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter:如何给ToggleButtons的每个按钮上色

Flutter是一种跨平台的移动应用开发框架,它可以同时在Android和iOS平台上构建高性能、美观的应用程序。在Flutter中,可以使用ToggleButtons小部件创建一个具有多个切换按钮的组合。每个按钮可以通过设置颜色属性来上色。

要给ToggleButtons的每个按钮上色,需要使用Flutter中的MaterialApp和ToggleButtons小部件。下面是一种可能的实现方法:

  1. 导入Flutter的库:
代码语言:txt
复制
import 'package:flutter/material.dart';
  1. 在Flutter应用程序的主函数中创建一个MaterialApp小部件:
代码语言:txt
复制
void main() {
  runApp(MaterialApp(
    home: MyToggleButtons(),
  ));
}
  1. 创建一个自定义的ToggleButtons小部件,并在其中定义按钮的颜色:
代码语言:txt
复制
class MyToggleButtons extends StatefulWidget {
  @override
  _MyToggleButtonsState createState() => _MyToggleButtonsState();
}

class _MyToggleButtonsState extends State<MyToggleButtons> {
  List<bool> isSelected = [false, false, false];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toggle Buttons'),
      ),
      body: Center(
        child: ToggleButtons(
          isSelected: isSelected,
          color: Colors.white,
          selectedColor: Colors.red,
          fillColor: Colors.blue,
          children: <Widget>[
            Icon(Icons.favorite),
            Icon(Icons.star),
            Icon(Icons.camera),
          ],
          onPressed: (int index) {
            setState(() {
              isSelected[index] = !isSelected[index];
            });
          },
        ),
      ),
    );
  }
}

在上述代码中,我们定义了一个isSelected列表来存储每个按钮的选中状态。我们还通过color、selectedColor和fillColor属性来设置按钮的颜色。在children列表中,我们使用了三个不同的图标作为按钮的内容。最后,我们在onPressed回调函数中更新按钮的选中状态。

这样,每个按钮都会根据其选中状态显示不同的颜色。未选中状态的按钮将显示color属性定义的颜色,选中状态的按钮将显示selectedColor属性定义的颜色,而fillColor属性定义了选中状态的按钮的背景颜色。

希望以上解答能够满足您的要求,如果有任何问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

​Flutter | 1.9 全新组件 ToggleButtons

前几天的 GDD 相信大家还记忆犹新,Flutter 官宣发布了 1.9 正式版。 随之而来的有一些全新的组件和对于 web 的支持等等。...那我们今天就来看一下这其中的一个组件 --「ToggleButtons」。...创建一组水平的切换按钮。 它水平的显示 children 列表中提供的小部件。 其实这段文本是在源码中翻出来的,现在在网上搜 「ToggleButtons」 还是搜不出来官方文档的。...Widget 的集合2.isSelected:List,每个切换按钮相应的状态,true 为选中,该字段的长度必须和 children 的长度一致3.onPressed:切换按钮的点击事件...11.splashColor:点击后的颜色12.focusNodes:每一个按钮的焦点13.renderBorder:是否在每个切换按钮周围呈现边框14.borderColor:边框颜色15.selectedBorderColor

1.9K20

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

版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度...用法如下: CloseButton() 效果如下: [1240] ButtonBar ButtonBar并不是一个单独的按钮控件,而是末端对齐的容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列...=,size_16,color_FFFFFF,t_70] 我们还可以自定义外观,比如设置按钮的颜色: ToggleButtons( color: Colors.green, selectedColor...,可以设置禁用状态下按钮及边框的颜色: ToggleButtons( onPressed: null, disabledColor: Colors.grey[300],...ToggleButtons( hoverColor: Colors.cyan, ) 欢迎加入Flutter的微信交流群(mqd_zzy</font

2.6K00
  • 【Flutter 专题】129 图解 ToggleButtons 按钮切换容器组

    和尚前两天刚学习了 ButtonBar 按钮容器,今天顺便学习一下 ToggleButtons 按钮切换容器组,其切换效果可以应用在日常 TabBar 切换位置; ToggleButtons 源码分析...// 初始水波纹颜色 this.splashColor, // 选中时水波纹颜色 this.focusNodes, // 接受对应于每个切换按钮焦点列表...children 的按钮状态由 isSelected 对应选中和未选中状态;两个数组长度一致且不可为空; _toggleWid01(index) { var childList; if (index...8. focusNodes focusNodes 用于接受对应于每个切换按钮的 FocusNode 列表,焦点用于确定键盘事件应该影响哪个子 Widget,若设置 focusNodes,其数组长度应与子...---- ToggleButtons 案例源码 ---- ToggleButtons 的使用非常便捷,和尚主要是想学习 ToggleButtons 整体的思路,包括设置圆角或边框等,内部 Widget

    1.4K30

    Jetpack Compose ! 再战!

    成功完成这项挑战并提交参赛作品的前 500 名参赛者将收到一张 Jetpack Compose 海报以及一套 Android 画笔,您可以自己体验上色,纾解压力。...此外,您还将获得限量版 Jetpack Compose 漫画海报,描绘了 Jetpack 团队如何力挽狂澜,从 "糟糕的界面" 手中拯救世界。 以上摘抄自官方微信号,请 自行体会 。...构建 Android 原生 UI 的现代化工具,它革的是传统 xml 的命,革的是 Databinding 的命,革的是 MVP 的命,而并不是 Flutter 的命。...如果你对跨平台感兴趣,现阶段毫无疑问应该去学习 Flutter 。 至于 Compose 在原生开发中会发展的怎么样,我坚定持长期看好态度。...就好像我手里的持仓基金,虽然它现在很绿,但让时间来证明,它会红起来。 不说了,我要学 Flutter 写 Web 去了。 评论区,留下你的看法 ~

    70630

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

    理解了单一样式文本Text的使用方法后,我们再来看看如何在一段字符串中支持多种混合展示样式。...混合展示样式与单一展示样式的关键区别在于分片,即如何把一段字符串分为几个片段来管理,给每个片段单独设置样式。...按钮 通过按钮,我们可以响应用户的交互事件。Flutter提供了三个基本的按钮控件:FloatingActionButton、FlatButton和RaisedButton。...如果 onPressed 参数为空,则按钮会处于禁用状态,不响应用户点击。 child 参数用于设置按钮的内容,告诉Flutter控件应该长成什么样,也就是控制着按钮控件的基本样式。...如果要支持缓存到文件系统,可以使用第三方的CacheNetworkImage。 最后,我们学习了按钮控件,Flutter提供了多种按钮控件,而它们的使用方法也都类似。

    7.7K20

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

    ,即如何把一段字符串分为几个片段,给每个片段单独设置样式: Android中使用SpannableString实现 iOS中使用NSAttributedString来实现 Flutter也有类似概念TextSpan...TextSpan定义一个字符串片段该如何控制其展示样式,而将这些有独立展示样式的字符串组装在一起,则能支持混合样式的富文本展示。...这就对应按钮控件中的两个最重要参数: onPressed参数用于设置点击回调,告诉Flutter在按钮被点击时通知我们。...若onPressed参数为空,则按钮会处于禁用状态,不响应用户点击 child参数用于设置按钮内容,告诉Flutter控件应长成啥样,即控制按钮控件的基本样式。...最后学习按钮控件。Flutter提供多种按钮控件,使用方法类似。控件初始化的child参数用于设置按钮长什么样,而onPressed参数则用于设置点击回调。

    59420

    基于Flutter手把手教你实现一个日期选择(日历形式)

    所以,读完本文,你讲学会两个大的知识点:如何在flutter上做一个自定义组件如何开发插件并发布到 pub.dev因为是操作实战,所以,我会给出完整的实现过程来,首先,我们确定的是需要创建一个自定义组件...通过组合其他组件:这是创建自定义组件的最基本和最常见的方式。Flutter框架提供了大量的内置组件,如文本、图像、按钮等。你可以通过组合这些内置组件来创建自己的自定义组件。...Flutter的渲染系统是基于RenderObject的,每个组件都对应一个RenderObject。通过实现自己的RenderObject,你可以完全控制组件的布局和绘制。...这时候我们记录的最后一次的用户点击日期就发挥作用了,此时对selectedDate和_lastSelectedDate进行比较,小的给到起始日期,大的给到终止日期。。...如何发布插件开发完毕,剩下的过程是发布了,首先你需要检查下有没有语法问题,使用以下命令来分析你的代码,确保没有任何语法错误:flutter analyze并运行测试:flutter test确保所有测试都通过

    2.6K50

    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调

    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter...按钮增加点击跳转到 smslogin.dart 页面的功能,你需要在 onPressed 回调中使用 Navigator 进行页面跳转,我们需要以下步骤在注册页面修改登录按钮的代码:BlackButton...那么扩展知识又来了扩展知识在Flutter中,为小部件的构造函数添加一个命名的 key 参数有以下几个主要作用:1. 唯一标识小部件每个小部件都可以通过 key 参数在树结构中唯一标识。...例如,在一个可变顺序的列表中,如果每个项目都有唯一的 key,那么在列表项被重新排列时,它们的状态仍能正确保持。3. 控制小部件重建key 参数可以帮助Flutter引擎决定是否需要重建小部件。...代码示例以下是如何为小部件添加一个命名的 key 参数的示例import 'package:flutter/material.dart';class CustomWidget extends StatelessWidget

    6910

    【Flutter】StatelessWidget 组件 ( CloseButton 组件 | BackButton 组件 | Chip 组件 )

    文章目录 一、CloseButton 关闭按钮组件 二、BackButton 回退按钮组件 三、Chip 组件 四、 相关资源 一、CloseButton 关闭按钮组件 ---- 通常用于作为关闭界面的按钮...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...), ), ); } } 运行效果 : 三、Chip 组件 ---- Chip 组件比较复杂 , 可设置的配置较多 , 可参考其源码逐个研究每个字段的含义 ; Chip 组件源码...中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/ Flutter 相关问题 : https

    1.3K00

    不得不看的Flutter与Android混合开发

    虽说flutter能够跨平台,但由于现在几乎都是现成的项目,所以不可能用flutter来重头开发,所以目前几乎都是采用native+flutter的混合开发方案。那么该方案该如何实现尼?...3.2、flutter模块的调试 其实混合项目的flutter模块调试与flutter项目的的唯一却别就是如何在Android Studio与设备之间建立socket连接。...在flutter项目中,我们可以直接点击debug按钮来进行调试,但在混合项目中,该按钮就不起作用了,得通过其他方式来建立连接。...Android Studio给我们提供了flutter attach按钮,通过该按钮,flutter模块就能跟设备建立连接,就能对flutter模块进行调试。 ?...进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!

    5.4K41

    Adobe Photoshop 2021 for Mac M1【PS2022】免激活中文版下载PS2023教程

    给老的黑白照片上色,知识兔改变面部表情,或者大幅度修改你的画像。知识兔天空替换迅速选定并替换照片中的天空,知识兔自动调整景色颜色以与天空相配。...使用Photoshop直接访问云文档知识兔之前保存的版本。目前,预览、标记并还原有创意的文档,比知识兔以前的版本容易得多。图案预览想象你的设计是怎样变知识兔成一个图案的。...暂时,除了基本知识兔的「美白」,「磨皮」之外,新版的PS还支知识兔持表情的修改、年龄的修改、光线的方向等细节操作知识兔。使用方法和PS原先的操作方法一样,只需拖拽按钮,来回调节参数的大小即可。...知识兔3.黑白老照片的上色给照片「上色」,想必很知识兔多从事设计和摄影的同行们,都尝试过黑白的老照片上色吧,这次,知识兔PS2021则直接将其加入到了神经网络的「AI滤镜」中,且点击侧边的按钮就可以进行切换...相对以往的手动知识兔上色而言,这个上色过程则很简单,当你将照片调入知识兔到这个页面之后,你会发现,其实上色的操作基本上已经完成了,剩下需要知识兔做的,就是针对照片的颜色,做一下微调。

    1.4K50

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

    这时,一个简洁、清晰的文件列表就能够帮助我们快速解决这些问题。 本文将探索的内容 在本文中,我们将深入探讨如何使用Flutter构建一个简单而实用的文件列表。...添加网格视图按钮 首先,我们需要在文件列表页面上添加一个按钮,让用户可以选择查看文件列表的不同布局方式。在我们的示例中,我们将在AppBar中添加一个按钮来切换布局方式。...根据按钮的点击状态,我们将显示列表视图或网格视图。 2. 构建网格视图 接下来,让我们来实现网格视图的布局。我们可以使用Flutter中的GridView组件来展示文件列表。...为了解决这个问题,让我们来学习一下如何在Flutter中处理文本溢出,以确保文件名能够清晰可见。 1. 文本截断 我们可以使用Flutter中的Text组件的overflow属性来处理文本溢出问题。...在这一步,我们将学习如何使用HTTP方法来接入API,获取真实的文件列表数据。 1. 添加HTTP依赖 首先,我们需要在我们的Flutter项目中添加HTTP库的依赖。

    26612
    领券