在我的应用程序中,我使用 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
之外,还有其他选择吗?或者有什么方法可以纠正它吗?
提前致谢。
最佳答案
文档中已经说过
OrientationBuilder 构建一个小部件树,它可以依赖于父小部件的方向(不同于设备方向)。
在我的例子中,当软键盘打开时,屏幕的宽度变得大于高度(请注意,我计算的高度是 Full Screen Height - Soft Keyboard height
)。
因此 OrientationBuilder 以 landscape
形式返回,这是根据文档的正确行为
。
因此 OrientationBuilder 不能用于这种情况
。
要解决这个问题,我们可以使用从 MediaQuery
MediaQuery.of(context).orientation == Orientation.portrait ? 5 : 8
关于flutter - Orientation Builder 给出了错误的方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50757851/