ValueListenableBuilder未按预期工作，StreamBuilder随键盘频繁重建求助

键盘弹出/收起会触发Flutter窗口尺寸变更，导致当前页面的build方法被调用。虽然ValueListenableBuilder理论上只在_value变化时重建内部组件，但父build重建时会重新创建ValueListenableBuilder实例，再加上你在builder中直接调用_getContentWidget()生成新组件，最终导致StreamBuilder被连带重建。

1. 提取StreamBuilder为独立组件 #

将StreamBuilder封装成单独的组件，利用Flutter的组件复用机制，避免父组件重建时连带重建StreamBuilder：

class _ForgotEmailStreamWidget extends StatelessWidget {
  final ForgotEmailViewModel viewModel;
  final Widget contentWidget;

  const _ForgotEmailStreamWidget({
    required this.viewModel,
    required this.contentWidget,
  });

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<FlowState>(
      stream: viewModel.outputState,
      builder: (context, snapshot) {
        print(snapshot.data);
        return snapshot.data?.getScreenWidget(
                context, contentWidget, () {}) ??
            contentWidget;
      },
    );
  }
}

在原组件中调用时，利用ValueListenableBuilder的child参数缓存内容组件，避免重复创建：

@override
Widget build(BuildContext context) {
  print('It is being rebulid');
  print(_value.value);
  final contentWidget = _getContentWidget();
  return Scaffold(
      backgroundColor: ColorManager.white,
      body: ValueListenableBuilder<int>(
        valueListenable: _value,
        builder: (context, value, child) {
          return _ForgotEmailStreamWidget(
            viewModel: _forgotEmailViewModel,
            contentWidget: child!,
          );
        },
        child: contentWidget,
      ));
}

2. 缓存_contentWidget的结果 #

如果_getContentWidget()每次调用都会生成新的Widget实例，会触发子组件重建。可以将其缓存到State变量中，仅在必要时更新：

late Widget _cachedContentWidget;

@override
void initState() {
  super.initState();
  _cachedContentWidget = _getContentWidget();
}

// 当需要更新内容组件时调用此方法
void _updateContentWidget() {
  setState(() {
    _cachedContentWidget = _getContentWidget();
  });
}

之后在build中直接使用_cachedContentWidget即可。

3. 避免父组件不必要的重建 #

如果父组件的重建是键盘触发的MediaQuery变化导致的，可以使用AutomaticKeepAliveClientMixin保持页面状态，减少不必要的重建：

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

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用此方法
    // 原build代码逻辑
  }
}

4. 确保stream是稳定单例 #

检查_forgotEmailViewModel.outputState是否每次调用都生成新的Stream实例，如果是，需要在ViewModel中初始化一次并复用：

class ForgotEmailViewModel {
  final _stateController = BehaviorSubject<FlowState>();
  Stream<FlowState> get outputState => _stateController.stream;

  // 业务逻辑代码...

  void dispose() {
    _stateController.close();
  }
}

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