Flutter 判断横竖屏（含尺寸、方向改变时触发）

最新推荐文章于 2025-09-20 13:54:31 发布

原创最新推荐文章于 2025-09-20 13:54:31 发布 · 6.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文介绍了一种在Flutter中判断设备屏幕方向的方法，通过比较屏幕的高度和宽度来确定当前是横屏还是竖屏，并提供了使用OrientationBuilder在屏幕方向变化时更新UI的示例。

判断横竖屏，拿 height 和 width 比较下就可以了，比如这样：

MediaQuery.of(context).size.width >
        MediaQuery.of(context).size.height // 还可以 * 1.2 之类的（根据场景自己看着办[滑稽]）
    ? "横屏"
    : "竖屏"

如果说要在横竖屏、应用显示尺寸改变时触发，那可以套一个 OrientationBuilder，比如这样（新建了个 Flutter 项目用来示例，所以以下例子和使用场景其实不太匹配 [笑哭]）：

    OrientationBuilder(
        builder: (context, orientation) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  MediaQuery.of(context).size.width >
                          MediaQuery.of(context).size.height * 1.2  // height 这边多留了点，不需要的话可以看下一个例子（直接用 orientation）
                      ? "横屏"
                      : "竖屏",
                ),
                Text(
                  "${MediaQuery.of(context).size.width} × ${MediaQuery.of(context).size.height}",
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          );
        },
    );

或者这样（直接用 OrientationBuilder 的 orientation）：

    OrientationBuilder(
      builder: (context, orientation) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                orientation == Orientation.landscape ? "横屏" : "竖屏",
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        );
      },
    );