根据Bottom Sheet状态切换内容的重组问题咨询

针对你用if-else结合ScaffoldState判断状态切换内容但触发重组的问题，以下是几种优化方案：

方案1：使用AnimatedSwitcher管理内容切换 #

AnimatedSwitcher不仅能添加过渡动画，还能通过唯一key让Flutter更高效地识别组件，减少不必要的树重建：

AnimatedSwitcher(
  duration: const Duration(milliseconds: 200),
  child: scaffoldState.bottomSheetController.isExpanded
      ? Content2(key: const ValueKey('content-expanded'))
      : Content1(key: const ValueKey('content-collapsed')),
)

给不同状态的内容组件设置唯一ValueKey，Flutter会精准处理组件的创建与销毁，避免无意义的重组。

方案2：用derivedStateOf缓存状态判断结果 #

通过remember配合derivedStateOf缓存Bottom Sheet的状态，只有当状态真正变化时才更新，减少冗余触发：

final isBottomSheetExpanded = remember(scaffoldState.bottomSheetController) {
  return derivedStateOf(() => scaffoldState.bottomSheetController.isExpanded);
};

// 调用时使用缓存后的状态
child: isBottomSheetExpanded.value ? Content2() : Content1(),

derivedStateOf会监听依赖的状态变化，避免每次build都重复读取和判断状态引发的重组。

方案3：封装独立组件并使用const构造 #

将折叠/展开内容封装为独立无状态组件，并用const构造器让Flutter复用组件实例：

class CollapsedContent extends StatelessWidget {
  const CollapsedContent({super.key});

  @override
  Widget build(BuildContext context) {
    // 折叠状态内容布局
    return Container(...);
  }
}

class ExpandedContent extends StatelessWidget {
  const ExpandedContent({super.key});

  @override
  Widget build(BuildContext context) {
    // 展开状态内容布局
    return Container(...);
  }
}

在Bottom Sheet中调用：

child: scaffoldState.bottomSheetController.isExpanded
    ? const ExpandedContent()
    : const CollapsedContent(),

const组件会被Flutter缓存，状态切换时无需重新构建组件实例，大幅减少重组范围。

额外优化提示 #

• 避免在build方法中直接读取scaffoldState.bottomSheetController.isExpanded，优先用缓存后的状态变量；
• 若内容组件包含复杂状态，可使用AutomaticKeepAliveClientMixin保持组件状态，避免切换时重新初始化。

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