Flutter实现同高度堆叠容器：动态文本适配布局问题

你当前用Stack实现的问题在于：左侧绿色容器无法和右侧文本容器建立高度关联，导致无法自动适配动态文本的高度。推荐改用Row结合偏移布局的方式，既能让绿色条自动匹配文本高度，又能实现图中的视觉覆盖效果：

Container(
  margin: const EdgeInsets.symmetric(vertical: 8), // 可选，添加上下间距优化列表项布局
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      // 左侧绿色标识条
      Container(
        width: 15,
        decoration: const BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.all(Radius.circular(5)),
        ),
      ),
      // 右侧文本容器，向左偏移覆盖绿色条一部分
      Container(
        margin: const EdgeInsets.only(left: -5), // 向左偏移5px，实现覆盖效果
        padding: const EdgeInsets.all(12),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(5)),
        ),
        child: const Text(
          'Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content',
          softWrap: true,
        ),
      ),
    ],
  ),
)

核心逻辑说明： #

• Row搭配crossAxisAlignment: CrossAxisAlignment.stretch，强制两个子容器高度一致，绿色条会自动跟随文本容器的高度（由动态文本内容决定）。
• 通过负左外边距让文本容器向左偏移，覆盖绿色条的一部分，还原图中的视觉层次。
• 给Text设置softWrap: true，确保动态文本自动换行，避免内容溢出。

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