Flutter BottomNavigationBar

Flutter 系列文章 总体目录

BottomNavigationBar 底部导航控件

属性	说明
BottomNavigationBarItem	多个 item，
iconSize	icon大小
currentIndex	默认选中第几个
onTap	选中变化回调
fixedColor	type=BottomNavigationBarType.fixed时选中字体的颜色
type	样式 fixed： shifting:

import 'package:flutter/material.dart';

class BottomNavigationBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _BottomNavigationBar();
}

class _BottomNavigationBar extends State<BottomNavigationBarDemo> {
  int _selectIndex = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text(
              '微信',
            ),
            icon: Icon(
              Icons.access_alarms,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_alarms,
              color: Colors.green,
            ),
          ),
          BottomNavigationBarItem(
            title: Text(
              '通讯录',
            ),
            icon: Icon(
              Icons.access_alarms,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_alarms,
              color: Colors.green,
            ),
          ),
          BottomNavigationBarItem(
            title: Text(
              '发现',
            ),
            icon: Icon(
              Icons.access_alarms,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_alarms,
              color: Colors.green,
            ),
          ),
          BottomNavigationBarItem(
            title: Text(
              '我',
            ),
            icon: Icon(
              Icons.access_alarms,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_alarms,
              color: Colors.green,
            ),
          ),
        ],
        iconSize: 24,
        currentIndex: _selectIndex,
        onTap: (index) {
          setState(() {
            _selectIndex = index;
          });
        },
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

效果：