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

在颤动中的所选BottomNavigationBarItem顶部显示平铺

在Flutter中,BottomNavigationBar是一个常用的底部导航栏组件,可以在应用程序的底部显示多个导航项。而BottomNavigationBarItem则是BottomNavigationBar的子组件,用于定义每个导航项的图标和标题。

在颤动中的所选BottomNavigationBarItem顶部显示平铺,可以通过设置selectedIcon和unselectedIcon属性来实现。selectedIcon用于设置选中状态下的图标,unselectedIcon用于设置非选中状态下的图标。当BottomNavigationBarItem被选中时,其顶部会显示选中状态下的图标,而非选中状态下则显示非选中状态下的图标。

下面是一个示例代码:

代码语言:txt
复制
BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '首页',
      selectedIcon: Icon(Icons.home_filled),
      unselectedIcon: Icon(Icons.home_outlined),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: '搜索',
      selectedIcon: Icon(Icons.search),
      unselectedIcon: Icon(Icons.search_outlined),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: '个人',
      selectedIcon: Icon(Icons.person),
      unselectedIcon: Icon(Icons.person_outline),
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
)

在上面的代码中,我们定义了一个包含三个导航项的BottomNavigationBar,分别是"首页"、"搜索"和"个人"。对于每个导航项,我们设置了选中状态和非选中状态下的图标。_selectedIndex是当前选中的导航项的索引,_onItemTapped是导航项被点击时的回调函数。

这样,当导航项被选中时,顶部会显示选中状态下的图标,而非选中状态下则显示非选中状态下的图标。

推荐的腾讯云相关产品:腾讯云移动应用分析(MTA),该产品提供了移动应用的用户行为分析、用户画像分析、漏斗分析等功能,帮助开发者深入了解用户行为和优化产品。

腾讯云产品介绍链接地址:https://cloud.tencent.com/product/mta

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

相关·内容

【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )

设置高度填充满父容器 heightFactor: 1, // 要设置水平 / 垂直方向平铺操作组件 child: 要控制平铺组件 ( Widget 类型 ), ), ) 代码示例...: // 水平/垂直方向平铺组件 FractionallySizedBox( // 设置宽度充满父容器 widthFactor: 1, // 要设置水平 / 垂直方向平铺操作组件...children 字段设置若干 Widget 组件 , 最后一个组件最顶端显示 , 覆盖前面的组件 ; 代码示例 : // 帧布局 Stack( children: [ Image.network...// 可以自行查看 BoxDecoration 可以设置属性 decoration: BoxDecoration(color: Colors.white...// 可以自行查看 BoxDecoration 可以设置属性 decoration: BoxDecoration(color: Colors.white),

2.8K00

Flutte部件目录-Material Components 顶

一个显示应用底部材质小部件,用于少量视图中进行选择,通常介于3到5之间。 底部导航栏由文本标签,图标或两者多个项目组成,并放置一块材料顶部。 它提供了应用程序顶级视图之间快速导航。...所有项目均以白色呈现,并且导航栏背景色与所选项目的BottomNavigationBarItem.backgroundColor相同。...final items → List 放置底部导航栏内互动条目....WidgetsApp 一个便利类,它包装了应用程序通常需要许多小部件。 ? Drawer Material Design面板,从展示台边缘水平滑动,以应用程序显示导航链接。 ?...将按钮封装在工具提示窗口小部件,以便在按下窗口小部件时(或者当用户采取其他适当操作时)显示标签。 ? DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品

