根据屏幕方向更新UI

在某些情况下，当用户将屏幕旋转方向从纵向模式更改为横向模式时，您可能需要更新应用的显示。例如，该应用可能在纵向模式下依次显示一个项目，而在横向模式下并排显示这些项目。

在 Flutter 中，您可以根据给定的 Orientation 构建不同的布局。在此示例中，使用以下步骤构建一个列表，该列表在纵向模式下显示两列，在横向模式下显示三列：

1. 使用两列构建一个 GridView。
2. 使用 OrientationBuilder 来更改列数。

首先，创建一个要使用的项目列表。不要使用普通列表，而要创建一个以网格形式显示项目的列表。目前，创建一个具有两列的网格。

return GridView.count(
  // 一个包含 2 列的列表
  crossAxisCount: 2,
  // ...
);

要了解有关使用 GridView 的更多信息，请参阅创建网格列表 教程。

要确定应用的当前 Orientation，请使用 OrientationBuilder 小部件。OrientationBuilder 通过比较父小部件可用的宽度和高度来计算当前 Orientation，并在父小部件的大小发生变化时重新构建。

使用 Orientation 构建一个列表，该列表在纵向模式下显示两列，在横向模式下显示三列。

body: OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // 在纵向模式下创建一个包含 2 列的网格，或在横向模式下创建一个包含 3 列的网格。
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
),

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Orientation Demo';

    return const MaterialApp(
      title: appTitle,
      home: OrientationList(
        title: appTitle,
      ),
    );
  }
}

class OrientationList extends StatelessWidget {
  final String title;

  const OrientationList({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
            // 在纵向模式下创建一个包含 2 列的网格，或在横向模式下创建一个包含 3 列的网格。
            crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
            // 生成 100 个小部件，这些小部件在列表中显示其索引。
            children: List.generate(100, (index) {
              return Center(
                child: Text(
                  'Item $index',
                  style: Theme.of(context).textTheme.displayLarge,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

在上一节中，您学习了如何使应用 UI 适应设备方向的变化。

Flutter 还允许您使用 DeviceOrientation 的值指定应用支持的方向。您可以：

• 将应用锁定到单个方向，例如仅锁定 portraitUp 位置，或者……
• 允许多个方向，例如 portraitUp 和 portraitDown，但不允许横向。

在应用程序 main() 方法中，使用首选方向列表调用 SystemChrome.setPreferredOrientations()。

要将设备锁定到单个方向，您可以传递包含单个项目的列表。

有关所有可能值的列表，请查看 DeviceOrientation。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  runApp(const MyApp());
}

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。