Flutter开发：如何实现根据内部内容自适应调整大小的Container

核心问题与修复方案 #

你当前代码无法自适应高度的核心原因是两个配置错误：

1. 正文文本外层的Container硬编码了固定高度height: height / 6，限制了文本区域的自动撑开
2. 根Container内的Column未设置紧凑适配，默认会尝试撑满父容器高度

具体修改步骤

1. 给根Container的子Column加上mainAxisSize: MainAxisSize.min，让Column高度刚好包裹所有子元素

Container(
  width: width,
  decoration: const BoxDecoration(
    border: Border(
      bottom: BorderSide(width: 0.5, color: Color(0xFFF525151)),
    ),
  ),
  // 给这个Column加mainAxisSize
  child: Column(
    mainAxisSize: MainAxisSize.min, // 新增这行
    children: [
      // 原有子元素不变
    ],
  ),
)

2. 删除正文Text外层Container的固定高度配置

Padding(
  padding: const EdgeInsets.only(top: 0, left: 55.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Container(
        width: width / 1.2,
        // 删掉原来的 height: height / 6 这行
        child: Text(
          textbulle,
          style: TextStyle(
            height: 1.15,
            color: Colors.white,
            fontFamily: 'DBIcons',
            fontSize: 15.5,
          ),
          // 可选：如果需要限制最大行数，可添加下面两个属性，不需要就删除
          // maxLines: 6,
          // overflow: TextOverflow.ellipsis,
        ),
      ),
    ],
  ),
),

3. 如果需要新增图片内容，图片区域不要写死高度，只设置宽度，让图片自适应比例撑开即可，示例：

// 正文文本下面新增图片区域
if (postImageUrl != null)
  Padding(
    padding: const EdgeInsets.only(top: 8, left: 55.0),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: Image.network(
        postImageUrl,
        width: width / 1.2,
        fit: BoxFit.contain,
        // 不设置固定高度，自动根据图片比例计算高度
      ),
    ),
  ),

额外优化建议

顶部用户信息栏的点赞按钮区域你用了固定左侧padding EdgeInsets.fromLTRB(80, 0, 0, 0)，容易在窄屏设备上出现布局溢出，建议换成Spacer()组件自动填充空白，将按钮组推到最右侧，适配所有屏幕宽度。

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