请求数据保留 - Lab.Lawliet

461 字

2 分钟

请求数据保留

2021-11-25

2026-10-12

Flutter

无标签

前言#

前文中可以发现一个问题，每次切换页面，都会重新请求数据。而实际开发中，我们会对数据进行保留，在需要的时候再进行数据更新。

Mixin#

调整继承关系#

多继承 AutomaticKeepAliveClientMixin

1
class MessagePage extends StatefulWidget {
2
  @override
3
  _MessagePageState createState() => _MessagePageState();
4
}
5

6
class _MessagePageState extends State<MessagePage> with AutomaticKeepAliveClientMixin<MessagePage> {
7
    ...
8
}

重写 wantKeepAlive#

1
class _MessagePageState extends State<MessagePage> with AutomaticKeepAliveClientMixin<MessagePage> {
2
    ...
3

4
    @override
5
    bool get wantKeepAlive => true;
6
}

调整 build 方法#

1
  @override
2
  Widget build(BuildContext context) {
3
    super.build(context);
4
    return Scaffold(...);
5
  }

调整 MyHomePage （标签Tab页）#

原先我们的切换Tab的逻辑是这样的：

1
class _MyHomePageDataSource extends State<MyHomePage> {
2
  int _selectedTab = 0;
3
  final List<Widget> _pages = [
4
      MessagePage(),
5
      ContactsPage(),
6
      MommentPage(),
7
      MinePage()
8
      ];
9

10
  @override
11
  Widget build(BuildContext context) {
12
    return Scaffold(
13
      body: _pages[_selectedTab],
14
      ...
15
    );

并非所有的子页面的 widget 都在标签容器的 widget 树中，导致每次切换都会去重新生成渲染。

我们需要做如下调整：
- 构建 PageController
- 调整 Body 为 PageView，并绑定 PageController 和 pages
- 通过 PageController 切换子页面

1
class _MyHomePageDataSource extends State<MyHomePage> {
2
  int _selectedTab = 0;
3
  final List<Widget> _pages = [
4
    MessagePage(),
5
    ContactsPage(),
6
    MommentPage(),
7
    MinePage()
8
  ];
9
  // 一、 构建 PageController
10
  final PageController _pageController = PageController();
11

12
  @override
13
  Widget build(BuildContext context) {
14
    return Scaffold(
15
        // 二、 调整 Body 为 PageView， 并绑定 PageController 和 pages
16
      body: PageView(
17
        controller: _pageController,
18
        children: _pages,
19
      ),
20
      bottomNavigationBar: BottomNavigationBar(
21
        selectedItemColor: Colors.green,
22
        unselectedItemColor: Colors.grey,
23
        currentIndex: _selectedTab,
24
        onTap: (idx) {
25
          setState(() {
26
            _selectedTab = idx;
27
            // 三、 通过 PageController 切换子页面
28
            _pageController.jumpToPage(_selectedTab);
29
          });
30
        },
31
        items: const [...],
32
      ),
33
    );
34
  }
35
}

检查效果#

PageView#

滑动切换子页面#

在使用总突然发现可以通过滑动切换 PageView 的子页面。但是底部的标签选中没有变化，下面我们来处理一下。

同步标签切换#

通过 onPageChanged 来监听页面的切换，同步修改选中标签。

1
body: PageView(
2
        onPageChanged: (idx) {
3
          setState(() {
4
            _selectedTab = idx;
5
          });
6
        },
7
        controller: _pageController,
8
        children: _pages,
9
      ),

关闭滑动切换#

当然，不需要滑动的话可以通过 physics 来进行关闭。

1
body: PageView(
2
    physics: const NeverScrollableScrollPhysics(),
3
    controller: _pageController,
4
    children: _pages,
5
),

异步编程之Future

悬浮菜单列表

调整 MyHomePage （标签Tab页）