所有应用程序都应该能够根据手机的方向调整其用户界面 (UI)。通过方向,我们暗示智能手机中的纵向和横向模式而不是物理方向。在Flutter,它是通过使用OrientationBuilder来完成的,它确定了应用程序的当前方向。我们将通过构建一个简单的应用程序并更改其方向并显示 UI 更改来研究相同的内容。
按照以下步骤构建可根据手机方向更改 UI 的应用程序:
- 创建一个 3 列的 GridView
- 使用 OrientationBuilder 更改列数。
让我们详细讨论它们。
创建一个网格视图:
要创建一个 3 列的 GridView,请使用如下所示的代码:
Dart
GridView.count(
crossAxisCount: 3,
);
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,
),
);
}),
);
},
),
);
}
}
使用方向构建器:
如前所述,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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!