Flutter 实现类似头条顶部滑动导航：TabBar、TabBarView 与 KeepAlive 的深度应用

本文链接：https://blog.youkuaiyun.com/m0_57836225/article/details/146163670

Flutter 实现类似头条顶部滑动导航：TabBar、TabBarView 与 KeepAlive 的深度应用

在 Flutter 开发中，实现类似头条顶部的滑动导航栏是常见需求。通过TabBar和TabBarView的配合，能轻松创建滑动切换的页面效果。而KeepAliveWrapper的使用则能优化页面状态管理，确保切换页面时，之前页面的状态得以保留，提升用户体验。接下来，我们将详细介绍如何实现这一功能，并附上完整代码示例。

一、功能概述

我们要实现的功能是在 Flutter 应用的底部 Tab 页面中，打造一个类似头条顶部的滑动导航栏。用户可以通过点击导航栏的标签或左右滑动屏幕，在不同页面之间切换。同时，使用KeepAliveWrapper确保每个页面的状态（如滚动位置、输入框内容等）在切换后再次返回时能保持不变。

二、实现步骤

（一）创建 Flutter 项目

首先，确保你已安装 Flutter 开发环境。通过命令行工具创建一个新的 Flutter 项目：

flutter create tab_navigation_demo
cd tab_navigation_demo

（二）引入依赖

在pubspec.yaml文件中引入flutter_easyrefresh库，它包含KeepAliveWrapper，用于页面状态保持。添加如下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_easyrefresh: ^3.3.0

添加完成后，在命令行执行flutter pub get获取依赖。

（三）编写代码

打开lib/main.dart文件，替换原有代码为以下内容：

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

// 定义页面1
class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('这是页面1'),
          // 模拟可滚动内容
          ListView.builder(
            itemCount: 20,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('列表项 $index'),
              );
            },
          ),
        ],
      ),
    );
  }
}

// 定义页面2
class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('这是页面2'),
          // 模拟可滚动内容
          ListView.builder(
            itemCount: 20,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('列表项 $index'),
              );
            },
          ),
        ],
      ),
    );
  }
}

// 定义页面3
class Page3 extends StatefulWidget {
  @override
  _Page3State createState() => _Page3State();
}

class _Page3State extends State<Page3> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('这是页面3'),
          // 模拟可滚动内容
          ListView.builder(
            itemCount: 20,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('列表项 $index'),
              );
            },
          ),
        ],
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('头条式滑动导航'),
            bottom: TabBar(
              tabs: [
                Tab(text: '推荐'),
                Tab(text: '热点'),
                Tab(text: '视频'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              KeepAliveWrapper(
                child: Page1(),
              ),
              KeepAliveWrapper(
                child: Page2(),
              ),
              KeepAliveWrapper(
                child: Page3(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在上述代码中：

定义了三个页面Page1、Page2和Page3，每个页面都继承自StatefulWidget，并混入AutomaticKeepAliveClientMixin。在State类中，重写wantKeepAlive属性为true，表示希望保持页面状态。
在MyApp的build方法中，使用DefaultTabController管理TabBar和TabBarView。TabBar包含三个标签：“推荐”、“热点” 和 “视频”。
TabBarView的children中，每个页面都被包裹在KeepAliveWrapper内，这样就能确保在切换页面时，页面状态得以保留。

（四）运行项目

在项目目录下，通过命令行运行以下命令启动应用：

flutter run

此时，你将看到一个类似头条顶部滑动导航的界面。点击不同的标签或左右滑动屏幕，TabBarView中的内容会相应切换。并且，当你滚动某个页面的列表后切换到其他页面，再返回时，列表的滚动位置会保持不变。

三、进一步优化与拓展

（一）自定义 Tab 样式

可以通过TabBar的indicatorColor、labelColor、unselectedLabelColor等属性来自定义Tab的样式。例如：

appBar: AppBar(
  title: Text('头条式滑动导航'),
  bottom: TabBar(
    indicatorColor: Colors.blue,
    labelColor: Colors.blue,
    unselectedLabelColor: Colors.grey,
    tabs: [
      Tab(text: '推荐'),
      Tab(text: '热点'),
      Tab(text: '视频'),
    ],
  ),
),

上述代码将选中的Tab标签颜色和指示器颜色设置为蓝色，未选中的标签颜色设置为灰色。