Flutter：是否存在可让Icon/Text继承父TextStyle样式的Widget？

你的记忆有一点偏差：Flutter官方并没有一款单一Widget能直接满足「接收TextStyle参数、子组件列表（支持Text/Icon）、子组件自动继承父样式（包括Icon颜色）」的需求，但可以通过组合官方Widget轻松实现你想要的效果。

你用RichText的写法不符合预期，核心原因是WidgetSpan里的Icon不会继承TextSpan的样式——Icon的颜色由IconTheme或自身color属性控制，和TextStyle没有直接关联。

两种可行的实现方案 #

方案1：自定义封装通用Widget（推荐）

自己封装一个Widget，把样式继承逻辑打包进去，后续复用更方便：

class StyledTextWithIcons extends StatelessWidget {
  final TextStyle style;
  final List<Widget> children;

  const StyledTextWithIcons({
    super.key,
    required this.style,
    required this.children,
  });

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: style,
      child: IconTheme(
        data: IconThemeData(color: style.color),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: children,
        ),
      ),
    );
  }
}

用法示例：

StyledTextWithIcons(
  style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),
  children: [
    Text("Add Object"),
    SizedBox(width: 4), // 可选：给文字和图标加间距
    Icon(Icons.add),
  ],
)

方案2：直接修改RichText代码

如果只需要临时实现，也可以手动给Icon指定颜色，同时调整大小匹配文字：

RichText(
  text: TextSpan(
    style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),
    children: [
      TextSpan(text: "Add Object"),
      WidgetSpan(
        child: Icon(
          Icons.add,
          color: Colors.white, // 手动继承TextStyle的颜色
          size: 16, // 匹配文字大小
        ),
      ),
    ],
  ),
)

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