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 builds a widget tree that can depend on the parent widget's orientation (distinct from the device orientation).

在我的情况下，当打开软键盘时，屏幕的宽度会变得高于高度（请注意，我正在计算高度为Full Screen Height - Soft Keyboard height）。

因此，根据文档，OrientationBuilder以landscape返回correct behaviour。

因此OrientationBuilder cannot be used适用于此案例。

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

获取的方向

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

Orientation Builder提供错误的方向

1 个答案: