在某些情况下,您可能希望在可用空间形状发生变化时更新应用程序的显示,例如当用户将屏幕从纵向模式旋转到横向模式时。例如,应用程序在纵向模式下可能会逐个显示项目,但在横向模式下会将这些相同的项目并排放置。有关此内容及更多内容的扩展文档可在自适应用户界面文档中找到。

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

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

1. 构建一个包含两列的 GridView

#

首先,创建要处理的项目列表。与其使用普通列表,不如创建一个以网格形式显示项目的列表。目前,创建一个包含两列的网格。

dart
return GridView.count(
  // A list with 2 columns
  crossAxisCount: 2,
  // ...
);

要了解有关使用 GridViews 的更多信息,请参阅《创建网格列表》指南。

2. 使用 OrientationBuilder 更改列数

#

要确定应用程序当前的 Orientation,请使用 OrientationBuilder widget。OrientationBuilder 通过比较父级 widget 可用的宽度和高度来计算当前的 Orientation,并在父级大小改变时重新构建。

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

dart
body: OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      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(
            // Create a grid with 2 columns in portrait mode, or
            // 3 columns in landscape mode.
            crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
            // Generate 100 widgets that display their index in the list.
            children: List.generate(100, (index) {
              return Center(
                child: Text(
                  'Item $index',
                  style: TextTheme.of(context).displayLarge,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

锁定设备屏幕方向

#

在上一节中,您学习了如何使应用程序的用户界面适应设备屏幕方向的变化。

Flutter 还允许您使用 DeviceOrientation 的值来指定您的应用程序支持的屏幕方向。您可以选择

  • 将应用程序锁定到单个屏幕方向,例如仅限 portraitUp 位置,或者...
  • 允许多个屏幕方向,例如 portraitUpportraitDown,但不包括横向。

在应用程序的 main() 方法中,调用 SystemChrome.setPreferredOrientations() 并传入您的应用程序支持的首选屏幕方向列表。

要将设备锁定到单个屏幕方向,您可以传入只包含一个项目的列表。

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

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