Flutter：RichText与Text.rich()无法同时适配两项无障碍文本设置

我在开发Flutter应用时遇到一个问题：使用RichText组件显示多样式文本时，能响应设备的大文本无障碍选项，但无法响应加粗文本选项；改用Text.rich()组件后情况相反，能响应加粗文本选项，却适配不了大文本无障碍设置。

原代码示例 #

RichText代码 #

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'This is some bold text',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
        ),
      ),
      TextSpan(
        text: ' and this is normal text.',
        style: TextStyle(fontSize: 16.0),
      ),
    ],
  ),
)

Text.rich()代码 #

Text.rich(
  TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'This is some bold text',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
        ),
      ),
      TextSpan(
        text: ' and this is normal text.',
        style: TextStyle(fontSize: 16.0),
      ),
    ],
  ),
)

核心问题原因 #

• RichText默认不处理系统加粗无障碍设置，因为TextSpan的自定义样式会覆盖继承的系统加粗逻辑。
• Text.rich()虽支持加粗无障碍，但手动指定fontSize会直接覆盖系统大文本的缩放效果，导致无法适配大文本设置。

解决方案 #

要同时适配两项无障碍设置，需满足两个核心要求：不固定字号、动态响应系统加粗状态。

优化后的代码示例 #

Text.rich(
  TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'This is some bold text',
        style: TextStyle(
          // 动态响应系统加粗设置，提升权重模拟系统加粗效果
          fontWeight: MediaQuery.of(context).boldText ? FontWeight.w900 : FontWeight.bold,
          // 不手动指定fontSize，继承DefaultTextStyle的字号，自动适配大文本缩放
        ),
      ),
      TextSpan(
        text: ' and this is normal text.',
        style: TextStyle(
          fontWeight: MediaQuery.of(context).boldText ? FontWeight.w500 : FontWeight.normal,
        ),
      ),
    ],
  ),
)

通用封装（可选） #

如果多处需要用到，可以封装工具方法减少重复代码：

// 封装适配无障碍设置的文本样式方法
TextStyle getAccessibleTextStyle(BuildContext context, {TextStyle? baseStyle}) {
  final isBoldTextEnabled = MediaQuery.of(context).boldText;
  final defaultStyle = DefaultTextStyle.of(context).style;
  
  // 合并基础样式与默认样式，再根据系统加粗状态调整权重
  return defaultStyle.merge(baseStyle).copyWith(
    fontWeight: isBoldTextEnabled
        ? baseStyle?.fontWeight == FontWeight.bold 
            ? FontWeight.w900 
            : FontWeight.w500
        : baseStyle?.fontWeight ?? defaultStyle.fontWeight,
  );
}

// 使用示例
Text.rich(
  TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'This is some bold text',
        style: getAccessibleTextStyle(context, baseStyle: const TextStyle(fontWeight: FontWeight.bold)),
      ),
      TextSpan(
        text: ' and this is normal text.',
        style: getAccessibleTextStyle(context),
      ),
    ],
  ),
)

关键注意事项 #

• 绝对不要手动设置fontSize，必须依赖DefaultTextStyle的样式继承，才能让系统大文本缩放生效。
• 系统加粗无障碍并非直接强制所有文本为粗体，而是提升文本的权重等级，所以需要根据原样式的权重对应调整（比如普通文本从w400升到w500，粗体从w700升到w900）。

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