Flutter - 底部导航栏示例

代码:

//常见属性
//currentIndex: int . 当前索引,用来切换按钮控制. 底部导航条按下按钮切换不同页面,所以需要当前索引来控制当前具体切换的页面.
//fixedColor: Color. 选中按钮的颜色.如果没有指定值,则用系统主题色.
//iconSize: double.  按钮图标大小.
//items: List.  底部导航条按钮集. 每一项是一个BottomNavigationBarItem,有icon图标及title文本属性.
//onTap: ValueChanged . 按下其中某一个按钮回调事件. 需要根据返回的索引设置当前索引. 


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }

}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key }) : super(key:key);
  @override
  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State {
  int _selectedIndex = 1; //当前选中项索引
  final _widgetOptions = [
    Text('Index 0: 信息'),
    Text('Index 1: 通讯录'),
    Text('Index 2: 发现'),
  ];

  @override 
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar 示例 '),
      ),
      body:  Center(
        child: _widgetOptions.elementAt(_selectedIndex),//居中显示某一个文本
        ),
      
      //底部导航按钮,包含图标及文本
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text(' 信息 ')),
          BottomNavigationBarItem(icon: Icon(Icons.contacts), title: Text(' 通讯录 ')),
          BottomNavigationBarItem(icon: Icon(Icons.account_circle), title:  Text(' 发现 ')),
        ],
        currentIndex:  _selectedIndex, //当前选中项的索引
        fixedColor: Colors.deepPurple, //当前选中项的颜色
        onTap: _onItemTapped, //选择按下处理
      ),
    );
  }
  
  //选择按下处理, 设置当前索引为index值
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

image.png