使用 GridView - Flutter 删除 CheckboxListTile 中复选框和文本之间的空格

Question

如何删除 Flutter CheckboxListTile 中文本小部件和复选框之间的空格？ 我想要 12 个项目，排成 4 行，每行 3 个，我有很多未使用的空间（因此我必须缩小字体大小）。

我尝试根据this solution更改CheckboxListTile，但不知道如何使用GridView来完成。

这是一整段代码：

          LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return SizedBox(
                width: constraints.maxWidth * 0.9,
                height: 550,
                child: GridView.count(
                  crossAxisCount: 3,
                  children: List.generate(
                    12,
                    (index) => CheckboxListTile(
                      // contentPadding: EdgeInsets.zero,
                      value: false,
                      title: const Text(
                        "test",
                        style: TextStyle(fontSize: 12),
                      ),
                      onChanged: (newValue) {},
                      controlAffinity: ListTileControlAffinity.leading,
                    ),
                  ),
                ),
              );
            },
          ),

我也不知道为什么行间距这么大，但那是另一个话题。

Answer 1

您可以尝试使用 childAspectRatio

   return GridView.count(
                    crossAxisCount: 3, // display 3 columns

                    shrinkWrap: true,
                    childAspectRatio: 3 / 1,
                    ...

它应该调整每个子部件的宽度和高度比例。

你也可以使用

contentPadding: const EdgeInsets.symmetric(
                            horizontal: 25, vertical: 0)

Answer 2

用下面的小部件包装。也许它会起作用。

MediaQuery.removePadding(
 context: context,
 removeRight: true,
 child: GridView.count(),
), 

https://api.flutter.dev/flutter/widgets/MediaQuery/MediaQuery.removePadding.html