Flutter使用Column组件时如何将指定元素水平对齐并排展示

解决方法 #

你要实现的引用文本+带自定义样式作者名的横向排布效果，有两种常用实现方案：

方案1：用Text.rich（更推荐，适配同段文本多样式需求） #

直接通过富文本实现在同一段文本流里给作者名单独设置样式，不需要额外布局组件，直接修改你的Cardfunction代码即可：

// 先确保你已经定义了Quote类，没有的话先加这段
class Quote {
  final String text;
  final String author;
  Quote({required this.text, required this.author});
}

// 修改后的卡片构建方法
Widget cardFunction(Quote quote) {
  return Card(
    margin: const EdgeInsets.all(10),
    child: Padding(
      padding: const EdgeInsets.all(15),
      child: Text.rich(
        TextSpan(
          children: [
            TextSpan(
              text: quote.text,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
            const TextSpan(text: " - "), // 中间的连接符
            TextSpan(
              text: quote.author,
              style: const TextStyle(
                // 这里可以自由自定义作者名的样式
                color: Colors.purpleAccent,
                fontSize: 18,
                fontWeight: FontWeight.w600,
                fontStyle: FontStyle.italic,
              ),
            )
          ],
        ),
      ),
    ),
  );
}

该方案会自动处理文本换行，当引用内容过长时，作者名会紧跟在最后一行引用文本的末尾，完全符合你示例的效果。

方案2：用Row组件包裹（适合独立元素横向排布） #

如果后续需要给作者名加单独交互（比如点击跳转），可以用Row包裹两个独立Text组件：

Widget cardFunction(Quote quote) {
  return Card(
    margin: const EdgeInsets.all(10),
    child: Padding(
      padding: const EdgeInsets.all(15),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Expanded(
            child: Text(
              quote.text,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
          ),
          const Text(" - "),
          Text(
            quote.author,
            style: const TextStyle(
              color: Colors.purpleAccent,
              fontSize: 18,
              fontWeight: FontWeight.w600,
              fontStyle: FontStyle.italic,
            ),
          ),
        ],
      ),
    ),
  );
}

这里用Expanded包裹引用文本避免内容过长溢出，设置基线对齐保证两段文字底部不会错位，该方案作者名会固定在卡片最右侧。

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