Flutter如何避免重复创建Widget树中的MainContent组件

你的问题出在BlocPage的build方法每次执行时，都会重新初始化一系列SharedPreferences相关的Future，并且FutureBuilder的future参数每次都会调用membershipFlow()生成新的Future实例。当Flutter触发两次build时，就会两次执行membershipFlow()，进而两次创建MainContent组件，导致消息重复显示。

以下是具体的修复方案：

方案一：将BlocPage改为StatefulWidget，确保Future只初始化一次 #

把无状态组件改为有状态组件，在initState中完成Future的初始化和页面逻辑的调用，避免每次build重复执行：

class BlocPage extends StatefulWidget {
  const BlocPage({super.key});

  @override
  State<BlocPage> createState() => _BlocPageState();
}

class _BlocPageState extends State<BlocPage> {
  final Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
  late Future<bool> isMember;
  late Future<bool> membershipError;
  late Future<bool> firstOpen;
  late Future<String> memberFirstName;
  late Future<String> token;
  late Future<Widget> _pageFuture;

  @override
  void initState() {
    super.initState();
    // 仅在组件初始化时执行一次Future初始化
    isMember = _prefs.then((prefs) => prefs.getBool('isMember') ?? false);
    membershipError = _prefs.then((prefs) => prefs.getBool('membershipError') ?? false);
    firstOpen = _prefs.then((prefs) => prefs.getBool('firstOpen') ?? false);
    memberFirstName = _prefs.then((prefs) => prefs.getString('memberFirstName') ?? '');
    token = _prefs.then((prefs) => prefs.getString('token') ?? '');
    
    // 保存唯一的页面逻辑Future，避免重复执行
    _pageFuture = membershipFlow();
  }

  Future<Widget> membershipFlow() async {
    final isMemberValue = await isMember;
    final membershipErrorValue = await membershipError;
    final memberFirstNameValue = await memberFirstName;

    if (isMemberValue && !membershipErrorValue) {
      return SplashPage(
        mainContext: context,
        goToPage: MainContent(),
        text: memberFirstNameValue,
        duration: 2,
      );
    } else if (!isMemberValue && !membershipErrorValue) {
      return const MembershipForm();
    } else if (!isMemberValue && membershipErrorValue) {
      return ErrorPage(text: Babel.translate(key: 'E_WRONG_MEMBERSHIP'));
    } else {
      return ErrorPage(text: Babel.translate(key: 'E_UNEXPECTED'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _pageFuture, // 使用初始化时保存的唯一Future实例
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return const CircularProgressIndicator();
          default:
            if (snapshot.hasError) {
              return ErrorPage(text: Babel.translate(key: 'E_UNEXPECTED'));
            }
            return snapshot.data ?? ErrorPage(text: Babel.translate(key: 'E_UNEXPECTED'));
          }
        },
      );
  }
}

关键优化点 #

1. 避免在build中初始化Future：initState仅在组件创建时执行一次，确保SharedPreferences相关的Future不会重复初始化。
2. 复用Future实例：将membershipFlow()的结果保存为成员变量，传递给FutureBuilder，避免每次build触发新的异步逻辑。
3. 移除不安全的context保存：删除了原代码中保存context到成员变量的写法，直接使用State类的context，避免上下文过期或内存泄漏。

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