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<BottomNavigationWidget> {
  //图标背景色
  final _BottomNavigationColor=Colors.red;
  int _currentIndex = 0;
  List<Widget> 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<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;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

each_view

import 'package:flutter/material.dart';


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

class _EachViewState extends State<EachView> {
  @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;

                });

              },

            ),

          ],

        ),

      ),

    );

  }

}