Flutter 横向布局

Posted 2023-03-10

【中文标题】Flutter 横向布局

【英文标题】：Flutter landscape orientation layout

【发布时间】：2017-10-09 14:51:59

【问题描述】：

如何在横向模式下设置AppBar高度，使其不占用屏幕填充？

有没有常见的 Widget？上述有问题的布局如下：

new Padding(
  padding: media.padding,
  child: new Scaffold(
      key: _scaffoldKey,
      body: new Row(
        children: <Widget>[
          new LimitedBox(
            maxWidth: 320.0,
            child: new Column(children: [
              _buildAppBar(),
              new Expanded(
                  child: new ModuleDrawer(
                widget.module.sugar,
                topPadding: 0.0,
              )),
            ]),
          ),
          new Expanded(
            child: new RecordList(
              widget.model,
            ),
          ),
        ],
      )));

【参考方案1】：

您可能可以使用脚手架的primary 属性，结合通过简单的MediaQuery 检测方向。因此，在横向模式下，将 primary 标志设置为 false 以告诉 Scaffold 在确定 AppBar 高度时不考虑状态栏高度。

见the documentation:

此脚手架是否显示在屏幕顶部。

如果为 true，则 appBar 的高度将扩展屏幕状态栏的高度，即 MediaQuery 的顶部填充。

这个属性的默认值，和 AppBar.primary 的默认值一样，都是 true。

所以在你的情况下，应该这样做：

@override
Widget build(BuildContext context) 
    final Orientation orientation = MediaQuery.of(context).orientation;
    final bool isLandscape = orientation == Orientation.landscape;

    return new Scaffold(
        primary: !isLandscape,
        appBar: new AppBar(
          title: new Text('AppBar title'),
        ),
        body: new Center(
            child: new Text('Look at the appbar on landscape!'),
        ),
    );

【讨论】：

节省时间；）谢谢。我使用您的解决方案使颤振画廊动画小部件在横向模式下工作

根据用例，也可以使用OrientationBuilder。它不是取决于设备的方向，而是基于父窗口小部件的比例。