如何实现底部导航栏

devtools/2024/12/28 14:34:01/

文章目录

  • 1 概念介绍
  • 2 使用方法
  • 3 示例代码

我们在上一章回中介绍了TextField Widget,本章回中将介绍BottomNavigationBar Widget。闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1 概念介绍

我们在本章回中将介绍一个新的Widget:BottomNavigationBar,它就是我们经常在App中看到了底部导航,不过它不能独立使用,因为它是Scaffold Widget的
成员,需要配合bottomNavigationBar属性才能使用。本章回将介绍它的使用方法。

2 使用方法

和其它Widget一样,BottomNavigationBar提供了相关的属性来控制自己,常用的属性如下:

  • items属性用来控制底部显示的标签,它是一个数组,数据中成员的数量就是底部标签的数量,数组类型为BottomNavigationBarItem;
  • iconSize属性用来控制底部标签的大小;
  • backgroundColor属性用来控制整个底部的背景色,默认为白色;
  • fixedColor属性用来控制标签被选中时的颜色,默认是蓝色;
  • currentIndex属性用来控制当前被选中的标签索引,默认值为0,表示第一个标签被选中;
  • onTap属性表示选中标签时触发的事件,它的值是一个函数,从函数的参数中可以得到当前被选中的标签值;
  • type属性用来控制标签的类型,当标签数量超过3个以后需要给它赋值,不然无法显示全部标签;

3 示例代码

return Scaffold(appBar: AppBar(title

http://www.ppmy.cn/devtools/146136.html

相关文章

【ES6复习笔记】模板字符串(3)

介绍 模板字符串是 ES6 引入的一种新的字符串声明方式,它使用反引号()来定义字符串,而不是单引号()或双引号(")。模板字符串可以包含变量、表达式和换行符,这使得它…

mongodb和Cassandra

mongodb的一致性问题: 15.MongoDB的一致性(读关注与写关注)_mongo w选项-CSDN博客 孤儿节点问题: 技术干货 | MongoDB 偶遇孤儿文档及处理方法-腾讯云开发者社区-腾讯云 分片集群MongoDB迁移前清除孤儿文档 由数据迁移至MongoDB导致的数据不一致问题…

ctfshow-web 151-170-文件上传

我们首先想到就是上传一句话木马。但是看源代码限制了png。 (1)改前端代码。 这里是前端限制了上传文件类型,那我们就改一下就好了嘛,改成php。 这里直接修改不行,给大家推荐一篇简短文章,大家就会了(一开始…

前端经典面试合集(二)——Vue/React/Node/工程化工具/计算机网络

1. 说说 Vue 中的 Diff 算法 Vue 的 Diff 算法 主要用于优化虚拟 DOM 和实际 DOM 之间的比较过程。它通过以下几种策略来提高性能: 最小化对 DOM 的操作:Vue 通过在内存中构建一个虚拟 DOM 树,在虚拟 DOM 树与真实 DOM 树之间进行比较和更新…

Linux | 零基础Ubuntu卸载MySQL Server 零痕迹

目录 介绍 移除MySQL软件包 自动移除依赖项 清理残留文件 检查是否还有残留文件 重启系统 介绍 难免会出现一些迷人的操作,让整个数据库都作废了,又改不了文件,修复不了问题,只能重装了,但又卸载不干净&#xf…

mac系统升级后Homebrew:Mac os 使用brew工具时报错No remote ‘origin‘

现象 #brew update Warning: No remote origin in /opt/homebrew/Library/Taps/homebrew/homebrew-cask, skipping update! Warning: No remote origin in /opt/homebrew/Library/Taps/homebrew/homebrew-core, skipping update! Warning: No remote origin in /opt/homebrew/…

windows C#-对象和集合初始值设定项(上)

使用 C# 可以在单条语句中实例化对象或集合并执行成员分配。 对象初始值设定项 使用对象初始值设定项,你可以在创建对象时向对象的任何可访问字段或属性分配值,而无需调用后跟赋值语句行的构造函数。 利用对象初始值设定项语法,你可为构造函…

BUG分析 - 重启有时失败

1. 倒查版本 1.0_11 - ok1.0_12 - fail 2.对比1.0_11和1.0_12 失败时的日志 ================================== 1.0_11 ============================== 2024-12-26 09:46:51.886 INFO [26332] [Thre