英文:
How to center GridView items inside a Column in Flutter?
问题
在一个SingleChildScrollView中的Column里，我有一个GridView.builder，但似乎无法使GridView中的项目在Column中水平居中。
我尝试在小部件树的许多部分添加Center，并在每个小部件的树中包含了mainAxisAlignment、crossAxisAlignment以及更多参数。我还尝试将小部件包装在宽度为无穷大的容器中。Column中放置的其他小部件都是居中的，所以我认为问题出现在GridView的delegate中。
最小可重现示例（MRE）：
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Center(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 40, crossAxisSpacing: 2.5),
scrollDirection: Axis.vertical,
itemCount: 9,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return const Text(
'_',
);
},
),
),
],
),
),
);
}
我找到的唯一相关答案是这个，但是对于如此微不足道的问题，复杂性和代码开销似乎是不必要的，而且很难正确缩放Text。
英文:
I have a GridView.builder inside of a Column in a SingleChildScrollView. I cannot seem to get the items of the GridView to center horizontally inside of the Column.
I have tried adding Center to many parts of the widget tree and including mainAxisAlignment crossAxisAlignment and more parameters to each widget of the tree. I have also tried wrapping the widget in a container with width infinity. Other widgets placed in the column are centered, so I believe the problem lies within the GridView delegate.
MRE:
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Center(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 40, crossAxisSpacing: 2.5),
scrollDirection: Axis.vertical,
itemCount: 9,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return const Text(
'_',
);
},
),
),
],
),
),
);
}
The only relevant answer I found was this, however the complexity and code overhead seems unneccessary for such a trivial issue, and it is hard to scale the Text correctly.
答案1
得分: 1
你需要使用 Center 小部件包裹 Column，并使用 SideBox 包裹 GridView，并根据需要设置大小。
[输出链接][1]
```dart
SingleChildScrollView(
child: Center( // 将 Center 包裹在 Column 外部
child: Column(
children: <Widget>[
SizedBox(
width: 400, // 关键在于这里
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 40,
crossAxisSpacing: 2.5,
mainAxisSpacing: 2.5,
),
itemCount: 9,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
color: Colors.yellow,
child: const Text(
'_',
textAlign: TextAlign.center,
),
);
},
),
),
],
),
),
),
<details>
<summary>英文:</summary>
You have to wrap Column with Center widget and GridView with SideBox and set the size based on your need.
[1]
```dart
SingleChildScrollView(
child: Center( // Wrap center outside of column
child: Column(
children: <Widget>[
SizedBox(
width: 400, // The trick is here
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 40,
crossAxisSpacing: 2.5,
mainAxisSpacing: 2.5,
),
itemCount: 9,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
color: Colors.yellow,
child: const Text(
'_',
textAlign: TextAlign.center,
),
);
},
),
),
],
),
),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论