Flutter – UI 方向

所有应用程序都应该能够根据手机的方向调整其用户界面 (UI)。通过方向，我们暗示智能手机中的纵向和横向模式而不是物理方向。在Flutter，它是通过使用OrientationBuilder来完成的，它确定了应用程序的当前方向。我们将通过构建一个简单的应用程序并更改其方向并显示 UI 更改来研究相同的内容。

按照以下步骤构建可根据手机方向更改 UI 的应用程序：

• 创建一个 3 列的 GridView
• 使用 OrientationBuilder 更改列数。

让我们详细讨论它们。

创建一个网格视图：

要创建一个 3 列的 GridView，请使用如下所示的代码：

Dart

GridView.count(
  crossAxisCount: 3,
);

使用方向构建器：

如前所述，orientationBuilder 确定当前应用程序的方向。我们将设计 Orientationbuilder，使其在纵向模式下显示 3 列，在横向模式下显示 4 列。为此，请遵循以下代码：

Dart

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      crossAxisCount: orientation == Orientation.portrait ? 3 : 4,
    );
  },
);

完整的代码如下所示：

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'GeeksForGeeks';
  
    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),
          backgroundColor: Colors.green),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
             
            //grid with 3 and 4 columns for portrait and landscape mode respectively
            crossAxisCount: orientation == Orientation.portrait ? 3 : 4,
              
            // random item generator
            children: List.generate(100, (index) {
              return Center(
                child: Text(
                  'A $index',
                  style: Theme.of(context).textTheme.headline4,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！