在使用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(), ); }
运行后如图所示：
