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

如何像TabBar一样改变IconButton的颜色?

要像TabBar一样改变IconButton的颜色,可以通过自定义IconButton的颜色属性来实现。以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class CustomTabBar extends StatefulWidget {
  @override
  _CustomTabBarState createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Tab Bar'),
      ),
      body: Center(
        child: Text('Content of tab ${_selectedIndex + 1}'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: IconButton(
              icon: Icon(Icons.home),
              color: _selectedIndex == 0 ? Colors.blue : Colors.grey,
              onPressed: () {},
            ),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: IconButton(
              icon: Icon(Icons.search),
              color: _selectedIndex == 1 ? Colors.blue : Colors.grey,
              onPressed: () {},
            ),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: IconButton(
              icon: Icon(Icons.person),
              color: _selectedIndex == 2 ? Colors.blue : Colors.grey,
              onPressed: () {},
            ),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CustomTabBar(),
  ));
}

在上述代码中,我们使用了BottomNavigationBar作为底部导航栏,每个导航项都是一个BottomNavigationBarItem,其中的icon属性是一个IconButton,通过设置color属性来改变IconButton的颜色。根据当前选中的导航项,我们可以根据需要设置不同的颜色。

这只是一个示例,你可以根据自己的需求进行修改和扩展。

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

相关·内容

Flutter中AppBar、TabBar和TabController——顶部切换栏是如何实现

backgroundColor,导航栏背景颜色。...backgroundColor: Colors.pinkAccent, //背景颜色 //在导航栏标题左侧添加一个组件 leading: IconButton...以上是两个ScaffoldappBar都配置了title,但没有配置bottom。 好,我们现在来考虑一下,在有两个Scaffold场景下,如何实现顶部TabBar效果。...我们可以上面所讲,给内层Scaffold组件appBar配置bottom属性值为TabBar组件,但是这样的话,内层Scaffold组件title位置就会有一个留空,不好看,如下所示: ?...好,现在我们已经知道该如何利用AppBar和TabBar来实现顶部Tabbar视觉效果了。在本文最后,我们来了解一下如何个性化设置顶部TabBar导航条。

9.4K20

如何Elon一样演示你模型

想必很多人都看过Elon在上古时期演示手势控制视频吧,那个时候他拿着leap motion,兴奋讨论着设计、交互未来。 ?...这个在13年时候,确实非常令人感到震撼,以至于后面每次leap motion活动上,这个都会被拉出来,然后讲一讲人机交互未来。...而且受制于当年电脑性能,所以Elon观察只是线框,并不是完整实体,因为实时渲染高精度模型,还是非常考验显卡。 那么跟着摩尔定律跑到了2020年现在,我们可以实时渲染了么?...摸摸你小笔记本,显然是不行。但是,我们可以通过一些小技巧,也可以实现啦。那怎么做呢? “我们只需要利用预先渲染好高质量视频,然后通过控制进度条播放,这样看上去就是好像实时一样。” ?...通过Touchdesigner5分钟实现 确实很简单吧,赶快拿起你leap motion,你也可以收获一样快乐。

42810

http如何tcp一样实时收消息?

http如何tcp一样实时收消息?...一、webim如何实现消息推送 webim通常有三种方式实现推送通道: 1)WebSocket 2)FlashSocket 3)http轮询 其中1)和2)是用Tcp长连接实现,其消息实时性可以通过...本文要解答,webim使用http长轮询如何保证消息绝对实时性。 二、人们为什么会误解http长轮询不实时 什么是轮询?我擦,这个该怎么解释咧。...减小轮询时间间隔是否能解决消息延时问题? 减小轮询时间间隔的确可以缩短延时时间,但也不能保证消息绝对实时,同时又会产生新问题,绝大部分轮询调用,都没有消息返回,造成服务端极大资源浪费。...这种实时性保证不是通过增加轮询频率来保证,而是通过夯住http消息连接来保证,在大部分时间没有实时消息情况下,这个http消息连接对于webserver请求压力是90秒1次,能够大大节省了web

1.2K100

Flutter 按钮,看这篇文章就够了

textColor,文本颜色 color,按钮背景颜色 disabledColor,按钮禁用时背景颜色 disabledTextColor,按钮禁用时文本颜色 splashColor,点击按钮时水波纹颜色...上述例子我都是以RaisedButton为例来演示,实际上,RaisedButton、FlatButton和OutlineButton这三者使用都是完全一样。...,现在我们先来聊聊如何去自定义一个Button组件。...4,floatingActionButton child 属性,我们一般是给其配置成Icon,不建议给其配置成其他组件。 接下来,我们来聊一聊如何实现闲鱼底部Tabbar凸起按钮效果。...有些时候悬浮按钮不能将底部Tabbar上处于中间位置item图标完全覆盖,此时我们就通过设置外边距来调整悬浮按钮位置(主要是上下调整)。

9.3K31

如何让机器人具备人类一样触觉?

