Flutter中Text组件在部分浏览器出现文本重叠问题求助

针对你遇到的两个Text组件在Android端Facebook内置浏览器等特定环境中重叠的问题，可以通过以下方式修复：

核心修改方案 #

1. 用固定高度的SizedBox替代部分Spacer，避免弹性布局在特殊WebView环境下的空间分配偏差
2. 给Text组件的样式明确设置行高，统一不同浏览器的文本渲染表现
3. 调整剩余空白区域的分配比例，保证文本有足够的显示空间

修改后的完整代码 #

class SupportProgressScreen extends StatelessWidget {
  const SupportProgressScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    AnalyticsService.logEvent(context,
        eventName: 'SUPPORT_PROGRESS_SCREEN',
        category: TrackingEventCategory.APP);
    return Scaffold(
        appBar: const EddyAppBarWidget(
          isFullScreenAppBar: true,
          preventBackButton: true,
        ),
        backgroundColor: EddyShopConstants.whiteColorEddy,
        body: Padding(
          padding: const EdgeInsets.symmetric(
                  horizontal: EddyShopConstants.columnContentPaddingEddy)
              .add(const EdgeInsets.only(top: 10)),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Spacer(flex: 2),
              Text(
                'PROGRESS_SUPPORT_TITLE'.i18n,
                style: EddyShopConstants.ctaTextStyleEddy.copyWith(height: 1.2),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 24),
              Center(
                child: SvgPicture.asset(
                  EddyShopConstants.WORKING_ON_IT_SVG,
                  height: 200,
                  width: 200,
                ),
              ),
              const SizedBox(height: 24),
              Text(
                'PROGRESS_SUPPORT_DESCRIPTION'.i18n,
                style: EddyShopConstants.primaryTextStyleEddy.copyWith(height: 1.4),
                textAlign: TextAlign.center,
              ),
              const Spacer(flex: 2),
            ],
          ),
        ));
  }
}

方案说明 #

• 固定间距替代Spacer：Spacer依赖父组件的剩余空间计算，部分WebView引擎对剩余空间的解析存在差异，导致文本区域被压缩。SizedBox的固定高度能确保文本之间的间距稳定。
• 明确设置行高：不同浏览器对Flutter默认文本行高的渲染逻辑不一致，手动指定height属性可以统一文本的行间距，避免行内或多行文本重叠。
• 调整Spacer的flex值：通过flex比例分配上下空白区域，避免文本所在区域被过度挤压，保证文本有足够的显示空间。

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