Flutter横向布局

Question

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

有没有常用的Flutter横向布局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,
            ),
          ),
        ],
      )));

Answer 1

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

参见the documentation：

Whether this scaffold is being displayed at the top of the screen.

If true then the height of the appBar will be extended by the height of the screen's status bar, i.e. the top padding for MediaQuery.

The default value of this property, like the default value of AppBar.primary, is 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!'),
        ),
    );
}

Flutter横向布局

Flutter landscape orientation layout

layout

landscape

flutter