如何将文本与RadioListTile的单选按钮起始位置对齐

对齐实现方案 #

方案1：修改RadioListTile默认内边距（改动最小） #

RadioListTile 继承自 ListTile，默认自带 contentPadding: EdgeInsets.symmetric(horizontal: 16) 水平内边距，直接将该属性设置为0，单选按钮就会自动和外层标题文本左对齐，适配所有屏幕尺寸：

RadioListTile<int>(
  contentPadding: EdgeInsets.zero, // 新增这行代码
  title: Text(snapshot.data.answers[i]),
  value: i,
  groupValue: _selectedAnswer,
  onChanged: (int value) {
    setState(() {
      _selectedAnswer = value;
    });
  },
)

方案2：给标题增加匹配的左边距 #

如果需要保留RadioListTile的默认内边距，只需要给上方的标题文本增加和单选按钮左边距相等的padding即可：

Padding(
  padding: const EdgeInsets.only(left: 16),
  child: Text(
    snapshot.data.body,
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
)

这里的16就是ListTile默认的水平左边距，和默认RadioListTile的单选按钮起始位置完全匹配。

方案3：自定义单选组件（可控性最高） #

如果后续还有其他样式调整需求，可以直接组合组件实现单选效果，避免ListTile自带默认样式干扰，天然和标题左对齐：

for (var i = 0; i < snapshot.data.answers.length; ++i)
  GestureDetector(
    onTap: () => setState(() => _selectedAnswer = i),
    child: Row(
      children: [
        Radio<int>(
          value: i,
          groupValue: _selectedAnswer,
          onChanged: (val) {
            if(val != null) setState(() => _selectedAnswer = val);
          },
        ),
        Text(snapshot.data.answers[i]),
      ],
    ),
  )

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