flutter - Orientation Builder 给出了错误的方向

Question

在我的应用程序中，我使用 GridView 来显示类别网格和 TextField。我想根据 Screen Orientation 更改一行中显示的项目数(即在 Portrait mode 5 items per line 和 landscape mode 8 items per line )。

我试图通过使用 OrientationBuilder 小部件来实现这一点。在我打开软键盘编辑 TextField 之前，它工作得很好。

但是当我打开软键盘时，OrientationBuilder 将方向返回为 landscape 从而导致溢出问题。

这是我的代码，

return new Scaffold(
      appBar: buildFilterAppBar(context),
      body: new OrientationBuilder(builder: (context, orientation) {
        return new Column(
          children: <Widget>[
            new Expanded(
              child: new ListView(
                children: <Widget>[
                  buildContentTitle(
                      context, true, Icons.local_offer, '', 'Choose category'),
                  new GridView.count(
                    crossAxisCount: orientation == Orientation.portrait ? 5 : 8,
                    shrinkWrap: true,
                    physics: new NeverScrollableScrollPhysics(),
                    children: buildCategories(orientation),
                  ),
                  new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      buildContentTitle(context, false, null,
                          'assets/money_pouch.png', 'Set a price range'),
                      new Padding(
                        padding: const EdgeInsets.only(left: 44.0),
                        child: new Text(
                          'Price (\u20B9)',
                          style: new TextStyle(
                              color: Theme.of(context).primaryColorDark,
                              fontSize: 15.0,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                      new Padding(
                        padding: const EdgeInsets.only(left: 44.0, right: 12.0),
                        child: new Row(
                          children: <Widget>[
                            new Flexible(
                                child: new TextField(
                                  decoration: new InputDecoration(labelText: 'From'),
                                )),
                            new Container(
                              width: 1.0,
                              height: 40.0,
                              color: Colors.grey[700],
                              margin: const EdgeInsets.symmetric(horizontal: 5.0),
                            ),
                            new Flexible(
                                child: new TextField(
                                  decoration: new InputDecoration(labelText: 'To'),
                                )),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            new MaterialButton(
              padding: const EdgeInsets.symmetric(vertical: 15.0),
              onPressed: () {},
              color: Theme.of(context).accentColor,
              minWidth: double.infinity,
              child: new Text(
                'APPLY  FILTERS',
                style: new TextStyle(color: Colors.white, fontSize: 16.0, fontWeight: FontWeight.w500),
              ),
            ),
          ],
        );
      }),
    );

除了使用 OrientationBuilder 之外，还有其他选择吗？或者有什么方法可以纠正它吗？

提前致谢。

Answer 1

文档中已经说过

OrientationBuilder 构建一个小部件树，它可以依赖于父小部件的方向(不同于设备方向)。

在我的例子中，当软键盘打开时，屏幕的宽度变得大于高度(请注意，我计算的高度是 Full Screen Height - Soft Keyboard height)。

因此 OrientationBuilder 以 landscape 形式返回，这是根据文档的正确行为。

因此 OrientationBuilder 不能用于这种情况。

要解决这个问题，我们可以使用从 MediaQuery

获得的方向

MediaQuery.of(context).orientation == Orientation.portrait ? 5 : 8