根據螢幕方向更新使用者介面

在某些情況下，您希望在可用空間形狀發生變化時更新應用的顯示，例如當用戶將螢幕從縱向模式旋轉到橫向模式時。例如，應用可能在縱向模式下逐個顯示專案，而在橫向模式下並排顯示這些相同的專案。有關此內容及更多內容的擴充套件文件，請參閱 自適應 UI 文件。

在 Flutter 中，您可以根據給定的 Orientation 構建不同的佈局。在此示例中，使用以下步驟構建一個在縱向模式下顯示兩列，在橫向模式下顯示三列的列表：

1. 構建一個具有兩列的 GridView。
2. 使用 OrientationBuilder 更改列數。

首先，建立一個要處理的專案列表。而不是使用普通列表，建立一個顯示網格中專案的列表。目前，建立一個具有兩列的網格。

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

要了解有關使用 GridViews 的更多資訊，請參閱 建立網格列表 食譜。

要確定應用的當前 Orientation，請使用 OrientationBuilder 小部件。OrientationBuilder 透過比較父小部件可用的寬度和高度來計算當前 Orientation，並在父小部件的大小改變時進行重建。

使用 Orientation，構建一個在縱向模式下顯示兩列，在橫向模式下顯示三列的列表。

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

在上一節中，您學習瞭如何使應用 UI 適應裝置方向更改。

Flutter 還允許您使用 DeviceOrientation 的值來指定應用支援的方向。您可以選擇

• 將應用鎖定為單個方向，例如僅 portraitUp 位置，或者...
• 允許多種方向，例如 portraitUp 和 portraitDown，但不允許橫向。

在應用的 main() 方法中，使用您的應用支援的首選方向列表呼叫 SystemChrome.setPreferredOrientations()。

要將裝置鎖定為單個方向，您可以傳遞一個包含單個專案的列表。

有關所有可能值的列表，請檢視 DeviceOrientation。

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