flutter 切换块中的按钮

kmbjn2e3  于 2023-01-10  发布在  Flutter
关注(0)|答案(1)|浏览(168)

我正在尝试使用Flutter提供的Bloc模式实现一个ToggleButton,代码非常简单,但是有一个问题,当我尝试更新我的索引,以便它可以从Bloc发出来将我的值从bool更改时,整个事情将毫无作用,我已经尝试重新编写代码来查找问题,但我的猜测是更新不会通过。有人知道如何解决这个问题吗?
这里是我的集团:

import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/cupertino.dart';

part 'calculate_event.dart';
part 'calculate_state.dart';

class CalculateBloc extends Bloc<CalculateEvent, CalculateState> {
  ///Constructor
  CalculateBloc()
      : super(CalculateInitial(
            selection: List.filled(3, false),
            totalAmount: '',
            textEditingController: TextEditingController())) {
    ///On-Method to emit the State
    on<CalculateEvent>((event, emit) {
      ///UpdateSelectionEvent
      if (event is UpdateSelectionEvent) {
        ///emit the Index of the button-press
        final updateSelect = List.of(state.selection);

        for (int i = 0; i < updateSelect.length; i++) {
          updateSelect[i] = event.selectIndex == i;
        }

        emit(UpdateSelectionState(
            selection: updateSelect,
            totalAmount: state.TotalAmount,
            tip: state.tip,
            textEditingController: state.textEditingController));
      }

      ///CalculatePercentageEvent
      if (event is CalculatePercentageEvent) {
        final controller = state.textEditingController;
        final totalAmount = double.parse(controller.text);
        final selectedIndex = state.selection.indexWhere((element) => element);
        final tipPercentage = [0.1, 0.15, 0.2][selectedIndex];
        final tipTotal = (totalAmount * tipPercentage).toStringAsFixed(2);
        emit(CalculatePercentageState(
            selection: state.selection,
            totalAmount: totalAmount.toString(),
            tip: tipTotal,
            textEditingController: state.textEditingController));
      }
    });
  }
}

这是我的国家级:

part of 'calculate_bloc.dart';

@immutable
abstract class CalculateState extends Equatable {
  final List<bool> selection;
  final String? tip;
  final String TotalAmount;
  final TextEditingController textEditingController;

  CalculateState(
      {this.tip = '',
      required this.TotalAmount,
      required this.selection,
      required this.textEditingController});

  @override
  List<Object?> get props => [selection, tip, TotalAmount];
}

class CalculateInitial extends CalculateState {
  CalculateInitial(
      {required List<bool> selection,
      String? tip = '',
      required String totalAmount,
      required TextEditingController textEditingController})
      : super(
            selection: selection,
            TotalAmount: totalAmount,
            textEditingController: textEditingController);
}

class CalculatePercentageState extends CalculateState {
  CalculatePercentageState(
      {required List<bool> selection,
      String? tip = '',
      required String totalAmount,
      required TextEditingController textEditingController})
      : super(
            selection: selection,
            TotalAmount: totalAmount,
            tip: tip,
            textEditingController: textEditingController);
}

class UpdateSelectionState extends CalculateState {
  UpdateSelectionState(
      {required List<bool> selection,
      String? tip = '',
      required String totalAmount,
      required TextEditingController textEditingController})
      : super(
            selection: selection,
            TotalAmount: totalAmount,
            tip: tip,
            textEditingController: textEditingController);
}

下面是我的事件类:

part of 'calculate_bloc.dart';

@immutable
abstract class CalculateEvent {}

class CalculatePercentageEvent extends CalculateEvent {}

class UpdateSelectionEvent extends CalculateEvent {
  final int selectIndex;

  UpdateSelectionEvent(this.selectIndex);
}

我的用户界面:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_day_1/bloc/calculate_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CalculateBloc(),
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              BlocBuilder<CalculateBloc, CalculateState>(
                  bloc: BlocProvider.of<CalculateBloc>(context),
                  builder: (context, state) {
                    if (state.tip != null) {
                      return Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Text(state.tip ?? '',
                                style: const TextStyle(fontSize: 30)),
                          ),
                          const Text('Total Amount'),
                          SizedBox(
                            width: 80,
                            child: TextField(
                              controller: state.textEditingController,
                              keyboardType:
                                  const TextInputType.numberWithOptions(),
                              textAlign: TextAlign.center,
                              decoration:
                                  const InputDecoration(hintText: '\$100.00'),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: ToggleButtons(
                              onPressed: (index) =>
                                  BlocProvider.of<CalculateBloc>(context)
                                      .add(UpdateSelectionEvent(index)),
                              isSelected: state.selection,
                              children: const [
                                Text('10%'),
                                Text('15%'),
                                Text('20%'),
                              ],
                            ),
                          ),
                        ],
                      );
                    } else {
                      return Container(
                        child: const Text('flase'),
                      );
                    }
                  }),
              ElevatedButton(
                onPressed: () {
                  BlocProvider.of<CalculateBloc>(context)
                      .add(CalculatePercentageEvent());
                },
                child: const Text('Calculate Amount'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我试过使用一些BlocListener,但是它不起作用。我的另一个猜测是使用additionl状态来发出它。

33qvvth1

33qvvth11#

我已经发现了问题,在主页上,BlocProvider不断地用CalculateInitialState构建应用,这样新的值就不会被传递了。

相关问题