Flutter学习笔记3:BottomNavigationBar

一 简介

BottomNavigationBar是底部导航条，可以在tap之间切换和浏览顶级视图。

二 属性

currentIndex：int类型，用来切换按钮控制
onTap:ValueChanged<int>按下某一个按钮的回调
items:List<BottomNavigationBarItem>类型，底部导航条按钮集

三 代码示例

接下来是一个代码示例，底部显示钱包，应用，我的，按钮由图标加文本形式。

import 'package:flutter/material.dart';

class App extends StatefulWidget {
  @override
  MainState createState() => MainState();
}

class MainState extends State<App> {
  var _currentIndex = 0;

  currentPage() {
    switch (_currentIndex) {
      case 0:
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: new BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          onTap: ((index) {
            setState(() {
              _currentIndex = index;
            });
          }),
          items: [
            new BottomNavigationBarItem(
                title: new Text(
                  '钱包',
                  style: TextStyle(
                      color: _currentIndex == 0
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 0
                    ? Image.asset(
                        'images/weixin_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/weixin_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
            new BottomNavigationBarItem(
                title: new Text(
                  '应用',
                  style: TextStyle(
                      color: _currentIndex == 1
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 1
                    ? Image.asset(
                        'images/find_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/find_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
            new BottomNavigationBarItem(
                title: new Text(
                  '我的',
                  style: TextStyle(
                      color: _currentIndex == 2
                          ? Color(0xFF46c01b)
                          : Color(0xff999999)),
                ),
                icon: _currentIndex == 2
                    ? Image.asset(
                        'images/contact_list_pressed.png',
                        width: 32.0,
                        height: 28.0,
                      )
                    : Image.asset(
                        'images/contact_list_normal.png',
                        width: 32.0,
                        height: 28.0,
                      )),
          ]),
    );
  }
}

效果图：

7981C8E4-A327-431D-BCDF-F23F97D877C3.png