9.5K40
  • flutter鸿蒙版本通过底部导航栏实现熟悉架构及语法

    写在前面 在这篇博客,我们将深入分析一个 Flutter 应用完整代码,该应用实现了一个底部导航栏,允许用户不同页面之间切换。... build 方法,我们构建了一个 MaterialApp,这是 Flutter 应用核心组件,提供了应用主题、路由等设置。...title 属性定义了应用标题,通常用于显示在任务切换器。 theme 属性设置了应用主题,这里我们使用蓝色调(primarySwatch 为 Colors.blue)。...顶部应用栏 appBar 属性设置了应用顶部导航栏,显示了应用标题。 显示页面 body 属性通过 _pages[_selectedIndex] 动态显示当前选中页面。...应用,包含了底部导航栏,可以不同页面之间进行切换。

    9310

    【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )

    常用于修改组件透明度 ; ClipOval : 裁剪布局组件 , 可以将布局裁剪成圆形 ; ClipRRect : 裁剪布局组件 , 可以将布局裁剪成方形 ; PhysicalModel : 将布局显示成不同形状...约束布局水平 / 垂直方向平铺操作 ; MultiChildRenderObjectWidget : 多节点布局组件 ; Stack : 相当于帧布局 FrameLayout ; Flex...; Flexible : 用于约束组件父容器展开大小组件 ; 二、Row 和 Column 组件 ---- Row 组件相关参数 : Row 组件相当于线性布局 , 水平方向布局 , 组件从左到右...children: [] 即可 , 括号 [] 是多个组件集合 , 使用逗号隔开 ; 示例代码 : // 水平方向排列线性布局 Row( children: [ 组件...Row 组件 , 横向布局中放置了两个组件 , 第一个 Image 组件显示原始图片 , 第二个组件是经过 SizedBox 组件约束大小 , 和 ClipOval 组件裁剪成圆形后效果 ; 六

    2.3K00

    【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

    组件 ; BottomNavigationBarItem 组件常用设置 : 默认状态图标 : icon ; 图标下显示标题 : title ; 激活状态图标 : activeIcon ; 背景颜色...const BottomNavigationBarItem({ @required this.icon, // 默认状态图标 this.title, // 图标下显示标题 Widget...组件 onTap 回调事件 , 传入一个匿名回调函数 , 该匿名方法回调 StatefulWidget 组件 setState 设置状态方法 , 修改当前选中索引 , 之后 BottomNavigationBar...onTap 回调方法 , 设置当前选中选项卡索引 , 根据该索引值修改 Scaffold 组件 body 对应组件 , 如果选项卡索引为 0 , 显示组件 0 , 如果选项卡索引为 1 , 那么显示组件...1 ; 设置 body 字段值时 , 根据当前被中选选项卡索引值 , 判断应该显示哪个组件 ; body: _currentSelectedIndex == 0 ?

    2.3K00

    指针液晶屏显示用法(二)

    饭量也得到了很大提升,以至于公司食堂考虑要不要收他双人份伙食费。 这天,张三爬楼时候遇到了保洁阿姨,于是上前打招呼。...一开始只是显示一些参数,这倒还好。后来要在屏幕上设定一些参数,设定时候,要在相应位置显示光标。一个页面可能要设置四五个参数。 阿姨:还好吧,很难吗?...这个屏幕虽然有光标显示功能,但是不符合要求。它就像word里光标一样,写入一个字,光标自动后移。但实际上,我们设定时候,是要求光标固定在一个位置不要动。...所以我百度了一下,用纯软件方式实现。 进入设定状态时候,特定位置循环显示” ”和”_”,循环时间是几百个微秒,这样人眼能看到。...开始时候,光标显示部分函数是这样写: if(A_Step == 1) //页面A第一处光标 { if(cursor_cnt >= 500)

    2K40

    指针液晶屏显示用法(一)

    这天,老板给了一个任务,给他们公司产品增加一个液晶屏LCD1602,显示五个页面,可通过上下按键进行切换。 张三心想,这简单啊。...但是老板是个想法很多的人,时不时会让张三调整显示顺序,或者增加一个页面,又或者减少一个页面。 于是张三经常要调整page值和数组对应关系,增加或减少显示页面的函数。...这时保洁阿姨过来,看了一眼,说: 你定义一个指针数组,把这几个页面数组首地址按顺序存下来,显示页面的时候通过页面数组首地址来显示就行了,显示函数就不用写那么麻烦了。...阿姨:很简单,RAM其实和单元楼很像,变量地址就是门牌号A-1-301,变量名就是这个地址里住的人姓名。通过变量名取值就是通过姓名获取这个人对应年龄,通过地址取值就是通过地址获取这里住的人年龄。...= C[0]; page_p[3] = E[0]; 再 然后是显示函数: void display_page(uint8_t *page_num) {

    2K30

    指针液晶屏显示用法(三)

    不知不觉,成为了研发部最靓仔。前台小妹会多看他一眼,而食堂大妈在给他盛菜时候,手也不抖了。 这天上午,张三debug,保洁阿姨过来打扫卫生了,张三连忙起身打招呼。...张三:额,好。 阿姨:最近忙什么呢? 张三:哦哦,之前设备升级了一下,加了个串口,可以通过电脑直接修改屏幕上参数。但是参数送进来不能直接用,要转换一下。...我现在是用带返回值函数处理,例如: canshu1 = value_process(canshu1_uart); canshu1_uart是串口送进来数据,经过函数处理...阿姨:是啊,之前你都是定义一个指针,然后通过这个指针从固定地址取值。现在你只要反过来,把用来存储变量确定下来,然后把变量地址做为参数送入函数处理,这样多省事。...一周后,张三爬楼时再次偶遇保洁阿姨。 张三:阿姨好!我想向您请教几个问题。 阿姨:说! 张三:指针概念学校里倒是讲过,但是用不多。

    1.4K20

    macmatplotlib显示中文操作方法

    Matplotlib 是一个 Python 2D绘图库,它以各种硬拷贝格式和跨平台交互式环境生成出版质量级别的图形 。...知识点补充: 给大家补充一个matplotlib中文乱码问题 ubuntu16.04使用pythonmatplotlib模块进行科学制图时,输出图例或者标题时候出现中文乱码问题: 解决: 下载字体...font.sans-serif后添加中文字体 Microsoft YaHei, …(其余不变) 删除~/.cache/matplotlib下文件fontList.py3k.cache 重启python即可 注意:我修改完成后还需要在代码里加入...'] = False # 显示负数不乱码 另外:可以执行下这段程序–可以打印出可用字体: #!...', '*' * 10) for f in available: print (f) 总结 到此这篇关于mac如何在matplotlib显示中文文章就介绍到这了,更多相关mac matplotlib

    6K40

    Flutter实现页面切换后保持原页面状态3种方法

    前言: Flutter应用,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState打印日志,会发现每次进入时都会输出,显然这样增加了额外开销,...它拥有一个固定底部导航以及首页顶部导航,可以看到不管是点击底部导航切换页面还是首页左右侧滑切换页面,之前页面状态都是始终维持,下面就具体介绍下如何在flutter实现类似喜马拉雅导航效果...第一步:实现固定底部导航 通过flutter create生成项目模板,我们先简化一下代码,将MyHomePage提取到一个单独home.dart文件,并在Scaffold脚手架添加bottomNavigationBar...底部导航,body展示当前选中子页面。...现在我们先来介绍另外两种方式: ① 使用IndexedStack实现 IndexedStack继承自Stack,它作用是显示第index个child,其它child页面上是不可见,但所有child

    2.8K30

    开启了CloudFlare页面显示当前节点信息

    效果 正如本站底部右下角所显示那样当前CDN节点: San Jose, CA, United States - (SJC),是不是感觉有丶炫酷?...请继续往下看 原理与实现 当一个网站开启了CloudFlareCDN页面时,会出现一个CF(CloudFlare简称,下同)CDN测试页面,就在这里/cdn-cgi/trace,我这里访问得到应答是以下...# CFCDN节点 http=http/2 loc=CN tls=TLSv1.3 sni=plaintext warp=off 所以我们需要取出colo字段,当然这里只是简写。...我们可以 https://www.cloudflarestatus.com/ 获取全部节点信息。我们刚才拿到SJC就是San Jose, CA, United States - (SJC)。...--适当地方放入需要显示CDN节点信息--> getCDNinfo = function() { $.ajax({ url: "/cdn-cgi/trace", success

    5K40
    领券