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

Ada*_*n P 21 orientation dart flutter flutter-layout

如何找到方向是Flutter中的肖像或风景

if(portrait){
  return ListView.builder()
}else{
  return GridView.count()
}
Run Code Online (Sandbox Code Playgroud)

小智 29

为了确定屏幕的方向,我们可以使用 OrientationBuilderWidget.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,
    );
  },
);
Run Code Online (Sandbox Code Playgroud)

你可以在这里找到完整的例子:https: //flutter.io/cookbook/design/orientation/

  • 您如何看待https://github.com/flutter/flutter/issues/19259? (2认同)

Gün*_*uer 24

您可以MediaQuery用来检查方向:

var isPortrait = MediaQuery.of(context).orientation == Orientation.portrait
Run Code Online (Sandbox Code Playgroud)


小智 6

这很容易

if (MediaQuery.of(context).orientation == Orientation.portrait){
    // is portrait
}else{
// is landscape
}
Run Code Online (Sandbox Code Playgroud)


Cop*_*oad 6

@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
    }),
  );
}
Run Code Online (Sandbox Code Playgroud)

  • OrientationBuilder 似乎仅适用于脚手架级别的构建。当我构建有状态小部件时,它似乎无法在树上进一步工作。我想知道这是否是众所周知的事情。 (5认同)