Flutter：如何在GridView的CheckboxListTile中消除复选框与文本间距

直接调整CheckboxListTile的几个核心属性就能解决，不用缩小字号，具体改法如下：

1. 针对性调整间距参数
   CheckboxListTile默认的horizontalTitleGap（复选框与标题的水平间距）、minLeadingWidth（复选框区域的最小宽度）以及contentPadding（组件内边距）是导致间距冗余的主要原因，按需修改这几个参数即可：

• horizontalTitleGap: 设置为4.0~8.0之间的数值，根据视觉效果调整
• minLeadingWidth: 从默认的40改为16，压缩复选框占用的无效宽度
• contentPadding: 设为EdgeInsets.symmetric(horizontal: 4.0)或EdgeInsets.zero，去掉多余的左右内边距

2. 结合GridView的布局优化
   将调整后的CheckboxListTile放入GridView，可搭配Container包裹来控制item整体尺寸，避免额外留白。

完整代码示例 #

GridView.count(
  crossAxisCount: 3, // 3列布局
  mainAxisSpacing: 8.0, // 行间距（你提及将另行处理，此处可保留默认或临时设置）
  crossAxisSpacing: 8.0, // 列间距
  children: List.generate(12, (index) {
    return CheckboxListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 4.0),
      horizontalTitleGap: 6.0,
      minLeadingWidth: 16.0,
      title: Text('选项 $index', style: TextStyle(fontSize: 14.0)), // 无需缩小字号
      value: false, // 替换为你的状态变量
      onChanged: (bool? newValue) {
        // 处理选中逻辑
      },
      controlAffinity: ListTileControlAffinity.leading, // 明确复选框在左侧
    );
  }),
)

如果仍觉得垂直方向有多余空间，可以给CheckboxListTile套一个SizedBox固定高度，比如SizedBox(height: 40, child: CheckboxListTile(...))，进一步压缩垂直留白。

内容的提问来源于stack exchange，提问作者Skar