1. TabBar + TabBarView 来实现顶部导航

2. PageView + BottomNavigationBar 底部导航

3.利用 Drawer 实现侧拉菜单

4. PageView
   实现导航需要用到 Scaffold 和 BottomNavigationBar ，PageView 和 PageController。
   相关属性参照:https://blog.csdn.net/u012941592/article/details/118020253

 TabBar({
    Key key,
    @required this.tabs,
    this.controller,  //控制器
    this.isScrollable = false, //是否可以滚动，默认为 false（选项卡过多设置为true）
    this.indicatorColor,//指示器颜色
    this.indicatorWeight = 2.0,//指示器宽度
    this.indicatorPadding = EdgeInsets.zero,//指示器间距 
    this.indicator,//自定义指示器
    this.indicatorSize,//指示器大小
    this.labelColor,//文字颜色
    this.labelStyle,//文字样式
    this.labelPadding,//文字间距
    this.unselectedLabelColor,//未选中 title 颜色
    this.unselectedLabelStyle,//未选中 title 样式
    this.dragStartBehavior = DragStartBehavior.start,//拖拽设置
    this.mouseCursor,//鼠标悬停（网页端）
    this.onTap,//点击事件
    this.physics,//滑动效果，如滑动到末端时，继续拉动，使用 ClampingScrollPhysics 实现Android下//微光效果。使用 BouncingScrollPhysics 实现iOS下弹性效果。
  })

Scaffold widget 是实现了基本的 material design 的布局结构。里面包括了常用的标题 appBar ，内容 body，侧拉 drawer。

1.TabBar + TabBarView 来实现顶部导航
首先实现像 Android 中 ViewPager + Fragment 的效果，效果图如下：

image.png

利用 TabBar + TabBarView 来实现，示例代码：

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tabbed AppBar'),
            bottom: TabBar(
              isScrollable: true,
              tabs: choices.map((Choice choice) {
                return Tab(
                  text: choice.title,
                  icon: Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((Choice choice) {
              return Padding(
                padding: const EdgeInsets.all(16.0),
                child: ChoiceCard(choice: choice),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}
class Choice{
  const Choice({required this.title,required this.icon});
  final String title;
  final IconData icon;
}
const List<Choice> choices = const <Choice>[
  const Choice(title: '1', icon: Icons.animation),
  const Choice(title: '1', icon: Icons.phone),
  const Choice(title: '2', icon: Icons.directions_bike),
  const Choice(title: '3', icon: Icons.directions_boat),
  const Choice(title: '4', icon: Icons.directions_bus),
  const Choice(title: '5', icon: Icons.directions_car),
];
class ChoiceCard extends StatelessWidget{
  const ChoiceCard({Key ? key ,required this.choice}):super(key: key);
  final Choice choice;
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(choice.icon,size:128.0,color: Colors.blue,),
            Text(choice.title)
          ],
        ),
      ),
    );
  }
}

2. PageView + BottomNavigationBar 底部导航
   在 Android 中，实现常用底部导航栏，用 Fragment 即可，来控制显示隐藏。

Flutter 中，要用 PageView + BottomNavigationBar 来实现。

效果图如下：

image.png

void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyApp>
    with SingleTickerProviderStateMixin {
  final _defaultColor = Colors.grey; //未选中
  final _activeColor = Colors.blue; //选中
  int _currentIndex = 0; //默认选中第一个
  var _controller = PageController(
    initialPage: 0,
  );
 
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Scaffold(
      body: PageView(
        controller: _controller,
        children: [
          Center(child: Text("首页")),
          Center(child: Text("搜索")),
          Center(child: Text("发现")),
          Center(child: Text("我的"))
        ],
        physics: NeverScrollableScrollPhysics(),
      ),
      //底部导航菜单
      bottomNavigationBar: BottomNavigationBar(
        //默认显示第几个页面
        currentIndex: _currentIndex,
        onTap: (index) {
          //点击跳转指定页面
          _controller.jumpToPage(index);
          //改变当前页面
          setState(() {
            _currentIndex = index;
          });
        },
        //fixed永远显示底部lab(文字)，shifting只有被选中才会显示底部文字
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              //设置默认图标和颜色
              icon: Icon(
                Icons.home,
                color: _defaultColor,
              ),
              //设置选中图标和颜色
              activeIcon: Icon(
                Icons.home,
                color: _activeColor,
              ),
              title: Text(
                '首页',
                style: TextStyle(
                  color: _defaultColor,
                ),
              )),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.search,
              color: _activeColor,
            ),
            title: Text('搜索',
                style: TextStyle(
                  color: _currentIndex != 1 ? _defaultColor : _activeColor,
                )),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.camera_alt,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.camera_alt,
              color: _activeColor,
            ),
            title: Text('发现',
                style: TextStyle(
                  color: _currentIndex != 2 ? _defaultColor : _activeColor,
                )),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.my_library_add,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.my_library_add,
              color: _activeColor,
            ),
            title: Text('我的',
                style: TextStyle(
                  color: _currentIndex != 3 ? _defaultColor : _activeColor,
                )),
          )
        ],
      ),
    ));
  }
}

3.利用 Drawer 实现侧拉菜单
如 QQ，网易云的侧拉菜单效果。在 Flutter 中，用 Drawer 就可以实现；

效果图：

image.png

void main() {
  runApp(MyApp());
}
 
/**
 * 侧拉菜单
 */
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
            title: Text('标题'),
          ),
          body: Center(
            child: Text('侧拉菜单'),
          ),
          drawer: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                //侧拉菜单头部
                DrawerHeader(
                  child: Text('侧拉菜单头部标题'),
                  decoration: BoxDecoration(color: Colors.blue),
                ),
                ListTile(
                  title: Text('内容1'),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: Text('内容2'),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
          ),
        );
  }
}