如何使单选按钮文本变为可点击状态？

Question

我有两个单选按钮，用于注册表单，我想水平对齐彼此，这是我使用Row完成的，但是随附的文本没有选择单选按钮，只有选择单选按钮才能做到这一点...

我知道RadioListTile允许单选按钮和标签，但据我所知只能垂直放置。 在InkWell中包装Text可能可行，但是我不确定如何保存状态。

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，将其水平放置而不是垂直放置看起来会更干净。

Answer 1

两种解决方案：

• 要么使用RadioListTile
• 或将行包装成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),
                  )
                ],
              ),
            )