颤振单选按钮不响应点击答案

【问题标题】：Flutter radio buttons do not respond to clicks颤振单选按钮不响应点击
【发布时间】：2021-08-11 10:16:36
【问题描述】：

我的 Flutter 代码在 FormField 中有两个单选按钮。

import 'package:flutter/material.dart';

enum Gender { male, female }

class RadioFormField extends FormField<String> {
  RadioFormField({
    FormFieldSetter<String>? onSaved,
    FormFieldValidator<String>? validator,
    String initialValue = '',
    AutovalidateMode autovalidateMode = AutovalidateMode.always,
  }) : super(
          onSaved: onSaved,
          validator: validator,
          initialValue: initialValue,
          autovalidateMode: autovalidateMode,
          builder: (FormFieldState<String> state) {
            String maleRadioButtonTitle = 'Male';
            String femaleRadioButtonTitle = 'Female';
            String? _genderValue = 'male';

            return Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Expanded(
                  child: RadioListTile<String>(
                    title: Text(maleRadioButtonTitle),
                    value: Gender.male.toString(),
                    groupValue: _genderValue,
                    onChanged: (String? value) {
                      state.didChange(_genderValue = 'male');
                    },
                  ),
                ),
                Expanded(
                  child: RadioListTile<String>(
                    title: Text(femaleRadioButtonTitle),
                    value: Gender.female.toString(),
                    groupValue: _genderValue,
                    onChanged: (String? value) {
                      state.didChange(_genderValue = 'female');
                    },
                  ),
                ),
              ],
            );
          },
        );
}

问题是在它们渲染之后，它们都没有响应选择。我似乎无法理解出了什么问题。我错过了什么？

【问题讨论】：

标签： flutter dart

【解决方案1】：

这里有一些问题需要解决。

首先，

state.didChange 是一个接受单个参数value 的函数，该参数用于使用提供的value 更新表单的state。

所以，就这样称呼吧，

onChanged: (String value) {
  state.didChange(value);
},

接下来，您始终将male 作为groupValue 与此groupValue: _genderValue 一起发送。由于_genderValue 一直被硬编码为male。

所以改成这个，

groupValue: state.value

最后，您的代码将是，

class RadioFormField extends FormField<String> {
  RadioFormField({
    FormFieldSetter<String>? onSaved,
    FormFieldValidator<String>? validator,
    String initialValue = '',
    AutovalidateMode autovalidateMode = AutovalidateMode.always,
  }) : super(
      onSaved: onSaved,
      validator: validator,
      initialValue: initialValue,
      autovalidateMode: autovalidateMode,
      builder: (FormFieldState<String> state) {
        String maleRadioButtonTitle = 'Male';
        String femaleRadioButtonTitle = 'Female';

        return Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Expanded(
              child: RadioListTile<String>(
                title: Text(maleRadioButtonTitle),
                value: Gender.male.toString(),
                groupValue: state.value,
                onChanged: (String? value) {
                  state.didChange(value);
                },
              ),
            ),
            Expanded(
              child: RadioListTile<String>(
                title: Text(femaleRadioButtonTitle),
                value: Gender.female.toString(),
                groupValue: state.value,
                onChanged: (String? value) {
                  state.didChange(value);
                },
              ),
            ),
          ],
        );
      },
    );
}

【讨论】：