dart GridView溢出,多个项添加到网格点

ws51t4hk  于 2023-01-03  发布在  其他
关注(0)|答案(3)|浏览(106)

我们有一个网格视图,它基本上是3列,每列中有一些额外的元素,但最后的元素似乎被溢出

GridView.count(
                  crossAxisSpacing: 35,
                  shrinkWrap: true,
                  crossAxisCount: 3,
                  children: List.generate(3, (index) {
                    return Center(
                      child: Column(
                        children: [
                          const CircleAvatar(
                            minRadius: 30,
                          ),
                          const SizedBox(height: 20),
                          Text(
                            'Name',
                            style: Theme.of(context).textTheme.bodyMedium,
                          ),
                          const SizedBox(height: 10),
                          Text(
                            '$index',
                            style: Theme.of(context).textTheme.headline5,
                          ),
                        ],
                      ),
                    );
                  }),
                ),

moiiocjp

moiiocjp1#

使用“SingleChildScrollView”对列进行换行

ktecyv1j

ktecyv1j2#

尝试使用。

SizedBox(
height= // your option , 
child : // your Widegt,
)
brqmpdu1

brqmpdu13#

crossAxisSpacing: 35 👈 This is the causing problem

解释:

假设screen width为300,并且有3列,每列的宽度为80
此间距将导致80 + 35 + 80 + 35 + 80 = 310,这是额外的10px

溶液:

通过在grid items内部提供padding来替换crossAxisSpacing

设置crossAxisSpacing = 0后的输出:

相关问题