Flutter如何让Container高度自适应内容？

问题分析 #

制作告警通知组件时，需要容器自动包裹内容，但现有实现存在两个核心问题：

• 父容器设置固定高度80.0，无法适配文本长度变化导致的高度需求
• 左侧侧边栏使用MediaQuery.of(context).size.height获取高度，会超出父容器范围，破坏布局

解决步骤 #

1. 移除固定高度：删除父Container的height: 80.0配置，让容器根据内部内容自动计算高度
2. 侧边栏高度自适应：将左侧侧边Container的height改为double.infinity，同时把外层Row的crossAxisAlignment设为CrossAxisAlignment.stretch，让侧边栏自动填满父容器的高度
3. 优化文本布局：移除文本的overflow: TextOverflow.clip（默认支持自动换行），确保长文本正常显示
4. 简化嵌套结构：去掉不必要的Expanded嵌套，用SizedBox替代容器padding，让布局逻辑更清晰

修改后的完整代码 #

Container(
  width: double.infinity,
  padding: EdgeInsets.zero,
  decoration: BoxDecoration(
    color: Theme.of(context).colorScheme.inversePrimary,
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
    boxShadow: [
      BoxShadow(
        color: Theme.of(context).colorScheme.primary,
        spreadRadius: 0,
        blurRadius: 1,
        offset: const Offset(0, 1)
      ),
    ]
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.stretch, // 关键：让子组件撑满父容器高度
    children: [
      // 左侧侧边栏
      Container(
        width: 8,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            bottomLeft: Radius.circular(10.0)
          ),
          color: buildMaterialColor(const Color(0xFF70AD47)),
        ),
      ),
      Expanded(
        child: Container(
          padding: EdgeInsets.all(8.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children:[
              // 状态图标
              Text(
                String.fromCharCode(CupertinoIcons.check_mark_circled.codePoint),
                style: TextStyle(
                  color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
                  fontSize: 40.0,
                  fontFamily: CupertinoIcons.check_mark_circled.fontFamily,
                  package: CupertinoIcons.check_mark_circled.fontPackage,
                ),
              ),
              SizedBox(width: 10.0), // 图标与文本间距
              // 通知内容区域
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Success",
                      style: TextStyle(
                        color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
                        fontSize: 16.0,
                      ),
                    ),
                    Text(
                      "lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
                      style: TextStyle(
                        color: Theme.of(context).colorScheme.onPrimaryContainer,
                        fontSize: 14.0,
                      ),
                    ),
                  ],
                ),
              ),
            ]
          ),
        ),
      ),
      // 关闭按钮
      IconButton(
        onPressed: (){},
        icon: Icon(
          Icons.close_rounded,
          color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
          size: 16.0,
        ),
      )
    ],
  ),
)

核心优化说明 #

• 外层Row的CrossAxisAlignment.stretch确保左侧侧边栏和内容区域自动匹配父容器高度，无需手动设置高度值
• 文本列使用MainAxisAlignment.center保证内容在垂直方向居中，适配不同长度文本的高度需求
• 简化嵌套结构，减少不必要的Container嵌套，提升代码可读性与布局性能

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