Flutter中如何在Stack组件内实现响应式Container占比布局？

实现方案 #

完全可以实现你要的按比例分配布局，以下是两种可选实现方式：

方案1：保留原有Stack结构（适配Stack任意尺寸场景）

核心通过LayoutBuilder获取Stack本身的可用尺寸，按比例计算两个Container的高度，不需要写死固定数值，可适配所有屏幕尺寸：

LayoutBuilder(
  builder: (context, constraints) {
    // 获取Stack的总可用高度
    final stackTotalHeight = constraints.maxHeight;
    return Stack(
      children: [
        // 占70%高度的背景图容器
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          height: stackTotalHeight * 0.7,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(backgroudImg),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        // 占30%高度的底部文本容器
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          height: stackTotalHeight * 0.3,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            alignment: Alignment.centerLeft,
            color: const Color(0xFF0E3311).withOpacity(0.5),
            child: Text(
              title,
              overflow: TextOverflow.ellipsis,
              maxLines: 2,
              style: const TextStyle(color: Colors.white, fontSize: 14),
            ),
          ),
        ),
      ],
    );
  }
)

如果文本内容较长，可在Text外层套SingleChildScrollView实现文本滚动，避免小屏幕下内容溢出。

方案2：无需Stack的简化实现（无层级叠加需求时首选）

如果不需要Stack的层叠展示特性，直接用Column结合Expanded的flex属性分配比例，逻辑更简洁：

Column(
  children: [
    // flex为7，占总高度70%
    Expanded(
      flex: 7,
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(backgroudImg),
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
    // flex为3，占总高度30%
    Expanded(
      flex: 3,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12),
        alignment: Alignment.centerLeft,
        color: const Color(0xFF0E3311).withOpacity(0.5),
        child: Text(title),
      ),
    ),
  ],
)

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