如何将AppBarComponent的副标题显示在AppBar右侧？

要实现副标题在AppBar右侧的效果，只需调整最外层Row的主轴对齐方式，并将左侧元素打包成一个子Row，具体修改如下：

class AppBarComponent {
  static Widget titleWithImage(String title) {
    return Row(
      // 设置主轴对齐方式为两端对齐
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        // 将左侧的logo和标题打包成一个子Row
        Row(
          children: [
            Image.asset(
              'logo.png',
              fit: BoxFit.contain,
              width: 40,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              // 修正：将写死的'title'替换为传入的参数title
              child: Text(title),
            ),
          ],
        ),
        // 副标题Row会自动靠右显示
        Row(
          children: [
            Text(
              'subtitle',
            ),
          ],
        ),
      ],
    );
  }
}

关键改动说明 #

• 给最外层Row添加mainAxisAlignment: MainAxisAlignment.spaceBetween，让子元素分别向左右两端对齐
• 将logo和标题封装到一个子Row中，作为左侧整体
• 顺带修正了组件复用性问题：原来写死的Text('title')改为使用传入的title参数

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