Flutter中Positioned组件能否以百分比设置Stack的top、bottom等参数？

当然可以实现，Positioned本身虽只接受具体数值参数，但能通过以下几种方式基于Stack的尺寸计算出百分比定位的对应值：

方法一：用LayoutBuilder获取Stack尺寸 #

通过LayoutBuilder拿到父容器（Stack）的约束信息，直接计算出对应百分比的像素值：

Stack(
  children: [
    LayoutBuilder(
      builder: (context, constraints) {
        final stackWidth = constraints.maxWidth;
        final stackHeight = constraints.maxHeight;
        return Positioned(
          top: stackHeight * 0.2, // 距离顶部20%
          left: stackWidth * 0.3, // 距离左侧30%
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        );
      },
    ),
  ],
)

方法二：封装自定义百分比定位组件 #

如果需要频繁使用这类定位，可以封装一个组件简化重复代码：

class PercentPositioned extends StatelessWidget {
  final double? topPercent;
  final double? bottomPercent;
  final double? leftPercent;
  final double? rightPercent;
  final Widget child;

  const PercentPositioned({
    super.key,
    this.topPercent,
    this.bottomPercent,
    this.leftPercent,
    this.rightPercent,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Positioned(
          top: topPercent != null ? constraints.maxHeight * topPercent! : null,
          bottom: bottomPercent != null ? constraints.maxHeight * bottomPercent! : null,
          left: leftPercent != null ? constraints.maxWidth * leftPercent! : null,
          right: rightPercent != null ? constraints.maxWidth * rightPercent! : null,
          child: child,
        );
      },
    );
  }
}

// 使用示例
Stack(
  children: [
    PercentPositioned(
      topPercent: 0.2,
      leftPercent: 0.3,
      child: Container(width: 100, height: 100, color: Colors.blue),
    ),
  ],
)

方法三：用Align组件替代（简单场景） #

如果只是需要基础的百分比定位，Align组件本身支持alignment参数，通过FractionalOffset直接设置百分比，比Positioned更简洁——注意Align是基于子组件中心点定位，而Positioned是基于子组件边缘定位，按需选择即可：

Stack(
  children: [
    Align(
      alignment: const FractionalOffset(0.3, 0.2),
      child: Container(width: 100, height: 100, color: Colors.green),
    ),
  ],
)

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