Flutter 方向生成器提供错误的方向
在我的应用程序中,我使用Flutter 方向生成器提供错误的方向,flutter,flutter-layout,Flutter,Flutter Layout,在我的应用程序中,我使用GridView来显示类别网格和TextField。我想根据屏幕方向更改一行中显示的项目数(即在纵向模式下,每行5个项目,在横向模式下,每行8个项目) 我试图通过使用OrientationBuilderwidget来实现这一点。直到我打开软键盘编辑文本字段,它才能正常工作 但当我打开软键盘时,方向生成器将方向返回为横向,从而导致溢出问题 这是我的密码 return new Scaffold( appBar: buildFilterAppBar(context)
GridView
来显示类别网格和TextField
。我想根据屏幕方向更改一行中显示的项目数(即在纵向模式下,每行5个项目,在横向模式下,每行8个项目)
我试图通过使用OrientationBuilder
widget来实现这一点。直到我打开软键盘编辑文本字段,它才能正常工作
但当我打开软键盘时,方向生成器将方向返回为横向
,从而导致溢出问题
这是我的密码
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),
),
),
],
);
}),
);
返回新脚手架(
appBar:buildFilterAppBar(上下文),
正文:新方向生成器(生成器:(上下文,方向){
返回新列(
儿童:[
新扩展(
子:新列表视图(
儿童:[
buildContentTitle(
上下文,true,Icons.local_offer,,“选择类别”),
新建GridView.count(
crossAxisCount:orientation==orientation.portrait?5:8,
收缩膜:对,
物理学:新NeverscrollableScroll物理学(),
儿童:建筑类别(方向),
),
新专栏(
crossAxisAlignment:crossAxisAlignment.start,
儿童:[
buildContentTitle(上下文、false、null、,
“assets/money_pocket.png”,“设置价格范围”),
新填料(
填充:仅限常量边集(左:44.0),
儿童:新文本(
'价格(\u20B9)',
样式:新文本样式(
颜色:主题。背景。原色深,
字体大小:15.0,
fontWeight:fontWeight.w600),
),
),
新填料(
填充:仅限常量边集(左:44.0,右:12.0),
孩子:新的一排(
儿童:[
新柔性(
孩子:新文本字段(
装饰:新输入装饰(标签文本:“From”),
)),
新容器(
宽度:1.0,
身高:40.0,
颜色:颜色。灰色[700],
边距:常数边集。对称(水平:5.0),
),
新柔性(
孩子:新文本字段(
装饰:新的输入装饰(标签文本:“To”),
)),
],
),
),
],
),
],
),
),
新材料按钮(
填充:常量边集。对称(垂直:15.0),
按下:(){},
颜色:主题。背景。强调颜色,
minWidth:double.infinity,
儿童:新文本(
“应用过滤器”,
样式:新文本样式(颜色:Colors.white,fontSize:16.0,fontwweight:fontwweight.w500),
),
),
],
);
}),
);
除了使用OrientationBuilder
之外,还有其他选项吗?或者有什么方法可以纠正它吗
提前感谢。文档中已经说过
OrientationBuilder构建一个小部件树,它可以依赖于父小部件的方向(不同于设备方向)。
在我的情况下,当软键盘打开时,屏幕的宽度将大于高度(请注意,我计算的高度为全屏高度-软键盘高度
)
因此,根据文档,OrientationBuilder返回为横向
,这是正确的行为
因此,在这种情况下不能使用OrientationBuilder
为了解决这个问题,我们可以使用从MediaQuery
MediaQuery.of(context).orientation == Orientation.portrait ? 5 : 8
OrientationBuilder
对我来说非常好。您可能只是重复检查并调试您的应用程序,或者在这里创建一个问题:我已经确定了这一点。当我打开软键盘时,小部件的状态会按预期发生变化。但方向是横向的。谢谢先生分享