Переключатель с виджетом без сохранения состояния или с использованием шаблона BLoC во Flutter

Мне нужно создать группу переключателей без использования виджета с отслеживанием состояния. Я хочу, чтобы шаблон BLoC во флаттере создавал группу переключателей. Как его создать?

Я только пытался использовать обычный виджет Радио, используя управление состоянием onChange.

Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
0
0
204
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пожалуйста, попробуйте опубликовать код в будущем, чтобы мы могли помочь вам понять, что не так с самим кодом или подходом. Я не уверен, что это именно то, о чем вы просите, но вы можете создать виджет без сохранения состояния, который будет действовать как группа переключателей, используя библиотеку BLOC.

Допустим, у вас есть 2 варианта (для переключателей):

enum RadioButtonOption {
  FirstOption,
  SecondOption;
}

и, чтобы упростить ситуацию, мы создадим простейший Cubit, чтобы управлять состоянием группы переключателей:

class RadioCubit extends Cubit<RadioButtonOption> {
  RadioCubit(RadioButtonOption initialOption) : super(initialOption);

  void changeOption(RadioButtonOption newOption) {
    emit(newOption);
  }
}

Чтобы заставить его работать в виджете без сохранения состояния, вам нужно создать кубит и всякий раз, когда вызывается функция onChanged, просто передавать результат в кубит. Использование BlocBuilder автоматически обновит пользовательский интерфейс:

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

  void changeOption(RadioButtonOption? newValue, BuildContext context) {
    if (newValue != null) {
      context.read<RadioCubit>().changeOption(newValue);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocProvider(
        create: (_) => RadioCubit(RadioButtonOption.FirstOption),
        child: BlocBuilder<RadioCubit, RadioButtonOption>(
          builder: (context, state) {
            return Column(
              children: [
                Radio(
                  value: RadioButtonOption.FirstOption,
                  groupValue: state,
                  onChanged: (newValue) {
                    changeOption(newValue, context);
                  },
                ),
                Radio(
                  value: RadioButtonOption.SecondOption,
                  groupValue: state,
                  onChanged: (newValue) {
                    changeOption(newValue, context);
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

Я надеюсь, что это помогает.

Большое спасибо, это точный ответ, который я искал в своем приложении. Ценить это.

Neeta 21.11.2022 19:09

Другие вопросы по теме