随笔 - 210  文章 - 0 评论 - 0 阅读 - 61532
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

一旦页面滑出屏幕它就会被销毁 ,实际项目开发中对页面进行缓存是很常见的一个需求,下面我们就看看如何使用AutomaticKeepAliveClientMixin 缓存页面。
注意:使用时一定要注意是否必要,因为对所有列表项都缓存的会导致更多的内存消耗。
复制代码
class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView.builder(
      itemCount: 5,
      scrollDirection: Axis.vertical, // 滑动方向为垂直方向
      itemBuilder: (BuildContext context, int index) {
        return Page(
          index: index,
        );
      },
    ));
  }
}

class Page extends StatefulWidget {
  final int index;
  const Page({super.key, required this.index});

  @override
  State<Page> createState() => _PageState();
}

class _PageState extends State<Page> with AutomaticKeepAliveClientMixin {
  //缓存加with AutomaticKeepAliveClientMixin
  @override
  Widget build(BuildContext context) {
    print("验证是否加缓存");
    return Center(
      child: Text("第${widget.index}"),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true; //返回true就缓存页面
}
复制代码

自定义KeepAliveWrapper 缓存页面

AutomaticKeepAliveClientMixin 可以快速的实现页面缓存功能,但是通过混入的方式实现不是很优雅, 所以我们有必要对AutomaticKeepAliveClientMixin 混入进行封装
复制代码
import 'package:flutter/material.dart';

class KeepAliveWrapper extends StatefulWidget {
  const KeepAliveWrapper({
    Key? key,
    @required this.child,
    this.keepAlive = true,
  }) : super(key: key);

  final Widget? child;
  final bool keepAlive;

  @override
  State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}

class _KeepAliveWrapperState extends State<KeepAliveWrapper>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    // 返回子组件
    return widget.child!;
  }

  @override
  bool get wantKeepAlive => widget.keepAlive;

  @override
  void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
    super.didUpdateWidget(oldWidget);

    // 如果 `keepAlive` 属性发生变化,则更新 `wantKeepAlive` 值
    if (oldWidget.keepAlive != widget.keepAlive) {
      // 通知 Flutter 更新 `wantKeepAlive` 的值
      updateKeepAlive();
    }
  }
}

//这里使用covariant协变关键字,感兴趣可以研究一下dart covariant
复制代码
使用
        return KeepAliveWrapper( //页面比较多会耗内存
          child: Page(
            index: index,
          ),
        );

 

 
 
 
 
posted on   鲤斌  阅读(207)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示