根据屏幕方向更新界面

一般情况下,一旦一个应用的屏幕方向发生了改变,比如从横屏变成竖屏,其设计也将跟着更新。例如,在纵向模式下,我们可能想要依次显示各个项目,但在横向模式下,我们会把这些相同的项目并排放置。

In some situations, you want to update the display of an app when the user rotates the screen from portrait mode to landscape mode. For example, the app might show one item after the next in portrait mode, yet put those same items side-by-side in landscape mode.

在 Flutter 中,我们可以根据给定的 Orientation 构建不同的布局。本示例中,我们将构建一个列表,在纵向模式下显示两列,在横向模式下显示三列。

In Flutter, you can build different layouts depending on a given Orientation. In this example, build a list that displays two columns in portrait mode and three columns in landscape mode using the following steps:

  1. 创建一个列的数量为 2 的 GridView

    Build a GridView with two columns.

  2. 使用 OrientationBuilder 更改列数。

    Use an OrientationBuilder to change the number of columns.

1. 创建一个列的数量为 2 的 GridView

1. Build a GridView with two columns

首先,我们需要一个项目的列表来配合完成。我们需要使用一个在网格中显示项目的列表而非一个普通的列表。现在,我们将创建一个包含两个列的网格。

First, create a list of items to work with. Rather than using a normal list, create a list that displays items in a grid. For now, create a grid with two columns.

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

要了解有关使用 GridViews 的更多信息,请参阅这个教程文档:创建一个网格列表

To learn more about working with GridViews, see the Creating a grid list recipe.

2. 使用 OrientationBuilder 更改列数。

2. Use an OrientationBuilder to change the number of columns

为了确定当前的屏幕方向 Orientation,我们可以使用 OrientationBuilder widget。 OrientationBuilder 通过比较父 widget 的可用宽度和高度来计算当前的 Orientation,并在父窗口大小更改时重建。

To determine the app’s current Orientation, use the OrientationBuilder widget. The OrientationBuilder calculates the current Orientation by comparing the width and height available to the parent widget, and rebuilds when the size of the parent changes.

使用 Orientation,我们可以构建一个列表,在纵向模式下显示两列,在横向模式下显示三列。

Using the Orientation, build a list that displays two columns in portrait mode, or three columns in landscape mode.

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,
    );
  },
);

完整样例

Complete example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Orientation Demo';

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

class OrientationList extends StatelessWidget {
  final String title;

  OrientationList({Key key, this.title}) : super(key: key);

  @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: Theme.of(context).textTheme.headline,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

Orientation Demo