Flutter组件学习九-BottomNavigationBar（底部导航栏）

1、BottomNavigationBar

是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是Scaffold组件的参数

1.1、属性

属性	说明
items	List底部导航条按钮集合
iconSize	图标大小
currentIndex	默认选中第几个
onTap	选中变化回调函数
fixedColor	选中的颜色
type	BottomNavigationBarType.fixed BottomNavigationBarType.shifting

1.2、代码实现

MyBottomNavigationBar

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Home.dart';
import 'package:flutter_app/pages/CategoryPage.dart';
import 'package:flutter_app/pages/SettingPage.dart';

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  // 当前显示页面的index
  int _currentIndex = 0;

  // 页面集合
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 设置title
      appBar: AppBar(title: Text("jeklsjflk")),
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          currentIndex:this._currentIndex,
          onTap: (int index){
            setState(() {
              this._currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
              title: Text('首页'),
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              title: Text('分类'),
              icon: Icon(Icons.category),
            ),
            BottomNavigationBarItem(
              title: Text('设置'),
              icon: Icon(Icons.settings),
            ),
          ]),
    );
  }
}

pages/CategoryPage.dart

import 'package:flutter/material.dart';

class CategoryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("CategoryPage"),
    );
  }
}

pages/Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("CategoryPage"),
    );
  }
}

pages/SettingPage.dart

import 'package:flutter/material.dart';

class SettingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("SettingPage"),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/MyBottomNavigationBar.dart';

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

class MyMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "test",
        home: MyBottomNavigationBar(),
    );
  }
}