Flutter- AutomaticKeepAliveClientMixin 实现Widget保持活跃状态

news2024/10/6 12:20:27

前言

在 Flutter 中，AutomaticKeepAliveClientMixin 是一个 mixin，用于给 State 类添加能力，使得当它的内容滚动出屏幕时仍能保持其状态，这对于 TabBarView 或者滚动列表中使用 PageView 时非常有用，因为这些情况下你通常希望保留用户的滚动位置或者输入状态等。

下面是如何在你的 StatefulWidget 中使用 AutomaticKeepAliveClientMixin 的步骤：
请添加图片描述

1. 添加 mixin 到你的 State 类：

class _MyWidgetState extends State<MyWidget> with AutomaticKeepAliveClientMixin<MyWidget> {
  // ...
}

2. 重写 wantKeepAlive 属性：
你需要重写 wantKeepAlive 并返回 true 来告诉框架这个 Widget 需要保留状态。这通常是根据当前的业务逻辑来决定的。

@override
bool get wantKeepAlive => true; // 总是保持活跃状态

3. 调用 super.build：

@override
Widget build(BuildContext context) {
  super.build(context); // 必须调用 super.build(context)

  return ListView.builder(
    // ...
  );
}

示例：

class KeepAliveDemo extends StatefulWidget {
  @override
  _KeepAliveDemoState createState() => _KeepAliveDemoState();
}

class _KeepAliveDemoState extends State<KeepAliveDemo> with AutomaticKeepAliveClientMixin {
  int counter = 0;

  @override
  bool get wantKeepAlive => true;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: ListView.builder(
        itemExtent: 50.0,
        itemBuilder: (context, index) => Container(
          child: Text('Index $index'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}