Flutter中如何实现Radio单选按钮与对应文本水平相邻排列？

问题原因 #

你当前把所有Radio组件和Text组件都直接作为外层Column的子元素，Column默认沿垂直方向排列所有子控件，所以会出现按钮和对应文本纵向排列的问题。

解决方案 #

方案1：用Row包裹每组「单选按钮+文本」

把每一组Radio和对应的Text放在同一个Row组件内，让组内元素沿水平方向排列，再将所有Row放到外层Column中即可，代码示例如下：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    // 第一组单选按钮+文本
    Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Radio(
          value: 1,
          groupValue: id,
          onChanged: (val) {
            setState(() {
              predominant = 'recessiva_aa';
              id = 1;
            });
          },
        ),
        const Text(
          'Epistasia Recessiva (aa)',
          style: TextStyle(fontSize: 17.0),
        ),
      ],
    ),
    // 第二组单选按钮+文本
    Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Radio(
          value: 2,
          groupValue: id,
          onChanged: (val) {
            setState(() {
              predominant = 'recessiva_bb';
              id = 2;
            });
          },
        ),
        const Text(
          'Epistasia Recessiva (bb)',
          style: TextStyle(fontSize: 17.0),
        ),
      ],
    ),
    // 剩余组以此类推
  ],
)

方案2：直接使用RadioListTile组件

Flutter官方已经封装了自带文本的单选框组件RadioListTile，无需自己嵌套Row，使用更简便，还支持整行点击触发选择：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    RadioListTile(
      value: 1,
      groupValue: id,
      title: const Text(
        'Epistasia Recessiva (aa)',
        style: TextStyle(fontSize: 17.0),
      ),
      onChanged: (val) {
        setState(() {
          predominant = 'recessiva_aa';
          id = 1;
        });
      },
    ),
    RadioListTile(
      value: 2,
      groupValue: id,
      title: const Text(
        'Epistasia Recessiva (bb)',
        style: TextStyle(fontSize: 17.0),
      ),
      onChanged: (val) {
        setState(() {
          predominant = 'recessiva_bb';
          id = 2;
        });
      },
    ),
    // 剩余选项以此类推
  ],
)

如果需要调整单选框和文本的间距、对齐方式，可以通过RadioListTile的contentPadding、controlAffinity等参数配置。

内容的提问来源于stack exchange，提问作者bilbo_bo