flutter02: 底部导航

1、下面是我创建的一个flutter的项目，目录结构如图

WX20190612-092254.png

2、main.dart是入口文件，里面引入的home.dart就是底部导航，然后把home.dart里面的对象 在入口文件的body里面实例化出来

//main.dart 文件
import 'package:flutter/material.dart';
import './home.dart';
import './firstPage/live.dart';

void main(){
  runApp(
    new MaterialApp(
      title:'flutter App',
      theme: new ThemeData(
        primarySwatch:Colors.blue,
      ),
      routes:<String, WidgetBuilder>{
        "new_page":(context)=>LivePage(),
      } ,
      home:new MyHomePage(),
      
    )
  );
}

//home.dart
import 'package:flutter/material.dart';
//下面的五个引入就是底部导航需要跳转的页面
import './first.dart';
import './second.dart';
import './third.dart';
import './zhuanshi.dart';
import './user.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final items = [
    BottomNavigationBarItem(icon: Icon(IconData(0xe684, fontFamily: 'iconfont',),size: 24.0), title: Text('首页')),
    BottomNavigationBarItem(icon: Icon(IconData(0xe635, fontFamily: 'iconfont'),size: 24.0), title: Text('关注')),
    BottomNavigationBarItem(icon: Icon(IconData(0xe636, fontFamily: 'iconfont'),size: 24.0), title: Text('简书钻')),
    BottomNavigationBarItem(icon: Icon(IconData(0xe616, fontFamily: 'iconfont'),size: 24.0), title: Text('消息')),
    BottomNavigationBarItem(icon: Icon(IconData(0xe60c, fontFamily: 'iconfont'),size: 24.0), title: Text('我的')),
  ];

  final bodyList = [FirstPage(), SecondPage(), ThirdPage(),ZhuanShiPage(),UserPage()];

  int currentIndex = 0;

  void onTap(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('demo'),
        ),
        bottomNavigationBar: BottomNavigationBar( 
          items: items,
          currentIndex: currentIndex, 
          onTap: onTap,
          type: BottomNavigationBarType.fixed,
        ),
        body: IndexedStack(  //保持之前的页面点击的状态
          index: currentIndex,
          children: bodyList,
        )
    );
  }
}

其他的first.dart、second.dart、third.dart、user.dart、zhuangshi.dart都是和second.dart一样的格式，只是里面的类名要变成不一样的，避免冲突

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

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  int count = 0;

  void add() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Text('Second: $count', style: TextStyle(fontSize: 30))
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: add,
          child: Icon(Icons.add),
        )
    );
  }
}

最终效果：

image.png

代码：
(底部常见导航)

import 'package:flutter/material.dart';
import 'package:flutter_demo/tabs/home.dart';
import 'package:flutter_demo/tabs/square.dart';
import 'package:flutter_demo/tabs/quote.dart';
import 'package:flutter_demo/tabs/trade.dart';

class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  int _currentIndex = 0;
  List<Widget> list = [Home(),Square(),Quote(),Trade()];

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       body: list[_currentIndex],
       bottomNavigationBar: BottomNavigationBar(
         items: [
          BottomNavigationBarItem(
            icon:Icon(Icons.home,color:Colors.grey),
            activeIcon: Icon(Icons.home,color:Colors.lightBlue),
            title:Text('小仙',style: TextStyle(color: _currentIndex!=0?Colors.grey:Colors.lightBlue),)
          ),
          BottomNavigationBarItem(
            icon:Icon(Icons.home,color:Colors.grey),
            activeIcon: Icon(Icons.home,color:Colors.lightBlue),
            title:Text('广场',style: TextStyle(color:_currentIndex!=1?Colors.grey:Colors.lightBlue),)
          ),
          BottomNavigationBarItem(
            icon:Icon(Icons.home,color:Colors.grey),
            activeIcon: Icon(Icons.home,color:Colors.lightBlue),
            title:Text('行情',style: TextStyle(color: _currentIndex!=2?Colors.grey:Colors.lightBlue),)
          ),
          BottomNavigationBarItem(
            icon:Icon(Icons.home,color:Colors.grey),
            activeIcon: Icon(Icons.home,color:Colors.lightBlue),
            title:Text('交易',style: TextStyle(color: _currentIndex!=3?Colors.grey:Colors.lightBlue),)
          ),
        ],
         currentIndex:_currentIndex,
         onTap:(int index){
           setState((){
             _currentIndex= index;
           });
         },
         type:BottomNavigationBarType.fixed,//底部导航文字显示在底部
       ),
     );
  }
}

底部自定义导航

import 'package:flutter/material.dart';
import './pages/each_view.dart';


class BottomOptionalWidget extends StatefulWidget{
  _BottomOptionalState createState() => _BottomOptionalState();
}

class _BottomOptionalState extends State<BottomOptionalWidget>{
  List<Widget> _eachView;  //创建视图数组
  int _index = 0;          //数组索引，通过改变索引值改变视图

  @override
  void initState() {  //视图初始化赋值
    super.initState();
    _eachView = List();
    _eachView..add(EachView('Home'))..add(EachView('Me'));
  }


  @override
  Widget build(BuildContext context){
    return Scaffold(
      body:_eachView[_index],
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
            return EachView('New Page');
          }));
        },
        tooltip: 'Increment',
        child: Icon(Icons.add,color:Colors.white),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//中心停靠，与底栏重合
      bottomNavigationBar:BottomAppBar(
        color: Colors.blue,
        shape: CircularNotchedRectangle(),//设置底栏的形状，有缺口的圆形矩形
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              onPressed: (){
                 setState(() {
                    _index=0;             
                  });
              },
            ),
            IconButton(
              icon: Icon(Icons.airport_shuttle),
              color: Colors.white,
              onPressed: (){
                setState(() {
                    _index=1;             
                  });
              },
            ),
          ],
        ),
      ),
    );
    
  }
}