Flutter 切换单选小部件

Question

我正在使用 Radio 小部件来设置用户性别。这些 Radio 按钮小部件设计得非常好，可以相应地处理选择更改，但我没有找到以某种方式取消选择一个已经选择的选项的解决方案。我希望性别广播组是可选的。但是在用户选择女性之后，he/she 可以将选择更改为男性，但不能取消选择 female/male 选项。（这样选项的none就被选中了。）

只有一个onChanged属性，只有性别改变了才会改变。没有 onTap 之类的东西或类似的东西。所以无论我检查性别是否相同，onChanged 都不会被调用。

出于这个原因，我尝试使用 GestureDetector 来解决这个问题（有了这个我应该能够取消选择已经选择的选项）但是在无线电小部件的情况下它不起作用。我也试图改变它的 behavior 属性但它也没有帮助。

这是我用来在 Row.

中创建带有文本的性别单选选项的函数

Widget _buildRadioWithText(final genderChangeNotifier, final Gender genderParam, final String genderText) {
    return Row(
      children: <Widget>[
        GestureDetector(
          behavior: HitTestBehavior.translucent,
          child: Radio<Gender>(
            visualDensity: VisualDensity.compact,
            value: genderParam,
            groupValue: genderChangeNotifier.gender,
            onChanged: (Gender gender) {
              genderChangeNotifier.gender = gender;
              print(gender.toString());
            },
          ),
          onTap: () {
            if (genderChangeNotifier.gender == genderParam) {
              genderChangeNotifier.gender = Gender.NA;
              print("Not answered!");
            }
          },
        ),
        GestureDetector(
          onTap: () {
            if (genderChangeNotifier.gender == genderParam) {
              genderChangeNotifier.gender = Gender.NA;
              print("Not answered!");
            } else {
              genderChangeNotifier.gender = genderParam;
              print(genderParam.toString());
            }
          },
          child: Text(
            genderText,
            style: TextStyle(
              fontSize: _fontSize,
            ),
          ),
        ),
      ],
    );
  }

函数调用：

_buildRadioWithText(genderChangeNotifier, Gender.FEMALE, "Female"),
_buildRadioWithText(genderChangeNotifier, Gender.MALE, "Male"),

genderChangeNotifier 只是一个设置和获取 Gender 值并在设置 Gender 时通知侦听器的提供程序。

final GenderNotifier genderChangeNotifier= Provider.of<GenderNotifier>(context);

当我点击 Text 小部件时，

GestureDetector 的 onTap 运行良好。它选择然后取消选择选项，就像我想的那样，但在 Radio 小部件的情况下 onTap 永远不会被调用。

当我在 Radio 小部件本身上 tap/click 时，知道如何实现取消选择吗？为什么包裹 Radio 的 GestureDetector 没有注册点击事件？

Answer 1

GestureDetector 的 onTap 未被调用，因为 Radio 小部件内的 GestureDetector 具有优先权。默认情况下，当两个 GestureDetectors 竞争输入时，只有一个会“获胜”。在这种情况下，获胜者是收音机中的那个。 This article 讨论“GestureArenas”以及如何允许两个 GestureDetectors 处理输入。

但是，请考虑允许用户取消选择单选按钮是否是正确的解决方案。单选按钮设计为 而不是 在用户选择一个选项后取消选择。你可以改为：

提供第三个“我不想说”的选项
使用可切换按钮而不是单选按钮组
使用下拉菜单而不是单选组

有关此可用性方面的更多信息，请参阅 this answer。

Flutter 切换单选小部件

Flutter toggle Radio widget

toggle

radio-button

flutter