flutter多种底部导航栏样式

1.底部导航栏 （外弧样式）

实现代码：

//引入flutter的dart库
import 'package:flutter/material.dart';
//启动函数
void main() => runApp(MyApp());

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //MaterialApp 是flutter的页面根组件
    return MaterialApp(
      title: 'main根页面',
      //home表示页面信息
      home: BottomNavBar2()
    );
  }
}

//导航栏组件
class BottomNavBar2 extends StatefulWidget {
  @override
  _BottomNavBar2State createState() => _BottomNavBar2State();
}

class _BottomNavBar2State extends State<BottomNavBar2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("漂浮导航栏"),
        centerTitle: true,
      ),
      //浮动按钮
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: Colors.blue,
        child: Icon(Icons.add, color: Colors.white),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),  //圆形的外弧效果
        color: Colors.blue,
        //自定义导航栏
        child: Row(
          //主轴对齐 / 两边对齐
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(icon: Icon(Icons.home, color: Colors.white), onPressed: () {}),
            IconButton(icon: Icon(Icons.home, color: Colors.white), onPressed: () {}),
          ],
        ),
      ),
    );
  }
}

2.底部导航栏（标准样式）

实现代码：

//引入flutter的dart库
import 'package:flutter/material.dart';
//启动函数
void main() => runApp(MyApp());

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //MaterialApp 是flutter的页面根组件
    return MaterialApp(
      title: 'main根页面',
      //home表示页面信息
      home: BottomNavBar()
    );
  }
}

//底部导航栏组件
class BottomNavBar extends StatefulWidget {
  @override
  _BottomNaacBarState createState() => _BottomNaacBarState();
}

class _BottomNaacBarState extends State<BottomNavBar> {
  //点击导航时显示指定内容
  List<Widget> list = [Text('自行车'), Text('汽车'), Text('飞机')];
  //当前点击的导航下标
  int _currentController = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('底部导航栏'),
      ),
      //页面显示的主体内容
      body: list[_currentController],
      bottomNavigationBar: BottomNavigationBar(
          //当前选中的导航栏
          currentIndex: _currentController,
          //点击导航栏触发的事件
          onTap: (int index) {
            setState(() {
              _currentController = index;
            });
          },
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.directions_bike), title: Text('自行车')),
            BottomNavigationBarItem(
                icon: Icon(Icons.directions_car), title: Text('汽车')),
            BottomNavigationBarItem(
                icon: Icon(Icons.airplanemode_active), title: Text('飞机')),
          ]),
    );
  }
}

3.底部导航栏（类似咸鱼样式）

实现代码：

//底部导航栏组件
class BottomNavBar extends StatefulWidget {
  @override
  _BottomNaacBarState createState() => _BottomNaacBarState();
}

class _BottomNaacBarState extends State<BottomNavBar> {
  //点击导航时显示指定内容
  List<Widget> list = [Text('自行车'), Text('汽车'), Text('飞机')];
  //当前点击的导航下标
  int _currentController = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('底部导航栏'),
      ),
      //页面显示的主体内容
      body: list[_currentController],
      //浮动按钮代替中间导航按钮
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Container(
        width: 60,
        height: 60,
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color: Colors.white
        ),
        child: FloatingActionButton(
          child: Icon(Icons.directions_car),
          onPressed: () {
            setState(() {
              _currentController = 1;
            });
          },
        )
      ),
      bottomNavigationBar: BottomNavigationBar(
          //当前选中的导航栏
          currentIndex: _currentController,
          //点击导航栏触发的事件
          onTap: (int index) {
            setState(() {
              _currentController = index;
            });
          },
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.directions_bike), title: Text('自行车')),
            BottomNavigationBarItem(
                icon: Icon(Icons.directions_car), title: Text('汽车')),
            BottomNavigationBarItem(
                icon: Icon(Icons.airplanemode_active), title: Text('飞机')),
          ]),
    );
  }
}