flutter - 如何使单选按钮文本可点击?

标签 flutter dart

我有两个用于注册表单的单选按钮,我希望它们水平相邻,我已经使用 Row 完成了,但是随附的文本不会选择单选按钮,只会选择单选按钮本身就是这样做的……

我知道 RadioListTile 允许单选按钮和标签,但据我所知它只能垂直定位。将 Text 包裹在 InkWell 中可能可行,但我不确定如何保存状态。

Row(
      children: <Widget>[
        Row(
          children: <Widget>[
            Radio(
                value: 0,
                groupValue: _radioGroupValue,
                activeColor: Colors.white,
                onChanged: (int value) {
                  changeRadioSelection(value);
                }),
            Text(
              'Client',
              style: TextStyle(color: Colors.white, fontSize: 15.0),
            )
          ],
        ),
        SizedBox(
          width: 20.0,
        ),
        Row(
          children: <Widget>[
            Radio(
              value: 1,
              groupValue: _radioGroupValue,
              onChanged: (int value) {
                changeRadioSelection(value);
              },
              activeColor: Colors.white,
            ),
            Text(
              'Customer',
              style: TextStyle(color: Colors.white, fontSize: 15.0),
            )
          ],
        )
      ],
    ),

状态控制方法:

void changeRadioSelection(int value) {
setState(() {
  _radioGroupValue = value;
  print('Radio butto selected: $value');
});}

除了文本没有选择单选按钮外,这工作正常。有没有办法做到这一点。如果我的 UI 水平放置而不是垂直放置,它看起来会更干净。

最佳答案

两种解决方案:

  • 要么使用RadioListTile
  • 或将 Row 换行到 inkWell(或任何其他可点击的小部件)
            InkWell(
              onTap: () => changeRadioSelection(1),
              child: Row(
                children: <Widget>[
                  Radio(
                    value: 1,
                    groupValue: _radioGroupValue,
                    onChanged: (int value) {
                      changeRadioSelection(value);
                    },
                    activeColor: Colors.grey,
                  ),
                  Text(
                    'Customer',
                    style: TextStyle(color: Colors.black, fontSize: 15.0),
                  )
                ],
              ),
            )

关于flutter - 如何使单选按钮文本可点击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57360790/

相关文章:

flutter - block 测试错误: No method stub was called from within `when()`

android - Flutter包错误: This app is using a deprecated version of the Android embedding

flutter - 在空上调用了 '[]'方法。接收器: null Tried calling: [](0)

dart - 如何在 Dart 中使对象成为一次性对象?

dart - List.map 是否保证保留原始列表的排序顺序?

Flutter Getx 没有更新 TextFormField 的初始值

android - Flutter SizeTransition 无法正常工作。Size transition 的行为就像我在滑动小部件一样

dart - 在 Flutter 中获取设备的宽度和高度

string - 如何在Dart的字符串中乘以两个变量?

flutter - 获取文本字段中的光标位置