1

我正在尝试创建一个TextFormField带有增量和减量的按钮，并且TextFormField也可以“手动”编辑。但是如果我使用它会有一个小问题BLoC- state“落后”一个，这意味着当我第一次点击“+”时没有任何变化，但是当我第二次点击它时，它的值会变为 21（依此类推。 .)。我只用常规方法尝试了相同的实现，Text它按预期工作并正确更新。

我只是想知道我的设置逻辑TextFormField是否有缺陷：

  • TextEditingController使用默认值金额 (20) 进行实例化；
  • 在“+”点击：
    • 添加PlusEvent以增加当前值
    • 从中获取amount价值state

小部件类：

class MyCalculation extends StatefulWidget {
  const MyCalculation({Key? key}) : super(key: key);

  @override
  State<MyCalculation> createState() => _MyCalculationState();
}

class _MyCalculationState extends State<MyCalculation> {
  late TextEditingController _controller;
  late MyCalcBloc _bloc;

  @override
  void initState() {
    super.initState();
    _bloc = context.read();
    _controller.text = _bloc.state.amount.toString();
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MyCalcBloc, MyCalcState>(builder: (context, state) {
      return MyCustomTextFormField(
          controller: _controller,
          onChanged: (value) {},
          onPlusTap: () {
            _bloc.add(PlusEvent());
            _bloc.text = '${state.amount}';
          },
          onMinusTap: () {});
    });
  }
}

BLoC 类：

class MyCalcBloc extends Bloc<MyCalcEvent, MyCalcState> {
  MyCalcBloc() : super(const MyCalcState(amount: 20)) {
    on<IncrementFromEvent>(_onPlusEvent);
  }

  void _onPlusEvent(PlusEvent event, Emitter<MyCalcState> emit) {
    final newValue = state.amount + 1;
    emit(MyCalcState(amount: newValue));
  }
}
4

1 回答 1

1

TextEditingController您应该在 内实例化BlocProvider，这样您将获得state显示在TextFormField.

@override
  Widget build(BuildContext context) {
    return BlocBuilder<MyCalcBloc, MyCalcState>(builder: (context, state) {
      _controller = TextEditingController(text: state.amount.toString());
      return MyCustomTextFormField(
          controller: _controller,
          onChanged: (value) {},
          onPlusTap: () {
            _bloc.add(PlusEvent());
            _bloc.text = '${state.amount}';
          },
          onMinusTap: () {});
    });
  }
于 2022-02-02T21:17:03.823 回答