Flutter中如何让Stack组件内的文本自动换行？

方案一：给Positioned中的Text添加宽度约束 #

问题根源是Positioned包裹的Text没有宽度限制，导致文本会无限延伸而不换行。你可以给Text套一个SizedBox或Container，手动限制宽度（比如用容器总宽度减去左侧偏移量，确保文本不会超出容器边界）：

@override 
Widget build(BuildContext context) {
return Center(
  child: Stack(
    children: [
      Container(
        width: 150,
        height: 150,
        color: Colors.teal.shade300,
      ),
      Positioned(
        left: 16,
        bottom: 16,
        child: SizedBox(
          width: 150 - 16, // 容器宽度减去左侧偏移量，约束文本宽度
          child: const Text(
            "A very looooooooooooooooong teeeeeeeext",
            maxLines: 2,
            softWrap: true,
            overflow: TextOverflow.ellipsis, // 可选：超出两行时显示省略号
          ),
        ),
      ),
    ],
  ),
);
}

方案二：替换Stack，用更简洁的布局方式 #

如果不需要复杂的层叠逻辑，完全可以抛弃Stack，用更贴合Flutter布局逻辑的方式实现文本居左下的效果，文本会自动适配容器宽度：

方法1：利用Container的alignment和padding

@override 
Widget build(BuildContext context) {
return Center(
  child: Container(
    width: 150,
    height: 150,
    color: Colors.teal.shade300,
    alignment: Alignment.bottomLeft,
    padding: const EdgeInsets.only(left: 16, bottom: 16),
    child: const Text(
      "A very looooooooooooooooong teeeeeeeext",
      maxLines: 2,
      softWrap: true,
      overflow: TextOverflow.ellipsis,
    ),
  ),
);
}

方法2：用Column+MainAxisAlignment.end

@override 
Widget build(BuildContext context) {
return Center(
  child: Container(
    width: 150,
    height: 150,
    color: Colors.teal.shade300,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 16, bottom: 16),
          child: const Text(
            "A very looooooooooooooooong teeeeeeeext",
            maxLines: 2,
            softWrap: true,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    ),
  ),
);
}

两种方案都能实现文本自动换行，无需手动添加\n。更推荐方案二的布局方式，代码更简洁直观。

内容的提问来源于stack exchange，提问作者sm-sayedi