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

发表于 分类于

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
OrientationBuilder(
  builder: (context, orientation) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            orientation == Orientation.landscape ? "横屏" : "竖屏",
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    );
  },
);