Flutter基础widgets教程-BottomNavigationBar篇

简介: Flutter基础widgets教程-BottomNavigationBar篇

1 BottomNavigationBar

显示在应用程序的底部,用于在少量视图中进行选择,通常在三到五之间。

2 构造函数

BottomNavigationBar({
    Key key, 
    @required List<BottomNavigationBarItem> items, 
    ValueChanged<int> onTap, 
    int currentIndex: 0, 
    double elevation: 8.0, 
    BottomNavigationBarType type, 
    Color fixedColor, 
    Color backgroundColor, 
    double iconSize: 24.0, 
    Color selectedItemColor, 
    Color unselectedItemColor, 
    double selectedFontSize: 14.0, 
    double unselectedFontSize: 12.0, 
    bool showSelectedLabels: true, 
    bool showUnselectedLabels 
})

复制

3 常用属性

3.1 backgroundColor:背景颜色

backgroundColor: Colors.white,

复制

3.2 currentIndex:项目索引

currentIndex:0,

复制

3.3 elevation :底部导航栏的Z坐标

elevation:8.0,

复制

3.4 fixedColor:选中项目颜色的值(只读)

fixedColor:Colors.green,

复制

3.5 iconSize:所有BottomNavigationBarItem图标的大小

iconSize: 24.0,

复制

3.6 items:定义在底部导航栏中排列的按钮项的外观

items: 
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('首页'),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.category),
        title: Text('分类'),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        title: Text('设置'),
    ),
,

复制

3.7 selectedFontSize:选中时BottomNavigationBarItem标签的字体大小

selectedFontSize: 24.0,

复制

3.8 selectedItemColor:选中时BottomNavigationBarItem.icon和BottomNavigationBarItem.label的颜色

selectedItemColor: Colors.green,

复制

3.9 showSelectedLabels:是否为未选择的BottomNavigationBarItems显示标签

showSelectedLabels: true,

复制

3.10 showUnselectedLabels:是否为选定的BottomNavigationBarItem显示标签

showUnselectedLabels: true,

复制

3.11 unselectedFontSize:未选中BottomNavigationBarItem标签的字体大小

unselectedFontSize: 12.0,

复制

3.12 unselectedItemColor:未选中的BottomNavigationBarItem.icon和BottomNavigationBarItem.labels的颜色

unselectedItemColor: Colors.green,
相关文章
|
8天前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
62 0
|
3月前
|
开发者 Windows
Flutter笔记:Widgets Easier组件库(9)使用弹窗
Flutter笔记:Widgets Easier组件库(9)使用弹窗
103 3
|
3月前
|
数据安全/隐私保护 Android开发 开发者
Flutter笔记:Widgets Easier组件库-使用隐私守卫
Flutter笔记:Widgets Easier组件库-使用隐私守卫
50 2
|
3月前
|
UED 开发者
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
59 2
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(5)使用加减器
Flutter笔记:Widgets Easier组件库(5)使用加减器
77 2
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(4)使用按钮组
Flutter笔记:Widgets Easier组件库(4)使用按钮组
33 2
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
41 2
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
44 1
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
109 0
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
73 0