Flutter页面出现Right overflowed by pixels问题，求原因及修复方案

• 外层使用的Wrap组件（水平方向）无法正确约束子组件宽度：第一个Container设置了width: double.infinity，直接占满屏幕宽度，后续的RadioButton组件没有足够横向空间，当选项文本较长时就会触发右侧溢出。
• RadioButton组件未做宽度限制与文本换行处理，长文本会直接超出屏幕边界。

推荐将外层的Wrap替换为Column（更符合标题+选项的垂直布局逻辑），同时给RadioButton添加自适应约束，确保文本能自动换行：

return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.grey[900],
    leading: IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () => Navigator.of(context).pop(false),
    ),
  ),
  backgroundColor: Colors.grey[900],
  body: Visibility(
    visible: questionLoaded,
    child: Padding(
      // 添加内边距避免内容贴边
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text(
            question!.question,
            textAlign: TextAlign.center,
            style: GoogleFonts.mukta(
              textStyle: const TextStyle(
                color: Colors.amber,
                fontSize: 24,
                shadows: [
                  Shadow(
                    color: Colors.white,
                    offset: Offset.zero,
                    blurRadius: 15
                  )
                ]
              ),
            ),
          ),
          const SizedBox(height: 16), // 增加标题与选项的间距
          if (question?.answer1 != "")
            RadioButton(
              textStyle: const TextStyle(color: Colors.white),
              description: (question?.answer1)!,
              value: "1",
              groupValue: _decision,
              onChanged: (value) => setState(
                () => _decision = value!,
              ),
            ),
          if (question?.answer2 != "")
            RadioButton(
              textStyle: const TextStyle(color: Colors.white),
              description: (question?.answer2)!,
              value: "2",
              groupValue: _decision,
              onChanged: (value) => setState(
                () => _decision = value!,
              ),
            ),
          if (question?.answer3 != "")
            RadioButton(
              textStyle: const TextStyle(color: Colors.white),
              description: (question?.answer3)!,
              value: "3",
              groupValue: _decision,
              onChanged: (value) => setState(
                () => _decision = value!,
              ),
            ),
          if (question?.answer4 != "")
            RadioButton(
              textStyle: const TextStyle(color: Colors.white),
              description: (question?.answer4)!,
              value: "4",
              groupValue: _decision,
              onChanged: (value) => setState(
                () => _decision = value!,
              ),
            ),
        ],
      ),
    ),
  ),
);

如果你的RadioButton是自定义组件，需要确保内部文本组件支持换行，核心代码示例如下：

class RadioButton extends StatelessWidget {
  final String description;
  final TextStyle textStyle;
  // 其他参数...

  const RadioButton({
    super.key,
    required this.description,
    required this.textStyle,
    // 其他参数初始化...
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Radio(/* 你的Radio配置 */),
        // 用Expanded约束文本宽度，允许自动换行
        Expanded(
          child: Text(
            description,
            softWrap: true,
            style: textStyle,
          ),
        ),
      ],
    );
  }
}

如果一定要使用Wrap，需要修改第一个Container的宽度，避免占满整个屏幕：

Container(
  width: MediaQuery.of(context).size.width - 32, // 减去左右内边距
  child: Text(/* 标题文本配置 */),
)

同时给每个RadioButton添加最大宽度约束，确保不会超出剩余空间。

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