Flutter 一行Row中显示RadioListTile-CSDN博客

本文链接：https://blog.csdn.net/jdsjlzx/article/details/125212228

本文介绍了如何在Flutter中将RadioListTile组件排列在一行内，通过使用Flexible widget解决Column直接替换为Row导致的布局问题。示例代码展示了如何创建一行显示两个RadioListTile，并提供了额外的RadioListTile列表生成示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用RadioListTile的时候一般都是竖着显示的，也就是Column里面嵌套RadioListTile，如下代码所示：

Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('RadioGroupValue:$_radioGroupA'),
                SizedBox(height: 32.0),
               RadioListTile(
                 value: 0,
                 groupValue: _radioGroupA,
                 onChanged: _handleRadioValueChanged,
                 title:Text('Option A') ,
                 subtitle: Text('Description'),
                 secondary: Icon(Icons.filter_1),//右侧图标
                 selected: _radioGroupA == 0,
               ),
               RadioListTile(
                 value: 1,
                 groupValue: _radioGroupA,
                 onChanged: _handleRadioValueChanged,
                 title:Text('Option B') ,
                 subtitle: Text('Description'),
                 secondary: Icon(Icons.filter_2),//右侧图标
                 selected: _radioGroupA == 1,
               ),
          ],
        ),

效果图如下：

这是一行显示一个RadioListTile，如果需要一行显示两个或者更多RadioListTile怎么办呢？

把上面代码的Column直接改成Row可以吗？答案是否定的，运行会报错。

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

如下修改就可以解决问题了。

 Widget _radioDemo() {
    return Row(
      children: <Widget>[
        Flexible(
          child: RadioListTile(
            value: 0,
            groupValue: _radioGroupA,
            onChanged: _handleRadioValueChanged,
            title: Text('数据看板'),
            selected: _radioGroupA == 0,
          ),
        ),
        Flexible(
          child: RadioListTile(
            value: 1,
            groupValue: _radioGroupA,
            onChanged: _handleRadioValueChanged,
            title: Text('团队列表'),
            selected: _radioGroupA == 1,
          ),
        ),

      ],
    );
  }

下面再列举个RadioListTile示例：

List checkboxList;
String _radioListTitleValue;

List<Widget> _getRadioListTitle() {
    return checkboxList.map((item) =>
        Flexible(
          child: RadioListTile(
            title: Text(item['text']),
            subtitle: Text(item['text']),
            secondary: Icon(Icons.add),
            isThreeLine: false,
            dense: false,
            selected: false,
            value: item['text'],
            controlAffinity: ListTileControlAffinity.platform,
            groupValue: _radioListTitleValue,
            onChanged: (data){
              setState(() {
                _radioListTitleValue = data;
              });
            },
          ),
        )
    ).toList();
  }
@override
  void initState() {
    super.initState();
    this.checkboxList = [
      {
        'text': 'Java',
        'value': false
      },
      {
        'text': 'Dart',
        'value': true
      }
    ];
    this._radioListTitleValue = checkboxList[0]['text'];
  }
@override
Widget build(BuildContext context){
	return Row(
		children: _getRadioListTitle(),
	);
}

运行后如图所示：

在这里插入图片描述