BottomNavigationBar:底部导航栏

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 scaffold 里面,还可以添加一个底部的导航栏 .. 先在 scaffold 里面添加一个 bottomNavigrationBar 这个属性 .. 它的值一般是个 BottomNavigationBar ..

在它里面可以添加一组导航项目 .. 放在 items 这个属性里面 ... 它是一个列表 .. 列表里的每个项目都是一个 BottomNavigrationBarItem ..

导航项目里面可以有一个 icon ... 就是小图标 ... 用一下 Icon 小部件 .. 再设置一个要使用的小图标 .. 比如 Icons 里的 explore ..

项目里面还可以有一个标题 .. 添加一个 title ... 它的值是文字 .. 用一个 Text 设置一下要显示的文字 ..

复制一份这个 BottomNavigrationBarItem ... 修改一下小图标 .. 可以使用 history ... 再修改一下导航项目上的文字 ... 保存..

现在,应用界面的底部就会显示一个导航栏 ... 现在上面有两个导航项目 .. 这个项目的背景颜色是应用主题的主要颜色 ..

找到 MaterialApp .. 修改一下 ThemeData 里的这个 PrimarySwatch 的颜色 .. 换成一种紫色 ...

你会发现应用的主题颜色会有变化 .. 底部导航栏项目的背景颜色也会变成紫色的 ...

再把主题颜色换成原来的黄色 ...

然后继续去添加底部导航栏上的项目 .. 图标是 Icons 里的 list ... 文字也换成 List ...

保存 ...

如果你看到屏幕上的这错误,可以去升级一下 Flutter SDK ... 完成以后重新运行一下调试 ..

再复制一份导航项目 .... 要使用的图标是 Icons 里的 person .... 显示的文字是 My ..

现在这个底部导航栏的项目颜色会变成全白色 ... 这是因为如果导航栏上的项目大于等于四个,这个底部导航栏的类型会发生变化 ..

在这个 bottomNavigationBar 里面,添加一个 type 属性,重新设置一下导航栏的类型 .. 设置成默认的 BottomNavigationBarType.fixed ...

在下面我们可以再添加一个 fixedColor ... 设置一下项目在激活状态下的背景颜色 ... 可以把它设置成黑色 ...

BottomNavigationBar:底部导航栏《 Flutter 移动应用:界面结构 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点