Flutter底部导航路由实现

引言

学习Flutter的基础控件的使用。

• 推荐学习的书籍：《Flutter实战-第二版》
• Flutter官方教程
• 咸鱼技术团队：

1.底部导航实现

要实现这样的效果，我们需要用到以下控件：

• Scaffold

• PageView

• BottomNavigationBar

• BottomNavigationBarItem

• PageController

2. Widget属性说明

1.Scaffold 控件

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer) 以及底部 Tab 导航菜单等，Flutter Material 组件库提供了一些现成的组件来减少我们的开发任务。Scaffold 是一个路由页的骨架，使用它可以很容易地拼装出一个完整的页面。该控件支持设置 appBar，底部导航栏，抽屉按钮，悬浮按钮等样式。

const Scaffold({
    Key? key,
    this.appBar,//顶部AppBar
    this.body,//内容区
    this.floatingActionButton,//一个按钮显示在body上方，位于右下角
    this.floatingActionButtonLocation,//确定floatingActionButton的位置，默认位置FloatingActionButtonLocation.endFloat 
    this.floatingActionButtonAnimator,//移动悬浮按钮的动画器
    this.persistentFooterButtons,//底部导航栏上的一组Widget，可即使body滚动也是可见的
    this.drawer,//body侧面的抽屉栏
    this.onDrawerChanged,//打开或关闭Scaffold.drawer时调用的可选回调
    this.endDrawer,//
    this.onEndDrawerChanged,//打开或关闭Scaffold.endDrawer时调用的可选回调
    this.bottomNavigationBar,//底部导航栏
	....
  })

2.PageView

如果要实现页面切换和 Tab 布局，可以使用 PageView 组件。需要注意，PageView 是一个非常重要的组件，因为在移动端开发中很常用，比如大多数 App 都包含 Tab 换页效果、图片轮动以及抖音上下滑页切换视频功能等等，这些都可以通过 PageView 轻松实现。

PageView({
    Key? key,
    this.scrollDirection = Axis.horizontal,//滑动方向
    this.reverse = false,//页面视图是否在阅读方向滚动
    PageController? controller,//可用于控制此页面视图滚动到的位置的对象
    this.physics,//页面视图应如何响应用户手势
    this.pageSnapping = true,//每次滑动是否强制切换整个页面，如果为false，则会根据实际的滑动距离显示页面
    this.onPageChanged,//每当视口中心的页面发生变化时调用
    List<Widget> children = const <Widget>[],
    this.dragStartBehavior = DragStartBehavior.start,//处理拖动行为
    this.allowImplicitScrolling = false,
    this.restorationId,
    this.clipBehavior = Clip.hardEdge,
    this.scrollBehavior,
    this.padEnds = true,
  })

3.底部导航控制Widget

BottomNavigationBarItem && BottomNavigationBarItem 作为 Scaffold 子 View来做视图的切换等。

bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 12,
        unselectedFontSize: 12,
        selectedLabelStyle: TextStyle(color: _activeColor),
        unselectedLabelStyle: TextStyle(color: _defaultColor),
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          _controller.jumpToPage(index);
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          _bottomItem(Icons.home, '首页'),
          _bottomItem(Icons.search, '搜索'),
          _bottomItem(Icons.camera_alt, '旅拍'),
          _bottomItem(Icons.account_circle, '我的')
        ],
      ),

  //构建底部导航栏 item
  BottomNavigationBarItem _bottomItem(IconData icon, String label) {
    return BottomNavigationBarItem(
        icon: Icon(icon, color: _defaultColor),
        activeIcon: Icon(icon, color: _activeColor),
        label: label);
  }

4.PageController

PageView的控制器。页面控制器可让您操纵在PageView可见的页面。 除了能够控制PageView内部内容的像素偏移之外， PageController还允许您根据页面来控制偏移，这是视口大小的增量

3.完整代码

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_trip2/learn/tab_navigator.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TabNavigator(),
    );
  }
}

tab_navigator.dart

import 'package:flutter/material.dart';
import 'package:flutter_trip2/learn/home_page.dart';
import 'package:flutter_trip2/learn/my_page.dart';
import 'package:flutter_trip2/learn/search_page.dart';
import 'package:flutter_trip2/learn/travel_page.dart';

//底部导航栏
class TabNavigator extends StatefulWidget {
  const TabNavigator({Key? key}) : super(key: key);

  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  final PageController _controller = PageController(initialPage: 0); //定义页面控制器

  final Color _defaultColor = Colors.grey; // 默认颜色

  final Color _activeColor = Colors.blue; // 激活态颜色

  int _currentIndex = 0; // 当前索引
  
  @override
  void initState() {
    print("TabNavigator initState...");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
          physics: NeverScrollableScrollPhysics(),
          controller: _controller,
          children: [HomePage(), SearchPage(), TravelPage(), MyPage()]),
      bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 12,
        unselectedFontSize: 12,
        selectedLabelStyle: TextStyle(color: _activeColor),
        unselectedLabelStyle: TextStyle(color: _defaultColor),
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          _controller.jumpToPage(index);
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          _bottomItem(Icons.home, '首页'),
          _bottomItem(Icons.search, '搜索'),
          _bottomItem(Icons.camera_alt, '旅拍'),
          _bottomItem(Icons.account_circle, '我的')
        ],
      ),
    );
  }

  //构建底部导航栏 item
  BottomNavigationBarItem _bottomItem(IconData icon, String label) {
    return BottomNavigationBarItem(
        icon: Icon(icon, color: _defaultColor),
        activeIcon: Icon(icon, color: _activeColor),
        label: label);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

HomePage，MyPage，SearchPage，TravelPage 代码如下，其他代码一样：

import 'package:flutter/material.dart';

//home 首页
class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    print("HomePage initState...");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("首页")),
      body: Center(child: Text("首页")),
    );
  }
}

4.Page存在重复创建的问题

通过在initState 中打印日志我们可以看到，每次切换该 Page 都会重新创建。

解决办法：

让 Page 继承 AutomaticKeepAliveClientMixin (with) 并复写 wantKeepAlive 方法。

//home 首页
class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    print("HomePage initState...");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("首页")),
      body: Center(child: Text("首页")),
    );
  }
}

重新运行看一下日志，重复点击后我们的 Page 是不会重新创建的，即不会重复执行 initState 方法。