根据屏幕方向更新 UI
在某些情况下,您可能希望在用户将屏幕从纵向模式旋转到横向模式时更新应用程序的显示。例如,应用程序可能在纵向模式下依次显示一个项目,但在横向模式下并排放置这些相同的项目。
在 Flutter 中,您可以根据给定的 Orientation
构建不同的布局。在本例中,我们将构建一个列表,在纵向模式下显示两列,在横向模式下显示三列,使用以下步骤
- 构建一个包含两列的
GridView
。 - 使用
OrientationBuilder
更改列数。
1. 构建一个包含两列的 GridView
#首先,创建一个要使用的项目列表。不要使用普通的列表,而是创建一个以网格形式显示项目的列表。目前,创建一个包含两列的网格。
return GridView.count(
// A list with 2 columns
crossAxisCount: 2,
// ...
);
要了解有关使用 GridViews
的更多信息,请参阅 创建网格列表 食谱。
2. 使用 OrientationBuilder
更改列数
#要确定应用程序的当前 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: Theme.of(context).textTheme.displayLarge,
),
);
}),
);
},
),
);
}
}
锁定设备方向
#在上一节中,您学习了如何使应用程序 UI 适应设备方向的变化。
Flutter 还允许您使用 DeviceOrientation
的值指定应用程序支持的方向。您可以:
- 将应用程序锁定到单个方向,例如仅锁定
portraitUp
位置,或者... - 允许多个方向,例如
portraitUp
和portraitDown
,但不允许横向。
在应用程序的 main()
方法中,使用应用程序支持的首选方向列表调用 SystemChrome.setPreferredOrientations()
。
要将设备锁定到单个方向,您可以传递一个包含单个项目的列表。
有关所有可能值的列表,请查看 DeviceOrientation
。
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
runApp(const MyApp());
}
除非另有说明,否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-06-26。 查看源代码 或 报告问题.