flutter-底部导航&不规则导航

主页面入口

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

void main()=>runApp(new MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:"flutter bottomNavigationBar",
      //主题
      theme: ThemeData.light(),
      home: BottomNavigationWidget(),
    );
  }
}

新建BottomNavigationWidget页面

利用快捷键stful新建自定义组件

import 'package:flutter/material.dart';
import 'pages/airplay.dart';
import 'pages/email.dart';
import 'pages/home.dart';
import 'pages/pages.dart';

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

class _BottomNavigationWidgetState extends State {
  //图标背景色
  final _BottomNavigationColor=Colors.red;
  int _currentIndex = 0;
  List list = List();
  //重写初始化状态
  @override
  void initState(){
    // ..add 返回的还是list
    list
      ..add(Home())
      ..add(Email())
      ..add(Pages())
      ..add(AirPlay());
      super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon:Icon(
              Icons.home,
              color: _BottomNavigationColor,
            ),
            title:Text('home',style: TextStyle(color: _BottomNavigationColor),)
          ),
          BottomNavigationBarItem(
            icon:Icon(
              Icons.email,
              color: _BottomNavigationColor,
            ),
            title:Text('Email',style: TextStyle(color: _BottomNavigationColor),)
          ),
          BottomNavigationBarItem(
            icon:Icon(
              Icons.email,
              color: _BottomNavigationColor,
            ),
            title:Text('pages',style: TextStyle(color: _BottomNavigationColor),)
          ),
          BottomNavigationBarItem(
            icon:Icon(
              Icons.airplay,
              color: _BottomNavigationColor,
            ),
            title:Text('AipPlay',style: TextStyle(color: _BottomNavigationColor),)
          ),
        ],
        type: BottomNavigationBarType.fixed,
        //自带高亮效果
        currentIndex: _currentIndex,
        //点击的响应时间 自带参数
        onTap: (int index){
          setState(() {
            _currentIndex=index;
          });
        },
      ),
    );
  }
}

 

不规则导航

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

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

class _BottomAppBarDemoState extends State {

  //定义新的参数
  List _eachView;
  int _index=0;

  @override
  void initState() {
    _eachView= List();
    _eachView
      ..add(EachView('Home'))
      ..add(EachView('AirPlay'));
    super.initState();
  }

  @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: 'JS1',
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      //怎么放置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      // BottomAppBar 
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        //圆形缺口
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index=0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.airplay),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index=1;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

each_view

import 'package:flutter/material.dart';


class EachView extends StatefulWidget {
  String _title;
  EachView(this._title);
  @override
  _EachViewState createState() => _EachViewState();
}

class _EachViewState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text(widget._title)
      ),
      body: Center(
        child: Text(widget._title),
      ),
    );
  }
}

 

 

 

import  'package:flutter/material.dart';

import  'each_view.dart';

class  BottomAppBarDemo  extends  StatefulWidget {

   @override

   _BottomAppBarDemoState  createState()  =>  _BottomAppBarDemoState();

}

class  _BottomAppBarDemoState  extends  State < BottomAppBarDemo > {

   //定义新的参数

   List < Widget > _eachView;

   int _index = 0;

   @override

   void  initState() {

    _eachView =  List();

    _eachView

      .. add( EachView( 'Home'))

      .. add( EachView( 'AirPlay'));

     super. initState();

  }

   @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 :  'JS1',

        child :  Icon(

           Icons.add,

          color :  Colors.white,

        ),

      ),

       //怎么放置

      floatingActionButtonLocation :  FloatingActionButtonLocation.centerDocked,

       // BottomAppBar 

      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.airplay),

              color :  Colors.white,

              onPressed : (){

                 setState(() {

                  _index = 1;

                });

              },

            ),

          ],

        ),

      ),

    );

  }

}