Flutter中如何使用Constraints与Fixed Position？求场景实现示例

Expanded是为Row/Column这类Flex布局设计的，用来填充剩余空间，而Positioned作为Stack的子组件，需要明确的尺寸或者基于父容器尺寸计算的值，所以两者不能直接混用。下面是两种可行的实现方式：

方式一：使用LayoutBuilder获取父组件尺寸 #

LayoutBuilder能拿到父容器的约束信息，直接用它计算30%的宽度，是最通用的方案：

Stack(
  children: [
    // 模拟父组件（实际项目中可以是任意父容器）
    Container(
      width: 400,
      height: 400,
      color: Colors.grey.shade200,
    ),
    LayoutBuilder(
      builder: (context, constraints) {
        // 获取父组件的最大宽度
        final parentWidth = constraints.maxWidth;
        return Positioned(
          left: 50,
          top: 50,
          // 设置为父组件宽度的30%
          width: parentWidth * 0.3,
          child: Container(
            height: 60,
            color: Colors.blueAccent,
            child: const Center(
              child: Text('宽度为父组件30%'),
            ),
          ),
        );
      },
    ),
  ],
)

方式二：直接绑定父组件的尺寸（适用于已知父组件尺寸的场景） #

如果父组件的尺寸是固定或者可以通过变量获取的，也可以直接计算：

// 假设父组件宽度是固定值或通过状态管理获取
final parentWidth = 350.0;

Stack(
  children: [
    Container(
      width: parentWidth,
      height: 350,
      color: Colors.grey.shade200,
    ),
    Positioned(
      left: 50,
      top: 50,
      width: parentWidth * 0.3,
      child: Container(
        height: 60,
        color: Colors.greenAccent,
        child: const Center(
          child: Text('固定父宽下的30%'),
        ),
      ),
    ),
  ],
)

两种方案都能实现你要的效果，优先推荐第一种，因为它能自适应父组件的尺寸变化，不用硬写数值。

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