如果要让机器人像服务员、卫生员、文秘、保健员一样,与人类展开真正协作,就必须依靠触觉学和运动学领域进步。 “这个问题很复杂,需要时间。”...按照瑞典皇家理工学院表面化学教授马克·鲁特兰德(Mark Rutland)解释,假如人手指地球一样大,它足以感觉出一辆汽车和一栋房子大小差异。...具体到细微表面震动,关键信息源自帕氏小体(Pacinian corpuscles),这是一种长约1毫米椭圆形结构,可以在形状改变时发出信号。...例如,任何联网机器人或机器手均可获取如何识别、抓取和拿起咖啡杯信息。 其他触觉学研究人员相信,通过人工方式复制触觉将对自动化机器人发展产生重要影响,甚至对增强人类自身能力各种系统形成促进。...学生们组装了由奥卡姆拉与他人共同设计“hapkit”组件,然后通过编程开发了弹簧和减震器等虚拟设备,而且可以像在现实世界中一样进行操作。

58850

Flutter 入门指北之快速搭建界面(含Flutter知识体系)

( labelColor: Colors.red, // 选中时颜色 unselectedLabelColor: Colors.white, // 未选中颜色...PageView + TabBar 那么如何通过 TabBar 切换界面呢,这边我们需要用到 PageView 这个部件,当然还有别的部件,例如 IndexStack 等,小伙伴可以自己尝试使用别的,这边通过...,这边切换 PageView 页面后,TabBar 也需要随之改变 // 通过 tabController 来改变 TabBar 显示位置 _tabController.index...= position; }, ), ); } } 最终效果图就不贴了,可以发现滑动 PageView 或者点击切换 TabBar 位置,界面显示内容都会随之改变...Scaffold - Drawer drawer 同 endDrawer 属性是一样,除了滑动方向,Drawer 这个组件也相对比较简单,只要传入一个 child 即可,在展示之前,先对 appBar

1.7K20

Flutter第4天--基础控件(下)+Flex布局详解

图片颜色混合模式.png ---- Row和Column应该说是非常常用控件,其中有几个属性挺重要, 本文最后,我将对Flex布局(Row和Column父类)进行细致讲解,希望你不要错过。...imgBox = Wrap( children: formImgsColorBlendMode(), ); 一共就这些代码,就能实现下面的效果,Android也好,Flutter也好,套路都是一样...图片颜色混合模式.png 重复模式,脑子想想也就知道了,这里就不演示了 ---- 1.4:使用Image方法加载图片 这个等到文件读取再提一下,基本字段和Image是一样,所以不用担心。...---- 1.TabBar--标签Bar RaisedButton和Android内置Button基本上是一致 1.1源码一览: const TabBar({ Key key,...c2和c3,最终c2和c3长度是一样 如果同时Expanded--c1,c2和c3,最终c1,c2,c3长度都是一样 ?

2.1K30

如何程序员一样思考——解决问题经验

you to think.” — Steve Jobs 你可能还想知道,程序员一样思考到底意味着什么?...计算思维或分解大型复杂问题能力,与工作所需要基本技术能力一样有价值 — by Hacker Rank (2018 Developer Skills Report) 一个框架 为了找到正确框架,我遵循了...我看到新程序员犯最大错误是专注于学习语法,而不是学习如何解决问题。by - V....迟早你会认识到这个问题可以通过很轻松方式来解决。 那么如何练习呢?其实也有很多选择!...6、结论 现在,你知道“程序员一样思考” 是什么意思了。 你也知道解决问题是一种难以置信元技能。 如果这还不够,你肯定也知道了如何练习解决问题技巧。 你看,这是不是看起很酷!

40930

【Java】基础50:如何让写代码一样优雅?

一、Stream流引入 这个流和IO流中流很容易弄混淆。 但是它们是两个完全不一样概念,Stream流是容器处理简易API,使用起来特别方便。...Stream就好比在构建模型:关注做什么,而不是怎么做 for循环语法就是“怎么做” for循环循环体才是“做什么” ①过滤出姓刘元素 ②过滤出长度为3元素 ③打印集合元素 这些就是做什么,至于具体是怎么做出来...如果用普通方法,一共要6个增强for循环,使用Steam流只要6句话,就像诗一样。 ①延迟方法:filter方法 该方法只是在构建模型,并不是立即执行。...④映射:map方法 看下它源码: ? 参数:Function接口,昨天学一个函数式接口。 T类型就是Stream流中元素类型,R类型是新生成Stream流中元素类型。...同样道理: 也就是说,我们写在map方法中lambda表达式本质上就是对Function接口中apply方法重写。 作用:可以将一种T类型转换成为R类型,而这种转换动作,就称为“映射”。

81611

CTO一样思考:如何高效管理30人研发团队?

今天继续来分享一下,30人研发团队,如何管理更轻松、更高效、更成功。管理原则先来分享一下,我从事研发管理近十年管理原则和心得总结,包括我自己总结、或学习到或别人提炼。...正如红绿灯交通设计一样,某辆车可能会不小心闯了红灯而扣分,但红绿灯设计一定要正确、人性化和统一化。...你应该站在一个更高更抽象角度来思考,不断思考一个倍受大家欢迎公园应该是怎么设计,思考一栋有活力、经典和永恒建筑要遵循哪些模式,思考一个成功、优秀、卓越研发团队应该需要怎样流程和制度。...好爱情,都是双向。团队也一样,没有严格上下等级,只是分工和角色不同。作为管理者,不一定要始终保持“神秘感”,让人“捉摸不透”就是牛。...你要思考,当前你研发团队,最缺什么、更需要是什么、亟待解决问题又是什么。如何才能让你团队持续、稳定、高效地交付有价值软件产品?

1.4K21
领券