如何避免IndexedStack子组件重建并留存滚动位置？

首先，咱们来拆解下你遇到的两个核心问题：IndexedStack切换时第4个标签页重建，以及滚动位置丢失。你已经尝试了AutomaticKeepAliveClientMixin但没生效，问题出在几个容易忽略的细节上，咱们一步步来解决：

一、为什么AutomaticKeepAliveClientMixin没生效？ #

你给自定义StatefulWidget A加了Mixin，但没生效的原因主要有两个：

1. FutureBuilder的future参数不稳定 #

你的A组件build方法里，每次都会调用MainMgr.instance.isLoggedIn()，这个方法每次执行都会返回一个新的Future实例。哪怕A的State被IndexedStack保留了，只要build重新执行，FutureBuilder发现future变了，就会重新触发异步请求，进而重建整个子树（UserProfile/LoginSignupPage）。

2. 没有调用super.build(context) #

使用AutomaticKeepAliveClientMixin时，必须在build方法里调用super.build(context)，否则Mixin的保活逻辑不会被触发——这是很多开发者容易漏掉的关键步骤。

二、滚动位置丢失的原因 #

当UserProfile（也就是你说的B组件）被重建时，它内部的NestedScrollView的ScrollController会被重新创建，之前的滚动位置自然就丢失了；另外，如果B组件的State没有被正确保活，也会导致滚动状态重置。

三、具体修复步骤 #

1. 改造A组件，稳定Future并正确使用Mixin #

修改A组件的State部分，把Future缓存到State变量里，并且正确实现Mixin：

class A extends StatefulWidget {
  const A({Key? key}) : super(key: key);

  @override
  State<A> createState() => _AState();
}

class _AState extends State<A> with AutomaticKeepAliveClientMixin {
  late Future<bool> _loginStatusFuture; // 缓存Future，避免每次build重新创建

  @override
  void initState() {
    super.initState();
    _loginStatusFuture = MainMgr.instance.isLoggedIn(); // 仅在初始化时请求一次
  }

  @override
  bool get wantKeepAlive => true; // 开启保活

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，触发Mixin的保活逻辑
    return FutureBuilder<bool>(
      future: _loginStatusFuture, // 使用缓存的稳定Future
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Text(snapshot.error.toString());
          } else {
            if (snapshot.data == true) {
              return Stack(
                children: [
                  UserProfile(
                    MainMgr.instance.selfCOUserID,
                    null,
                    showBackButton: false,
                  ),
                  Positioned(
                    top: 60,
                    child: RaisedButton(
                      child: const Text('Log out'),
                      color: const Color.fromARGB(255, 29, 161, 242),
                      onPressed: () async {
                        await MainMgr.instance.logout();
                        // 登出后更新Future，触发状态刷新
                        setState(() {
                          _loginStatusFuture = MainMgr.instance.isLoggedIn();
                        });
                      },
                    ),
                  ),
                ],
              );
            } else {
              return const LoginSignupPage();
            }
          }
        } else {
          return const Container();
        }
      },
    );
  }
}

2. 修复UserProfile（B组件）的滚动位置 #

给B组件也加上AutomaticKeepAliveClientMixin，同时给NestedScrollView绑定PageStorageKey（推荐）或使用持久化的ScrollController：

方式一：使用PageStorageKey（无需手动管理Controller）

Flutter的PageStorage会自动保存带有唯一Key的滚动组件位置，只需给NestedScrollView加一个唯一标识的Key：

class UserProfile extends StatefulWidget {
  final String userId;
  // 其他参数...
  const UserProfile(this.userId, {Key? key}) : super(key: key);

  @override
  State<UserProfile> createState() => _UserProfileState();
}

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

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: NestedScrollView(
        key: PageStorageKey('user_profile_${widget.userId}'), // 唯一Key，确保滚动位置被持久化
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          // 你的header配置...
          return [/* 你的Sliver组件 */];
        },
        body: // 你的标签视图内容...
      ),
    );
  }
}

方式二：使用持久化的ScrollController

如果需要更精细的滚动控制，可以在State里创建固定的ScrollController（若为全局复用组件，可考虑全局Controller）：

class _UserProfileState extends State<UserProfile> with AutomaticKeepAliveClientMixin {
  final ScrollController _scrollController = ScrollController();

  @override
  bool get wantKeepAlive => true;

  @override
  void dispose() {
    // 若为全局Controller，不要在此处dispose
    // _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        // 其他配置...
      ),
    );
  }
}

四、额外注意点 #

• 确保IndexedStack的子组件是固定创建的，不要在父组件build时重复实例化（比如不要每次都A()，而是提前定义好变量）。
• 如果LoginSignupPage也是StatefulWidget，同样可以添加AutomaticKeepAliveClientMixin避免切换时重建。

这样修改后，切换标签页时A组件的State会被保留，Future不会重复执行，UserProfile的滚动位置也会被正确保存啦！

内容的提问来源于stack exchange，提问作者ArtS