Flutter开发之BottomNavigationBar底部导航栏

BottomNavigationBar

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

底部导航栏通常与Scaffold结合使用,它作为Scaffold.bottomNavigationBar参数提供。

底部导航栏的类型更改其项目的显示方式。如果未指定,则当少于四个项时它会自动设置为BottomNavigationBarType.fixed,否则为BottomNavigationBarType.shifting

BottomNavigationBarType.fixed,当少于四个项目时的默认值。如果选中的项目为非null,则使用selectedItemColor渲染所选项目,否则使用主题的ThemeData.primaryColor。如果backgroundColornull,则导航栏的背景颜色默认为Material背景颜色ThemeData.canvasColor(基本上是不透明的白色)。

BottomNavigationBarType.shifting,当有四个或更多项时的默认值。如果selectedItemColornull,则所有项目都以白色呈现。导航栏的背景颜色与所选项目的BottomNavigationBarItem.backgroundColor相同。在这种情况下,假设每个项目将具有不同的背景颜色,并且背景颜色将与白色形成鲜明对比。

此示例显示BottomNavigationBar,因为它在Scaffold小部件中使用。 BottomNavigationBar有三个BottomNavigationBarItem小部件,currentIndex设置为索引0.所选项目为琥珀色。 _onItemTapped函数更改所选项的索引,并在Scaffold的中心显示相应的消息:

IMG

源码:

int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
     'Index 1: Business',
     style: optionStyle,
  ),
  Text(
     'Index 2: School',
     style: optionStyle,
  ),
];

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
      child: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('Business'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          title: Text('School'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ),
  );
}

构造方法(Constructors)

创建一个底部导航栏,通常用作Scaffold的Scaffold.bottomNavigationBar参数。

    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 
    })

属性(Properties)

  • backgroundColor → Color

    背景颜色

  • currentIndex → int

    当前活动BottomNavigationBarItem的项目索引(一般就是当前选中的那个项目索引)

  • elevation → double

    此底部导航栏的Z坐标

  • fixedColor → Color

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

  • iconSize → double

    所有BottomNavigationBarItem图标的大小

  • items → List<BottomNavigationBarItem>

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

  • onTap → ValueChanged<int>

    点击其中一个项目时响应事件

  • selectedFontSize → double

    选中时BottomNavigationBarItem标签的字体大小

  • selectedItemColor → Color

    选中时BottomNavigationBarItem.iconBottomNavigationBarItem.label的颜色

  • showSelectedLabels → bool

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

  • showUnselectedLabels → bool

    是否为选定的BottomNavigationBarItem显示标签

  • type → BottomNavigationBarType

    定义BottomNavigationBar的布局和行为

  • unselectedFontSize → double

    未选中BottomNavigationBarItem标签的字体大小

  • unselectedItemColor → Color

    未选中的BottomNavigationBarItem.iconBottomNavigationBarItem.labels的颜色

  • hashCode → int

    对象的哈希值(只读)

  • key → Key

    控制一个小部件如何替换树中的另一个小部件

  • runtimeType → Type

    表示对象的运行时类型(只读)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容