Flutter 基础总结（7）bottomNavigationB

如果有一天，你偶然看到了这些文字，我希望这几分钟是真正属于你自己的，在这里你给自己加油，打气，继续去完成你曾经的梦想，勇敢的去挑战自己，历练自己!

1： 效果图

image.png image.png

2：代码

1：main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app06/BottomNavigationWidget.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
  title: "Flutter bootomNavigationBar",
  theme: ThemeData.light(),
  home: BottomNavigationWidget(),
);
  }
}

2:BottomNavigationWidget.dart

  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_app06/pages/EmailPages.dart';
  import 'package:flutter_app06/pages/HomePages.dart';
  import 'package:flutter_app06/pages/MePages.dart';
  import 'package:flutter_app06/pages/PagesPages.dart';

  class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
// TODO: implement createState
return new BottomNavigationWidgetState();
  }
  }

  class BottomNavigationWidgetState extends     State<BottomNavigationWidget> {
int _currentIndex = 0;
  final _BottomNavigataionColor = Colors.red;
  //定义一个集合用来存储页面
  List<Widget> list = new List();

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
  //body 相当于一个Widget
  body: list[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    //选择
    selectedItemColor: _BottomNavigataionColor,
    //未选中
    unselectedItemColor: Colors.yellow,
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("主页")),
      BottomNavigationBarItem(
          icon: Icon(Icons.email), title: new Text("邮箱")),
      BottomNavigationBarItem(
          icon: Icon(Icons.pages), title: new Text("页数")),
      BottomNavigationBarItem(
          icon: Icon(Icons.person), title: new Text("我的"))
    ],
    type: BottomNavigationBarType.fixed,
    onTap: (index) {
      setState(() {
        _currentIndex = index;
      });
    },
    currentIndex: _currentIndex,
  ),
);

}

@override
void initState() {
list
  ..add(new HomePages())
  ..add(new EmailPages())
  ..add(new PagesPages())
  ..add(new MePages());
super.initState();
}
}

3:EmailPages.dart（其他页面格式一样）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

 class EmailPages extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
  appBar: AppBar(
    title: new Text("邮箱"),

  ),
  body: Center(
    child: Text("邮箱"),
  ),
);
}


}

githup：https://github.com/xuezhihuixzh/Flutter_demo