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

如何在flutter中更改`TabBar`中未选中的标签的背景色?

在Flutter中,要更改TabBar中未选中的标签的背景色,可以通过自定义TabBar的样式来实现。具体步骤如下:

  1. 创建一个TabController对象,用于管理TabBarTabBarView之间的关联。
代码语言:txt
复制
TabController _tabController;
  1. initState方法中初始化TabController对象,并指定标签数量。
代码语言:txt
复制
@override
void initState() {
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
}
  1. build方法中使用TabBarTabBarView来展示标签和对应的内容。
代码语言:txt
复制
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('TabBar Example'),
      bottom: TabBar(
        controller: _tabController,
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
      ),
    ),
    body: TabBarView(
      controller: _tabController,
      children: [
        // Content of Tab 1
        Container(color: Colors.red),
        // Content of Tab 2
        Container(color: Colors.green),
        // Content of Tab 3
        Container(color: Colors.blue),
      ],
    ),
  );
}
  1. 自定义TabBar的样式,包括未选中标签的背景色。
代码语言:txt
复制
TabBar(
  controller: _tabController,
  tabs: [
    Tab(
      child: Container(
        color: _tabController.index == 0 ? Colors.red : Colors.grey, // 未选中标签的背景色
        child: Text('Tab 1'),
      ),
    ),
    Tab(
      child: Container(
        color: _tabController.index == 1 ? Colors.green : Colors.grey, // 未选中标签的背景色
        child: Text('Tab 2'),
      ),
    ),
    Tab(
      child: Container(
        color: _tabController.index == 2 ? Colors.blue : Colors.grey, // 未选中标签的背景色
        child: Text('Tab 3'),
      ),
    ),
  ],
),

通过上述步骤,我们可以在Flutter中更改TabBar中未选中的标签的背景色。在自定义TabBar的样式时,通过判断_tabController.index的值来确定当前选中的标签,从而设置不同的背景色。

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

