Flutter中如何在RadioListTile组件旁放置信息按钮？

你无需修改外层Column的结构，直接调整RadioListTile的title参数即可实现需求：title属性本身支持传入任意Widget，你只需要把原本的纯Text组件替换为同时包裹文本和信息按钮的Row组件就行。

实现代码 #

Column(
  // ... 其他原有代码
  RadioListTile(
    title: Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          'Pelagens de camundongos',
          style: TextStyle(fontSize: 17.0, color: Colors.white),
        ),
        // 信息按钮，点击弹出AlertDialog
        IconButton(
          padding: EdgeInsets.zero,
          icon: Icon(Icons.info_outline, color: Colors.white, size: 20),
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('选项说明'),
                content: Text('此处填写该选项对应的说明内容'),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: Text('确定'),
                  )
                ],
              ),
            );
          },
        )
      ],
    ),
    value: 1,
    groupValue: id,
    onChanged: (val) {
      setState(() {
        predominant = 'recessiva_aa';
        id = 1;
      });
    },
  ),
  const SizedBox(height: 5.0),
  RadioListTile(
    title: Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          'Pelagem em cães labradores',
          style: TextStyle(fontSize: 17.0, color: Colors.white),
        ),
        IconButton(
          padding: EdgeInsets.zero,
          icon: Icon(Icons.info_outline, color: Colors.white, size: 20),
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('选项说明'),
                content: Text('此处填写拉布拉多毛色选项对应的说明内容'),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: Text('确定'),
                  )
                ],
              ),
            );
          },
        )
      ],
    ),
    value: 2,
    groupValue: id,
    onChanged: (val) {
      setState(() {
        predominant = 'recessiva_ee';
        id = 2;
      });
    },
  ),
)

可选调整 #

如果觉得文本和按钮的间距不符合预期，可以调整IconButton的padding、size参数，或者在两个组件之间插入SizedBox(width: xx)自定义间距。

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