flutter如何监听屏幕旋转

在Flutter开发中，如何实时监听设备屏幕旋转事件？当用户旋转手机横竖屏时，如何获取当前屏幕方向并动态调整UI布局？是否有类似OrientationBuilder之外的更底层监听方案？官方文档提到的SystemChrome.setPreferredOrientations()只能限制方向，但无法实时监听变化。求具体实现方案和代码示例。

2 回复

在Flutter中，使用WidgetsBindingObserver监听屏幕旋转。重写didChangeMetrics方法，通过MediaQuery.of(context).orientation获取屏幕方向。

更多关于flutter如何监听屏幕旋转的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中监听屏幕旋转可以通过以下几种方式实现：

1. 使用 OrientationBuilder（推荐）

OrientationBuilder(
  builder: (context, orientation) {
    // orientation 可以是 Orientation.portrait 或 Orientation.landscape
    if (orientation == Orientation.portrait) {
      return Text('竖屏模式');
    } else {
      return Text('横屏模式');
    }
  },
)

2. 使用 MediaQuery

@override
Widget build(BuildContext context) {
  final orientation = MediaQuery.of(context).orientation;
  
  return Scaffold(
    body: Center(
      child: Text(
        orientation == Orientation.portrait ? '竖屏' : '横屏',
        style: TextStyle(fontSize: 24),
      ),
    ),
  );
}

3. 监听屏幕旋转变化

class ScreenOrientationPage extends StatefulWidget {
  @override
  _ScreenOrientationPageState createState() => _ScreenOrientationPageState();
}

class _ScreenOrientationPageState extends State<ScreenOrientationPage> with WidgetsBindingObserver {
  Orientation? _currentOrientation;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _currentOrientation = MediaQuery.of(context).orientation;
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    final newOrientation = MediaQuery.of(context).orientation;
    if (newOrientation != _currentOrientation) {
      setState(() {
        _currentOrientation = newOrientation;
      });
      print('屏幕方向已改变: $newOrientation');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('屏幕旋转监听')),
      body: Center(
        child: Text(
          _currentOrientation == Orientation.portrait ? '当前是竖屏' : '当前是横屏',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

4. 强制锁定屏幕方向

如果需要锁定屏幕方向，可以使用 services 包：

import 'package:flutter/services.dart';

// 锁定为竖屏
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
]);

// 锁定为横屏
SystemChrome.setPreferredOrientations([
  DeviceOrientation.landscapeLeft,
  DeviceOrientation.landscapeRight,
]);

// 恢复自动旋转
SystemChrome.setPreferredOrientations([]);

推荐使用 OrientationBuilder，因为它专门为此场景设计，性能更好且使用简单。

回到顶部