如何在flutter中约束GridView小部件的宽度

Question

两天来我一直在尝试为网格视图添加一个固定的宽度，但是我不能。

我尝试添加宽度或框约束父容器，但它没有工作。

我正在构建一个web应用程序，所以屏幕宽度通常比智能手机的更宽。
我想让它看起来像这样:

在颤振示例中GridView的固定宽度

目的:

限制GridView Widget的最大宽度为1000作为一个例子。

编辑:

如果你在父容器居中时遇到任何问题只要给它添加一个居中小部件就可以了

Answer 1

你可以使用ResponsiveBuilder()，我希望我的卡片有一个最大350的宽度，所以我把屏幕宽度分为350，并四舍五入，然后我得到了我漂亮的"Wrap"效果。

或者您可以使用Wrap()并在其中有一个自定义布局，我使用Wrap来显示小屏幕项目，如标签。

ResponsiveBuilder(
builder: (context, sizingInformation) {
return Padding(
padding: const EdgeInsets.only(top: 20),
child: GridView.builder(
shrinkWrap: true,
itemCount: items.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisExtent: 150,
crossAxisCount: (sizingInformation.localWidgetSize.width
/ 350 ).round()
),
...

Answer 2

在这里，您可以使用crossAxisCount属性在行中不添加任何项。然后把固定的包在一个容器中，把它交给它的子对象。

Container(
width: 100, // HERE YOU CAN ADD THE WIDTH
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: list.length,
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1,
crossAxisCount: 4, // HERE YOU CAN ADD THE NO OF ITEMS PER LINE
mainAxisSpacing: 5,
crossAxisSpacing: 5,
),
itemBuilder: _getListItemTile))