【flutter 】导航栏

1、底部导航

import 'package:flutter/material.dart';
import 'package:baby_one/View/BottomNavigation/navigation_icon_view.dart';

import 'package:baby_one/View/Home/Home.dart';
import 'package:baby_one/View/Home/Page.dart';

class MyAppNav extends StatefulWidget {
  @override
  _MyAppNavState createState() => _MyAppNavState();
}

class _MyAppNavState extends State<MyAppNav>  with TickerProviderStateMixin{

  int _currentIndex = 0;    // 当前界面的索引值
  List<NavigationIconView> _navigationViews;  // 底部图标按钮区域
  List<StatefulWidget> _pageList;   // 用来存放我们的图标对应的页面
  StatefulWidget _currentPage;  // 当前的显示页面
  // 定义一个空的设置状态值的方法
  void _rebuild() {
    setState((){});
  }
  @override
  void initState() {
    super.initState();

    // 初始化导航图标
    _navigationViews = <NavigationIconView>[
      new NavigationIconView(icon: new Icon(Icons.assessment), title: new Text("首页"), vsync: this), // vsync 默认属性和参数
      new NavigationIconView(icon: new Icon(Icons.all_inclusive), title: new Text("想法"), vsync: this),
      new NavigationIconView(icon: new Icon(Icons.add_shopping_cart), title: new Text("市场"), vsync: this),
      new NavigationIconView(icon: new Icon(Icons.add_alert), title: new Text("通知"), vsync: this),
      new NavigationIconView(icon: new Icon(Icons.perm_identity), title: new Text("我的"), vsync: this),
    ];

    // 给每一个按钮区域加上监听
    for (NavigationIconView view in _navigationViews) {
      view.controller.addListener(_rebuild);
    }

    // 将我们 bottomBar 上面的按钮图标对应的页面存放起来，方便我们在点击的时候
    _pageList = <StatefulWidget>[
      new HomePage(),
      new Page(),
      new HomePage(),
    ];
    _currentPage = _pageList[_currentIndex];
  }


  @override
  Widget build(BuildContext context) {
    // 声明定义一个 底部导航的工具栏
    final BottomNavigationBar bottomNavigationBar = new BottomNavigationBar(
      items: _navigationViews
          .map((NavigationIconView navigationIconView) => navigationIconView.item)
          .toList(),  // 添加 icon 按钮
      currentIndex: _currentIndex,  // 当前点击的索引值
      type: BottomNavigationBarType.fixed,    // 设置底部导航工具栏的类型：fixed 固定
      onTap: (int index){   // 添加点击事件
        setState((){    // 点击之后，需要触发的逻辑事件
          _navigationViews[_currentIndex].controller.reverse();
          _currentIndex = index;
          _navigationViews[_currentIndex].controller.forward();
          _currentPage = _pageList[_currentIndex];
        });
      },
      fixedColor:Color.fromRGBO(36, 141, 248, 1),
    );
    return MaterialApp(
        home: new Scaffold(
          /*body: new Center(
              child: _currentPage   // 动态的展示我们当前的页面
          ),*/
           /*body: new Center(
              child: _currentPage   // 动态的展示我们当前的页面
          ),*/
          //实现页面数据保持
          body: IndexedStack(
            index: _currentIndex,
            children: _pageList,
          ),
          bottomNavigationBar: bottomNavigationBar,   // 底部工具栏
        ),

        theme: new ThemeData(
          primarySwatch: Colors.blue,   // 设置主题颜色
        ),
    );
  }
}

2、底部样式

import 'package:flutter/material.dart';

// 创建一个 Icon 展示控件
class NavigationIconView {

  // 创建两个属性，一个是 用来展示 icon， 一个是动画处理
  final BottomNavigationBarItem item;
  final AnimationController controller;

  // 类似于 java 中的构造方法
  // 创建 NavigationIconView 需要传入三个参数， icon 图标，title 标题， TickerProvider
  NavigationIconView({Widget icon, Widget title, TickerProvider vsync}):
        item = new BottomNavigationBarItem(
          icon: icon,
          title: title,
        ),
        controller = new AnimationController(
            duration: kThemeAnimationDuration,    // 设置动画持续的时间
            vsync: vsync                          // 默认属性和参数
        );
}

3、跳转页面

Navigator.push(
        context,
        MaterialPageRoute(
            builder:(context)=>SecondScreen(name:name)//新页面
        )
    );

