Flutter Stack布局问题：Radio组件在Linear Progress上方不可见

你的问题主要出在Radio状态未初始化、位置设置不合理、Web端样式适配三个方面，以下是具体修复方案：

1. 核心修复代码 #

需要用StatefulWidget维护Radio的选中状态，同时调整布局位置与样式：

class _MyHomePageState extends State<MyHomePage> {
  int _selectedValue = 1; // 初始化选中值，避免groupValue为null

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(10),
        child: Stack(
          children: [
            // 底部进度条，设置最小高度避免过窄
            LinearProgressIndicator(
              value: 0.1,
              semanticsLabel: 'Linear progress indicator',
              backgroundColor: Colors.grey,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
              minHeight: 8,
            ),
            // 左侧Radio
            Positioned(
              left: 0,
              top: -4, // 向上偏移避免和进度条重叠
              child: Radio(
                value: 1,
                groupValue: _selectedValue,
                onChanged: (value) => setState(() => _selectedValue = value!),
                activeColor: Colors.black, // 选中状态颜色
                fillColor: MaterialStateProperty.all(Colors.grey), // 未选中填充色
              ),
            ),
            // 中间Radio（水平居中）
            Positioned(
              left: MediaQuery.of(context).size.width / 2 - 12, // 基于Radio默认大小24做居中调整
              top: -4,
              child: Radio(
                value: 2,
                groupValue: _selectedValue,
                onChanged: (value) => setState(() => _selectedValue = value!),
                activeColor: Colors.black,
                fillColor: MaterialStateProperty.all(Colors.grey),
              ),
            ),
            // 右侧Radio
            Positioned(
              right: 0,
              top: -4,
              child: Radio(
                value: 4,
                groupValue: _selectedValue,
                onChanged: (value) => setState(() => _selectedValue = value!),
                activeColor: Colors.black,
                fillColor: MaterialStateProperty.all(Colors.grey),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. 关键修复说明 #

• 状态初始化：groupValue设为null会导致Web端无法正常渲染Radio，必须用变量维护选中状态。
• 位置调整：通过top: -4让Radio向上偏移，避免和下方进度条重叠；中间Radio用宽度计算实现真正水平居中，替代原有的小比例偏移。
• 样式适配：显式设置Radio的选中/未选中颜色，解决Web端因颜色对比度低导致的不可见问题。
• 进度条高度：给LinearProgressIndicator设置minHeight，确保底部进度条有明显高度，同时不挤压Radio的显示空间。

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