Flutter Text组件对齐问题：实现两行文本始终左对齐

问题根源 #

你的代码里存在几个关键问题导致文本对齐异常：

1. Column默认的crossAxisAlignment是CrossAxisAlignment.center，子组件会居中排列
2. 第一行Text错误设置了textAlign: TextAlign.end，导致长文本右对齐
3. 包裹Column的Align组件是多余的，且没有让Column占据Row的剩余宽度

修改方案 #

只需要调整以下几个地方即可实现两行文本始终左对齐：

• 移除包裹Column的Align组件
• 给Column添加crossAxisAlignment: CrossAxisAlignment.start，强制子组件左对齐
• 修正第一行Text的对齐方式（删除textAlign: TextAlign.end，默认就是左对齐）
• 用Expanded包裹Column，让文本区域占据Row的剩余宽度，避免长文本被挤压

修改后的完整代码 #

return ListView.builder(
  itemCount: Model.length,
  itemBuilder: (context, index) {
    return Container(
      margin: const EdgeInsets.all(8.0),
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0)
        ),
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.circular(15.0),
                child: Image.network(
                  "${Model[index].image!}",
                  fit: BoxFit.fill,
                  height: 100,
                  width: 100
                )
              ),
              // 用Expanded包裹Column，占据Row剩余宽度
              Expanded(
                child: Column(
                  // 设置交叉轴左对齐
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    Text(
                      "hhhhhhhhhhhhhhhh",
                      // 删掉错误的textAlign和多余的textDirection
                    ),
                    Text(
                      "ffff",
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
);

效果说明 #

修改后，无论第一行文本长度如何，两行文本都会从左侧起始位置对齐，长文本会自动向右扩展或换行，完全符合你的需求。

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