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

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)