4、接收参数

final String name;
  SecondScreen({Key key ,@required this.name}):super(key:key);

5、返回参数

JumpChil(context,String name) async{
    if(name!="aaaa"){
      Fluttertoast.showToast(
          msg: '都说了，不要点我，还点！！！',
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM,
          timeInSecForIos: 2,
          fontSize: 16.0);
    }else{
        a++;//a自增
    }
    b = await Navigator.push(
        context,
        MaterialPageRoute(
            builder:(context)=>SecondScreen(name:name)//新页面
        )
    );
    setState(() {
    });
  }
//带动画效果的获取返回值
Navigator.of(context).push(CustomRoute(SecondScreen(name:name), "SlideTransition")).then( (result){
      b=result;
    });
b = await Navigator.push(
        context,
        MaterialPageRoute(
            builder:(context)=>SecondScreen(name:name)//新页面
        )
    );

5、不规则导航

import 'package:flutter/material.dart';
import 'package:flutter_app_day01/View/Home/Home.dart';

class BottomAppBarDemo extends StatefulWidget {
  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

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

  @override
  void initState() {
    super.initState();
    _eachView = List();
    _eachView..add(HomePage())..add(HomePage());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:_eachView[_index],
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
            return HomePage();
          }));
        },
        tooltip: 'Increment',
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color:Colors.lightBlue,
        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;
                  });
                }
            ),
          ],
        ),
      )
      ,
    );
  }
}

6、上部导航

import 'package:flutter/material.dart';

class TabBarNew extends StatefulWidget {
  @override
  _TabBarNewState createState() => _TabBarNewState();
}

class _TabBarNewState extends State<TabBarNew> with SingleTickerProviderStateMixin{
  TabController _tabController;//控制器
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('顶部tab切换'),
        bottom: new TabBar(
          tabs: <Widget>[
            new Tab(
              icon: new Icon(Icons.directions_bike),
            ),
            new Tab(
              icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
              icon: new Icon(Icons.directions_bus),
            ),
          ],
          controller: _tabController,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Center(child: new Text('自行车')),
          new Center(child: new Text('船')),
          new Center(child: new Text('巴士')),
        ],
      ),
    );
  }
}

/**
    const TabBar({
    Key key,
    @required this.tabs,//显示的标签内容，一般使用Tab对象,也可以是其他的Widget
    this.controller,//TabController对象
    this.isScrollable = false,//是否可滚动
    this.indicatorColor,//指示器颜色
    this.indicatorWeight = 2.0,//指示器高度
    this.indicatorPadding = EdgeInsets.zero,//底部指示器的Padding
    this.indicator,//指示器decoration，例如边框等
    this.indicatorSize,//指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
    this.labelColor,//选中label颜色
    this.labelStyle,//选中label的Style
    this.labelPadding,//每个label的padding值
    this.unselectedLabelColor,//未选中label颜色
    this.unselectedLabelStyle,//未选中label的Style
    }) : assert(tabs != null),
    assert(isScrollable != null),
    assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
    assert(indicator != null || (indicatorPadding != null)),
    super(key: key);
 */

appBar: new AppBar(
        title:Text(
          "监管对象",
          style: TextStyle(fontSize: 30.0),
        ),
        centerTitle: true,
        actions: <Widget>[
          Center(
              child: GestureDetector(
                onTap: () {
                  //跳转检查记录
                  print("检查记录");
                  /*Navigator.of(context)
                      .push(CustomRoute(JdjcRecord(), "RotationTransition"));*/
                },
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0, 0, 20.0, 0),
                  child: Text(
                    "检查记录",
                    style: TextStyle(fontSize: 20.0),
                  ),
                ),
              ))
        ],
        bottom: PreferredSize(
          preferredSize:  Size.fromHeight(48),
          child: Material(
            //color: Colors.red,//设置背景颜色
            child: TabBar(
              indicatorColor: Colors.red,//提示器颜色
              tabs: <Widget>[
                Tab(
                  child: Text("主体信息",style: TextStyle(color: Colors.black),),
                ),
                Tab(
                  child: Text("地块/棚信息",style: TextStyle(color: Colors.black),),
                ),
                Tab(
                  child: Text("种植信息",style: TextStyle(color: Colors.black),),
                ),
              ],
              controller: _tabController,
            ),
          ),
        )

      ),