flutter - Youtube 就像 flutter 上的全屏按钮

Question

我在尝试实现类似 Youtube 的全屏按钮时变得疯狂，我的小部件树位于 OrientationBuilder 中，逻辑应遵循以下方案:

如果方向被用户锁定:全屏按钮应将方向从纵向更改为横向，如果在全屏中按钮应更改为纵向这部分不是问题，我只是调用了正确的 SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]); 或 SystemChrome.setPreferredOrientations([DeviceOrientation.portrait]);一切都符合预期

如果方向未被用户锁定:这就是一切变得棘手的地方……如果在纵向模式下按下全屏按钮SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]); 应该被调用，但是，如果用户将手机旋转到横向，然后再回到纵向，方向应该恢复到原始纵向(检查youtube)在全屏模式下也应该发生同样的情况，按钮切换到纵向，然后如果我将手机移回纵向然后再回到横向，应用程序应该再次旋转。我唯一完成的事情是在 iOS 上获得正确的功能，在布局构建器上，我在 OrientationBuilder 构建器方法返回之前将首选方向重置为“portrait，landscapeLeft，landscapeRight”，但在 Android 中这导致要使用当前方向重建的应用程序，但在 iOS 中它会一直保持到来回旋转，知道吗？

Answer 1

我在我的应用程序上禁用全屏模式时遇到了类似的问题。为了启用全屏，我使用 SystemChrome.setPreferredOrientations() 强制应用横向显示。然后，我通过将首选方向设置为纵向来禁用全屏。

void _enableFullscreen(bool fullscreen) {
  isFullscreen = fullscreen;
  if (fullscreen) {
    // Force landscape orientation for fullscreen
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  } else {
    // Force portrait
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
  }
}

该应用使用 OrientationBuilder 检测设备的方向。

OrientationBuilder(builder: (context, orientation) {
  debugPrint('Device orientation: $orientation');
  isFullscreen = orientation == Orientation.landscape;
  return isFullscreen

      /// Landscape Layout
      ? Container()
       
      /// Portrait Layout
      : Column();
})

我在这里遇到的问题是，在设置首选方向后，小部件不会根据设备的方向(即自动旋转)重建。为了解决这个问题，我在 setPreferredOrientations() 上设置了一个空列表，以指示 Flutter 应用程序再次遵从操作系统默认值(方向)，如 docs 中所述。 .

这是一个完整的示例。我正在使用 Flutter 2.5

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isFullscreen = false;

  void _enableFullscreen(bool fullscreen) {
    isFullscreen = fullscreen;
    if (fullscreen) {
      // Force landscape orientation for fullscreen
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    } else {
      // Force portrait
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
      // Set preferred orientation to device default
      // Empty list causes the application to defer to the operating system default.
      // See: https://api.flutter.dev/flutter/services/SystemChrome/setPreferredOrientations.html
      SystemChrome.setPreferredOrientations([]);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: OrientationBuilder(builder: (context, orientation) {
        debugPrint('Device orientation: $orientation');
        isFullscreen = orientation == Orientation.landscape;
        return isFullscreen

            /// Landscape Layout
            ? Container(color: Colors.green)

            /// Portrait Layout
            : Column(
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(color: Colors.green),
                  ),
                  Expanded(
                    flex: 3,
                    child: Container(color: Colors.lightBlueAccent),
                  )
                ],
              );
      }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _enableFullscreen(!isFullscreen);
        },
        tooltip: 'Fullscreen',
        child: const Icon(Icons.fullscreen),
      ),
    );
  }
}