时间戳

首页 > 解决方案 > 方向生成器给出错误的方向

flutter - 方向生成器给出错误的方向

问题描述

在我的应用程序中，我使用 aGridView来显示类别网格和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或者有什么方法可以纠正它？

提前致谢。

标签： flutterflutter-layout

解决方案

文档中已经说过

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）。

因此landscape， OrientationBuildercorrect behaviour按文档返回。

因此OrientationBuilder cannot be used对于这种情况。

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

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

推荐阅读