Flutter中Radio按钮与文本组件同行显示问题求助

你当前使用RadioListTile组件时，单选按钮和文本无法在同一行对齐显示，出现了错位情况。问题根源在于RadioListTile默认布局结构会将单选按钮和标题区域分开，再加上你给title设置了左内边距，进一步加剧了偏移问题。

解决方案 #

放弃使用RadioListTile，改用Row直接包裹Radio和Text组件，配合InkWell实现点击交互，完全自定义布局：

Column(
  children: [
    InkWell(
      onTap: () {
        setState(() {
          _selectedLanguage = "English";
        });
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
          color: Color(0xff28e8df),
          borderRadius: BorderRadius.circular(5),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Radio(
              value: "English",
              groupValue: _selectedLanguage,
              onChanged: (value) {
                setState(() {
                  _selectedLanguage = value as String;
                });
              },
            ),
            SizedBox(width: 8),
            Text(
              "English",
              style: TextStyle(
                color: Color(0xff000000),
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    ),
    SizedBox(height: 8),
    Container(
      decoration: BoxDecoration(
          color: Color(0xffbebdbd),
          border: Border.all(color: Color(0xffbebdbd)),
          borderRadius: BorderRadius.circular(5)),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Text("العربية",
            style: TextStyle(
                fontSize: 17,
                color: Color(0xff000000),
                fontWeight: FontWeight.bold)),
      ),
    ),
  ],
)

关键修改点 #

• 用Row直接组织Radio和Text，确保二者在同一行对齐
• 用InkWell包裹容器，实现点击整个区域切换单选状态的交互
• 移除原RadioListTile中导致偏移的左内边距
• 保留你原本设置的背景色、圆角等样式
• 添加可选的间距组件，优化视觉体验

注：需在State类中定义_selectedLanguage变量，初始值可设为"english"或空字符串，匹配你的业务逻辑。

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