Flutter如何减小两个CheckboxListTile之间的行间距？

你可以通过以下几种方式缩小行之间的间距，同时保留组件内部的内边距：

方法1：启用dense属性 #

CheckboxListTile自带dense属性，开启后会让组件布局更紧凑，自动缩小上下方向的间距，完全不影响内部内边距：

return CheckboxListTile(
  dense: true, // 关键属性，开启紧凑模式
  value: _starValues[index],
  title: Row(
    children: List.generate(5, (i) {
      return Icon(
        // 你的图标逻辑
      );
    }),
  ),
  onChanged: (value) {
    // 你的回调逻辑
  },
);

方法2：自定义margin微调 #

如果dense的效果还达不到预期，可以用Container包裹CheckboxListTile，通过负的垂直margin进一步压缩行间距：

return Container(
  margin: const EdgeInsets.symmetric(vertical: -4), // 可根据需求调整数值
  child: CheckboxListTile(
    value: _starValues[index],
    title: Row(
      children: List.generate(5, (i) {
        return Icon(
          // 你的图标逻辑
        );
      }),
    ),
    onChanged: (value) {
      // 你的回调逻辑
    },
  ),
);

方法3：全局调整ListTileTheme #

如果需要统一调整当前ListView内所有CheckboxListTile的间距，可以在ListView外层套ListTileTheme，修改tileVerticalPadding参数：

child: ListTileTheme(
  tileVerticalPadding: 4.0, // 设为比默认值小的数值，缩小上下内边距
  child: ListView.builder(
    physics: const NeverScrollableScrollPhysics(),
    itemCount: 5,
    itemBuilder: (context, index) {
      int starValue = index;
      return CheckboxListTile(
        value: _starValues[index],
        title: Row(
          children: List.generate(5, (i) {
            return Icon(
              // 你的图标逻辑
            );
          }),
        ),
        onChanged: (value) {
          // 你的回调逻辑
        },
      );
    },
  ),
),

这几种方法都不会移除你需要的内部内边距，能有效缩小行与行之间的空隙，达到你想要的效果。

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