Flutter 组件之BottomNavigationBar自定义底部导航、实现页面切换

import 'package:flutter/material.dart';
import 'pages/HomePage.dart';
import 'pages/Payment.dart';
import 'pages/People.dart';

void main() {
  runApp(LearnFulWidget());
}

class LearnFulWidget extends StatelessWidget {
  const LearnFulWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        home: HomePageSet(),
      ),
    );
  }
}
//使用有状态组件完成动态切换页面
class HomePageSet extends StatefulWidget {
  HomePageSet({Key key}) : super(key: key);

  @override
  _HomePageSetState createState() => _HomePageSetState();
}

class _HomePageSetState extends State<HomePageSet> {
  int curIndex=0;//定义当前索引值
	//定义三个页面组件list
  List PageList =[
    HomePage(),
    Payment(),
    People(),
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
          appBar: AppBar(
            title: Text("StatefulWidget,BottomNavigationBar"),
          ),
          body: this.PageList[this.curIndex],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex:curIndex,
            onTap: (int index){//点击切换回调函数,获取当前参数索引 index
              print(index);
              setState(() {//动态设置索引值
                this.curIndex=index;
              });
            },
            iconSize: 40,//图标大小
            fixedColor: Colors.orange,//选中颜色
            //配置多个底布菜单固定写法 BottomNavigationBarType.shifting
            type: BottomNavigationBarType.fixed,//多个导航
            items: [//底部导航按钮集合
            BottomNavigationBarItem(//导航内容组件
                icon: Icon(
                Icons.home), title: Text("首页")//图标和文字内容
                ),
            BottomNavigationBarItem(
                icon: Icon(
                Icons.payment), title: Text("支付")
                ),
            BottomNavigationBarItem(
                icon: Icon(
                Icons.people), title: Text("朋友")
                ),
          ]),
        ),
    );
  }
}