如何在 Flutter 中检测布局的方向变化?

Question

如何在 Flutter 中找出方向是纵向还是横向

if(portrait){
return ListView.builder()
}else{
return GridView.count()
}

Answer 1

为了确定屏幕的方向，我们可以使用OrientationBuilder小部件。方向构建器将确定当前方向，并在方向更改时重建。

new OrientationBuilder(
builder: (context, orientation) {
return new GridView.count(
// Create a grid with 2 columns in portrait mode, or 3 columns in
// landscape mode.
crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
);
},
);

您可以在此处找到完整的示例： https://flutter.io/cookbook/design/orientation/

Answer 2

您可以使用MediaQuery来检查方向：

var isPortrait = MediaQuery.of(context).orientation == Orientation.portrait

Answer 3

这很容易

if (MediaQuery.of(context).orientation == Orientation.portrait){
// is portrait
}else{
// is landscape
}

Answer 4

@override
Widget build(BuildContext context) {
return Scaffold(
body: OrientationBuilder(builder: (_, orientation) {
if (orientation == Orientation.portrait)
return _buildPortraitLayout(); // if orientation is portrait, show your portrait layout
else
return _buildLandscapeLayout(); // else show the landscape one
}),
);
}

Answer 5

为了完整起见，我想添加另一种方法来检测 Flutter 中的方向。答案中已经提到了两种检测方法。他们是

1. 媒体查询
2. 方向生成器

在学习 Google 工程师的响应式设计视频(跳到第 2：34 分钟(中，我遇到了第三种方式。它被称为Layout Builder.以下是简短的片段：

return Padding(
padding: _padding,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if(constraints.maxHeight > constraints.maxWidth) {
return _getPortraitLayout();
}
else {
return _getLandscapeLayout();
}
},
),
);

Answer 6

OrientationBuilder(

builder: (context, orientation) {
return orientation == Orientation.portrait
? SafeArea(
child: Scaffold(
body: PortraitMode(context)
)
)
: LandscapeMode(context);
}
);

Answer 7

Mediaquery 不能在initState()中使用，OrientationBuilder 需要一个小部件，所以我创建了以下类，可以在项目的任何地方使用。

if(IsPortrait.isPortrait){
}else{
}

画像.class

class IsPortrait{
static bool isPortrait = true;
void init(BoxConstraints constraints, Orientation orientation) {
if (orientation == Orientation.portrait) {
isPortrait = true;
}
else{
isPortrait = false;
}
}
}

以下函数可用于更改方向

仅纵向模式

/// blocks rotation; sets orientation to: portrait
void _portraitModeOnly() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
}

仅横向模式

/// blocks rotation; sets orientation to: landscape
void _landscapeModeOnly() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
}

启用纵向和陆地景观

void _enableRotation() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
}

Answer 8

我的变体。

1( 在全局范围内设置全局值通知器：

final ValueNotifier<bool> IS_PORTRAIT = ValueNotifier<bool>(true);

2( 在脚手架范围内更改我们全局值通告器的值

return Scaffold(
key: scaffoldKey,
body: OrientationBuilder(
builder: (BuildContext context, Orientation orientation) {
IS_PORTRAIT.value = orientation == Orientation.portrait;
return MyBody();
},
),
);

3( 任何位置 侦听电流方向

return ValueListenableBuilder(
valueListenable: IS_PORTRAIT,
builder: (BuildContext context, value, Widget child) {
return Container(
color: Colors.green[100],
child: Container(),
height: (IS_PORTRAIT.value)? 150: 80,
);
},
);