相关·内容

  • FlutterAppBar、TabBar和TabController——顶部切换栏是如何实现

    顶部TabBar切换栏实现第一种方式 在Flutter,AppBar用于定义顶部导航栏: Scaffold( appBar: AppBar( title: Text("AppBarPageDemo...2,TabBartabsTab元素,以及TabBarViewchildren页面元素是一一对应,对应好了之后就可以在页面对应展示了。...我们上面讲都是页面只有一个AppBar情况,这个时候如果想要加一个顶部TabBar,那么只需要配置APPBarbottom属性即可。...TabBar常用属性如下: tabs,显示标签内容,一般使用Tab对象,也可以是其他Widget isScrollable,是否可滚动 indicatorColor,底部指示条颜色 indicatorWeight...labelColor,选中文字颜色 unselectedLabelColor,选中文字颜色 示例代码如下: DefaultTabController( length: 6,//这里配置顶部

    10.3K20

    何在 Eclipse 更改注释块 @author 版权信息?

    文章目录 前言 一、打开需要进行版权标注类 二、进入配置页面 三、编辑配置信息 四、测试 总结 ---- 前言 我们在使用 IDE——Ecilpse 进行开发,需要注明版权信息时候,如果不更改默认设置的话...,在注释块 @author 内容就是电脑系统默认,例如下图所示。...---- 一、打开需要进行版权标注类 打开 Ecilpse 需要备注一个类或者是方法开发者信息,默认是系统用户,如下我就是 Lenovo,如下图所示: ?...说明:${user}属性默认取值是我们本地管理员 user 信息。 例如联想电脑默认取 lenovo。我们将${user}属性更改为我们需要标注作者信息即可。 ?...---- 总结 本文我们掌握了如何在 Eclipse 修改注释版权信息,这样我们就无需每次手动去调整了。那么同学,你是否会在 IDEA 里面修改注释版权信息呢?

    4.4K51

    何在keras添加自己优化器(adam等)

    2、找到keras在tensorflow下根目录 需要特别注意是找到keras在tensorflow下根目录而不是找到keras根目录。...一般来说,完成tensorflow以及keras配置后即可在tensorflow目录下python目录中找到keras目录,以GPU为例keras在tensorflow下根目录为C:\ProgramData...找到optimizers.pyadam等优化器类并在后面添加自己优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己优化器...(adam等)就是小编分享给大家全部内容了,希望能给大家一个参考。

    45K30

    何在 PowerBI 设置数值标签动态颜色

    PowerBI 数值标签从 2022 年 8 月开始支持动态颜色了。 首先,需要下载最新版 Power BI Desktop。...渐变色方式 效果如下: 在【视觉对象】【数据标签】【值】【颜色】下设置即可。如下: 动态标记最大值与最小值 还可以用度量值进行设置,例如标记最大值与最小值。...度量值如下: View.Color = 注意 这里 DAX 用到《BI 真经》视图型计算方法,不再重复。...这样就可以通过度量值,动态标记颜色,如下: 扩展创意用法 太多标签比较乱,可以仅仅显示需要标签。...则可以得到效果: 总结 动态标签颜色又可以做很多事情了。快来试试增强自己报表效果吧。

    17.3K60

    【小程序】全局配置window和tabBar

    设置下拉刷新时 loading 样式 当全局开启下拉刷新功能之后,默认窗口 loading 样式为白色,如果要更改 loading 样式效 果,设置步骤为 app.json -> window -...tabBar 6 个组成部分  backgroundColor:tabBar 背景色   selectedIconPath:选中图片路径   borderStyle:tabBar 上边框颜色...  iconPath:选中图片路径   selectedColor:tab 上文字选中颜色   color:tab 上文字默认(选中)颜色  3. tabBar 节点配置项 4....步骤1 - 拷贝图标资源 把资料目录 images 文件夹,拷贝到小程序项目根目录 将需要用到小图标分为 3 组,每 组两个,其中: 图片名称包含 -active 选中之后图标 图片名称不包含...对象包含属性如下:   pagePath 指定当前 tab 对应页面路径【必填】  text 指定当前 tab 上按钮文字【必填】   iconPath 指定当前 tab 选中时候图片路径【

    1.6K30

    探索 Flutter NavigationRail:使用详解

    介绍 在 Flutter ,NavigationRail 是一个垂直导航栏组件,用于在应用程序中提供导航功能。它通常用于更大屏幕空间设备,平板电脑和桌面应用程序。...在本例,我们设置为 NavigationRailLabelType.all,表示显示所有标签,包括选中标签。...: TextStyle(color: Colors.red), // 设置选中标签文本颜色 // 其他配置属性... ) 选中项颜色: 使用 unselectedIconTheme 属性设置选中图标主题...,以及 unselectedLabelTextStyle 属性设置选中标签文本样式。...: TextStyle(color: Colors.grey), // 设置选中标签文本颜色 // 其他配置属性... ) 4.2 自定义图标和标签 您可以通过以下方法自定义导航栏图标和标签

    52810

    何在 React Select 标签上设置占位符?

    在 React 标签是用于创建下拉选择框组件。在某些情况下,我们希望在选择框添加一个占位符,以提醒用户选择合适选项。...本文将详细介绍如何在 React 标签上设置占位符,并提供示例代码帮助你理解和应用这个功能。...该组件使用 useState 钩子来维护当前选择选项。在 标签内部,我们添加了一个带有 disabled 属性 标签作为占位符。...这个占位符选项 value 属性为空字符串,表示默认情况下没有选中任何选项。当用户选择其他选项时,handleSelectChange 函数会更新 selectedOption 状态。...结论本文详细介绍了在 React 如何设置 标签占位符。

    3.1K30

    何在MySQL 更改数据前几位数字?

    前言在 MySQL 数据库,有时候我们需要对数据进行一些特定处理,比如更改数据某个字段前几位数字。这种需求可能涉及到数据清洗、数据转换或者数据修复等操作。...使用 SUBSTR 函数要更改数据字段前几位数字,可以使用 SUBSTR 函数来截取字段子串,并进行修改。...在使用 SUBSTR 函数时,要确保指定起始位置和截取长度是符合逻辑,以避免截取出错或数据损坏。确保更新操作条件准确无误,以免影响到不需要修改数据记录。...总结本文介绍了如何使用 MySQL SUBSTR 函数来更改数据字段前几位数字。通过合理 SQL 查询和函数组合,我们可以实现对数据灵活处理和转换。...在实际应用,根据具体需求和情况,可以进一步扩展和优化这种数据处理方式,使其更加高效和可靠。

    30310

    刷题小程序【程序猿面试宝典】开发(二)| 页面创建、页面配置、全局配置

    在前期文章《刷题小程序【程序猿面试宝典】开发(一)| 项目概述与前期准备》,我们已经创建完小程序,并开通了云服务。如果你阅览或者哪里不太清除,请先移步到上期进行查看学习。...我们只需要将 app.json pages 数组页面路径删除即可 ?...上文字选中颜色,仅支持十六进制颜色 "list": [ { "pagePath": "", //页面路径,必须在 pages 先定义 "text"...3、在 images 文件夹下继续新建 icon 文件夹,将 tabBar 所需图标放到此文件夹下,在tabBar iconPath、selectedIconPath 配置填写路径就 OK 啦...6、自定义公共class样式 我们知道,在给小程序标签设置样式时,通常会给标签定义class,: 所以我们也给小程序设置一些公共class

    61750
    领券