【问题标题】:How to make Radio button text tapable?如何使单选按钮文本可点击?
【发布时间】:2019-08-05 14:35:29
【问题描述】:

我有两个用于注册表单的单选按钮,我希望它们水平相邻,我已经使用 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 水平而不是垂直显示会看起来更干净。

【问题讨论】:

    标签: flutter dart


    【解决方案1】:

    两种解决方案:

    • 要么使用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),
                      )
                    ],
                  ),
                )
    

    【讨论】:

      猜你喜欢
      • 2013-10-25
      • 1970-01-01
      • 2016-12-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-30
      相关资源
      最近更新 更多