Flutter Bloc下TextField/TextFormField初始化与状态同步问题

核心问题分析 #

TextFormField的initialValue仅在widget首次构建时生效，后续Bloc状态更新不会触发它重新赋值，这就是数据加载后TextField不刷新的原因。我们需要通过Bloc监听+TextEditingController同步的方式，贴合Bloc单向数据流架构实现需求。

实现步骤与代码示例 #

1. 定义Bloc的事件与状态

// 事件定义
abstract class DataEvent extends Equatable {
  const DataEvent();

  @override
  List<Object?> get props => [];
}

class LoadDataEvent extends DataEvent {}

class UpdateTitleEvent extends DataEvent {
  final String title;

  const UpdateTitleEvent(this.title);

  @override
  List<Object?> get props => [title];
}

class SubmitDataEvent extends DataEvent {}

// 状态定义
class DataState extends Equatable {
  final String? title;
  final bool isLoading;

  const DataState({this.title, this.isLoading = false});

  DataState copyWith({String? title, bool? isLoading}) {
    return DataState(
      title: title ?? this.title,
      isLoading: isLoading ?? this.isLoading,
    );
  }

  @override
  List<Object?> get props => [title, isLoading];
}

2. 实现Bloc业务逻辑

class DataBloc extends Bloc<DataEvent, DataState> {
  DataBloc() : super(const DataState()) {
    // 加载后端数据
    on<LoadDataEvent>((event, emit) async {
      emit(state.copyWith(isLoading: true));
      // 模拟后端API请求
      await Future.delayed(const Duration(seconds: 1));
      emit(state.copyWith(title: "后端返回的标题内容", isLoading: false));
    });

    // 更新输入框内容到状态
    on<UpdateTitleEvent>((event, emit) {
      emit(state.copyWith(title: event.title));
    });

    // 提交数据到后端
    on<SubmitDataEvent>((event, emit) async {
      emit(state.copyWith(isLoading: true));
      // 模拟提交后端更新数据库
      await Future.delayed(const Duration(seconds: 1));
      // 可在这里添加提交成功后的状态处理（如弹窗提示）
      emit(state.copyWith(isLoading: false));
    });
  }
}

3. 无状态Widget的UI实现

class DataFormPage extends StatelessWidget {
  final TextEditingController _titleController = TextEditingController();

  DataFormPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DataBloc, DataState>(
      builder: (context, state) {
        // 同步Bloc状态到输入框控制器，处理初始null场景
        if (_titleController.text != state.title) {
          _titleController.text = state.title ?? "";
        }

        return Scaffold(
          appBar: AppBar(title: const Text("Bloc 表单示例")),
          body: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                if (state.isLoading) const CircularProgressIndicator(),
                TextFormField(
                  controller: _titleController,
                  decoration: const InputDecoration(labelText: "标题"),
                  onChanged: (value) {
                    // 输入变化时触发Bloc事件，更新状态
                    context.read<DataBloc>().add(UpdateTitleEvent(value));
                  },
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: state.isLoading
                      ? null
                      : () {
                          // 提交时从Bloc状态取数据，触发提交事件
                          context.read<DataBloc>().add(SubmitDataEvent());
                        },
                  child: const Text("提交更新"),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

关键注意事项 #

• 放弃initialValue：它无法响应后续状态更新，改用TextEditingController配合Bloc状态同步
• 单向数据流：输入变化时触发Bloc事件更新状态，UI仅监听状态变化更新视图，提交时直接从Bloc状态获取数据
• 初始值处理：当state.title为null时，给控制器设置空字符串，避免输入框异常
• 加载状态管理：通过isLoading状态控制按钮禁用和加载指示器显示，提升用户体验

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