Flutter屏幕方向管理插件orientation的使用

Flutter屏幕方向管理插件orientation的使用

orientation 是一个用于设备方向管理的 Flutter 插件。通过此插件，您可以控制应用的屏幕方向，并监听方向变化。

使用方法

首先，您需要在 pubspec.yaml 文件中添加 orientation 依赖项：

dependencies:
  flutter:
    sdk: flutter
  orientation: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来安装该插件。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 orientation 插件来控制屏幕方向并监听方向变化。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

// 假设有一个自定义的 Helper 类来处理屏幕方向
class OrientationHelper {
  static Future<void> setPreferredOrientations(List<DeviceOrientation> orientations) async {
    await SystemChrome.setPreferredOrientations(orientations);
  }

  static Future<void> setEnabledSystemUIOverlays(List<SystemUiOverlay> overlays) async {
    await SystemChrome.setEnabledSystemUIOverlays(overlays);
  }

  static Stream<DeviceOrientation> onOrientationChange() {
    return SystemChrome.onOrientationChanged;
  }

  static Future<void> forceOrientation(DeviceOrientation orientation) async {
    await SystemChrome.setPreferredOrientations(<DeviceOrientation>[orientation]);
  }
}

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置初始屏幕方向
  OrientationHelper.setPreferredOrientations([DeviceOrientation.portraitUp]);
  OrientationHelper.setEnabledSystemUIOverlays(SystemUiOverlay.values);
  
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DeviceOrientation _deviceOrientation;

  StreamSubscription<DeviceOrientation> subscription;

  [@override](/user/override)
  void initState() {
    super.initState();
    
    // 监听方向变化
    subscription = OrientationHelper.onOrientationChange().listen((value) {
      // 如果小部件从树中移除，则忽略消息
      if (!mounted) return;

      setState(() {
        _deviceOrientation = value;
      });

      // 强制屏幕方向
      OrientationHelper.forceOrientation(value);
    });
  }

  [@override](/user/override)
  void dispose() {
    _dispose();
    super.dispose();
  }

  // 释放资源
  void _dispose() {
    subscription?.cancel();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        _dispose();
        return Future.value(true);
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('屏幕方向示例'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                '当前方向: ${_deviceOrientation ?? '未知方向'}\n',
              ),
              ElevatedButton(
                child: Text('全屏模式'),
                onPressed: () {
                  OrientationHelper.setEnabledSystemUIOverlays([]);
                },
              ),
              ElevatedButton(
                child: Text('正常模式'),
                onPressed: () {
                  OrientationHelper.setEnabledSystemUIOverlays(SystemUiOverlay.values);
                },
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Flutter 是谷歌的 UI 工具包，用于构建美观的原生应用程序，适用于移动、Web 和桌面平台，从单一代码库。'
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}