如何根据设备方向为Positioned组件的top属性设置不同值

在Flutter中，你可以通过两种常用方式实现根据屏幕方向修改Positioned组件的top属性：

方法一：使用OrientationBuilder组件 #

OrientationBuilder会自动监听屏幕方向变化，并在方向改变时重建子组件，非常适合这种动态布局场景：

OrientationBuilder(
  builder: (context, orientation) {
    // 竖屏时top设为20，横屏时设为50，可根据需求修改数值
    final double topValue = orientation == Orientation.portrait ? 20.0 : 50.0;
    return Stack(
      children: [
        Positioned(
          top: topValue,
          left: 20,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ],
    );
  },
)

方法二：通过MediaQuery获取当前方向 #

如果你的组件本身就在build方法中，可以直接通过MediaQuery获取当前屏幕方向，无需额外包裹组件：

@override
Widget build(BuildContext context) {
  final orientation = MediaQuery.of(context).orientation;
  final double topValue = orientation == Orientation.portrait ? 20.0 : 50.0;
  
  return Stack(
    children: [
      Positioned(
        top: topValue,
        left: 20,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    ],
  );
}

注意事项 #

• 不要用const修饰需要动态变化的Positioned或父组件，否则方向变化时组件不会重建更新。
• 可以根据实际需求调整不同方向下的top数值，甚至结合屏幕尺寸计算更灵活的数值（比如用MediaQuery.of(context).size.height的比例值）。

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