Flutter中如何向Bloc传递数据？非全局控制器实现方法咨询

1. 定义Bloc的事件与状态 #

先在Bloc层定义对应的事件和状态，用来接收输入文本并更新展示状态：

// 事件类：通知Bloc更新文本
class UpdateTextEvent extends Equatable {
  final String inputText;

  const UpdateTextEvent(this.inputText);

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

// 状态类：存储要展示的文本
class TextDisplayState extends Equatable {
  final String displayText;

  const TextDisplayState(this.displayText);

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

接着实现Bloc的逻辑处理：

class TextBloc extends Bloc<UpdateTextEvent, TextDisplayState> {
  TextBloc() : super(const TextDisplayState('')) {
    on<UpdateTextEvent>((event, emit) {
      // 收到事件后更新状态
      emit(TextDisplayState(event.inputText));
    });
  }
}

2. UI层本地声明控制器，传递输入值到Bloc #

在UI页面里本地声明TextEditingController，通过输入回调把文本值发送给Bloc，无需全局传递控制器：

方式一：用TextField的onChanged直接发送事件

class TextInputPage extends StatelessWidget {
  // 本地声明控制器，仅当前页面可用
  final _textController = TextEditingController();

  TextInputPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocProvider(
        create: (context) => TextBloc(),
        child: Column(
          children: [
            TextField(
              controller: _textController,
              // 输入变化时，把文本值通过事件传给Bloc
              onChanged: (value) {
                context.read<TextBloc>().add(UpdateTextEvent(value));
              },
            ),
            // 监听Bloc状态，展示最新文本
            BlocBuilder<TextBloc, TextDisplayState>(
              builder: (context, state) {
                return Text(state.displayText);
              },
            ),
          ],
        ),
      ),
    );
  }
}

方式二：用控制器的addListener监听（适合复杂场景）

如果需要配合其他操作监听输入，可给控制器添加监听器：

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

  @override
  State<TextInputPage> createState() => _TextInputPageState();
}

class _TextInputPageState extends State<TextInputPage> {
  final _textController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 添加监听器，文本变化时发送事件
    _textController.addListener(() {
      context.read<TextBloc>().add(UpdateTextEvent(_textController.text));
    });
  }

  @override
  void dispose() {
    // 记得销毁控制器，避免内存泄漏
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocProvider(
        create: (context) => TextBloc(),
        child: Column(
          children: [
            TextField(controller: _textController),
            BlocBuilder<TextBloc, TextDisplayState>(
              builder: (context, state) {
                return Text(state.displayText);
              },
            ),
          ],
        ),
      ),
    );
  }
}

3. 关键注意点 #

• 本地控制器必须在页面销毁时调用dispose()，防止内存泄漏
• 只传递输入的文本值给Bloc，而非整个控制器，符合Bloc单向数据流的设计原则，逻辑更清晰解耦

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