![](/img/trans.png)
[英]How to do a GridView with two crossAxisCount in Flutter?
[英]Flutter change StaggeredGridView crossAxisCount by screen rotation
StaggeredGridView
像GridView
支持crossAxisCount
并且当我为crossAxisCount
定义特定数字时工作正常,例如此选项的1
或2
我想通过代码自动更改屏幕尺寸分辨率,例如下面的代码可以计算屏幕尺寸并且可以用于GridView
或StaggeredGridView
int _crossAxisCount = 0;
final double screenWidthSize = MediaQuery.of(context).size.width;
if (screenWidthSize > 720) {
_crossAxisCount = 3;
} else if (screenWidthSize > 520) {
_crossAxisCount = 2;
} else {
_crossAxisCount = 1;
}
当我为库crossAxisCount
选项定义_crossAxisCount
时,它不起作用,只有在我按下热重载按钮时才起作用
但是当我将其更改为特定计数时,效果很好
更新:
LayoutBuilder(
builder:(context,constraints){
int _crossAxisCount = 0;
final double screenWidthSize = MediaQuery.of(context).size.width;
if (screenWidthSize > 720) {
_crossAxisCount = 3;
} else if (screenWidthSize > 520) {
_crossAxisCount = 2;
} else {
_crossAxisCount = 1;
}
return StaggeredGridView.countBuilder(
primary: false,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: _crossAxisCount ,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
itemCount: feedsList.length,
itemBuilder: (BuildContext context, int index) => Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
color: Colors.white,
child: Column(
children: <Widget>[
BuildFeedsItems(
item: feedsList[index] as FeedsItemsList,
doubleTapImageEvents: _doubleTapImageEvents,
fullScreenDialog: fullScreenDialog,
theme: theme )
],
)),
staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
);
},
)
如何帮助我知道这个问题是什么,我该如何解决?
从MediaQuery
获取屏幕方向并根据方向设置crossAxisCount
。
StaggeredGridView.countBuilder(
...
crossAxisCount: MediaQuery.of(context).orientation == Orientation.landscape ? 4 : 2,
...
)
您应该在此链接中使用OrientaionBuilder
例子:
OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode,
// or 3 columns in landscape mode.
crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
);
},
);
@override
Widget build(BuildContext context) {
int _crossAxisCount = 0;
return LayoutBuilder(
builder: (context,constraints){
if(constraints.maxWidth>720){
_crossAxisCount = 3;
return _straggeredView(_crossAxisCount);
}else if(constraints.maxWidth>520 && constraints.maxWidth<720){
_crossAxisCount = 2;
return _straggeredView(_crossAxisCount);
}else{
_crossAxisCount = 1;
return _straggeredView(_crossAxisCount);
}
},
)
}
Widget _straggeredView(_crossAxisCount) {
return StaggeredGridView.countBuilder(
crossAxisCount : _crossAxisCount,
...
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.