Flutter如何在AppBar中实现多颜色文本？

AppBar的title参数支持传入任意Widget，你可以直接复用RichText或者用Row包裹多个Text组件来实现多颜色标题，两种方案都可行：

方案1：使用RichText作为标题 #

直接将你在body中使用的RichText放到AppBar的title属性里，调整样式适配AppBar尺寸即可：

AppBar(
  title: RichText(
    text: const TextSpan(
      children: <TextSpan>[
        TextSpan(
          text: 'White',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold
          )
        ),
        TextSpan(
          text: 'Red',
          style: TextStyle(
            color: Colors.red,
            fontSize: 20,
            fontWeight: FontWeight.bold
          )
        ),
      ],
    ),
  ),
  backgroundColor: Colors.grey[800], // 深色背景让白色文本更清晰
)

方案2：使用Row包裹多个Text组件 #

如果需要更灵活的布局（比如添加间距、图标等），可以用Row包裹不同样式的Text：

AppBar(
  title: Row(
    mainAxisSize: MainAxisSize.min, // 让Row仅占用内容宽度，避免拉伸
    children: const [
      Text(
        'White',
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
          fontWeight: FontWeight.bold
        )
      ),
      SizedBox(width: 4), // 可选：添加文本间的间距
      Text(
        'Red',
        style: TextStyle(
          color: Colors.red,
          fontSize: 20,
          fontWeight: FontWeight.bold
        )
      ),
    ],
  ),
  backgroundColor: Colors.grey[800],
)

这两种方案都能实现你要的多颜色标题效果，本质是利用AppBar的title支持任意Widget的特性，和你在body中实现的逻辑一致，只是把组件放到了title的位置。

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