如何在 Flutter 中删除/减少 CheckboxListTile 的文本和复选框之间的空间？

Question

如何减少/删除下图中 CheckboxListTile 和文本之间的空间？

看来以下行仅删除了周围的空间。

CheckboxListTile(
    title: Text('Account number not available'),
    contentPadding: EdgeInsets.all(0),
    controlAffinity: ListTileControlAffinity.leading,
)

Answer 1

CheckboxListTile正在使用ListTile与 contentPadding 具有相同填充的内容，因此这不是问题，因为您将其设置为 0.0，但它还有一个名为 VisualDensity 的字段，您无法从 中设置该字段CheckboxListTile。此 VisualDensity 继承自ThemeData. 因此，您要么VisualDensity.compact在主题中进行设置（您仍然无法完全删除突出显示的空间，但它会更小，这取决于您当前的ThemeData设置），要么LabeledCheckbox像我一样制作一个自定义小部件以实现完全的灵活性这并不难。

编辑：

我正在使用这个自定义小部件，您可以控制field之间LabeledCheckbox的间隙，并且它也被包裹起来，因此它也注册了文本上的点击，而不仅仅是复选框本身。CheckBoxTextgapGestureDetector

class LabeledCheckbox extends StatelessWidget {
  const LabeledCheckbox({
    this.label,
    this.contentPadding,
    this.value,
    this.onTap,
    this.activeColor,
    this.fontSize,
    this.gap = 4.0,
    this.bold = false,
  });

  final String label;
  final EdgeInsets contentPadding;
  final bool value;
  final Function onTap;
  final Color activeColor;
  final double fontSize;
  final double gap;
  final bool bold;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onTap(!value),
      child: Padding(
        padding: contentPadding ?? const EdgeInsets.all(0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Checkbox(
              value: value,
              activeColor: activeColor,
              visualDensity: VisualDensity.compact,
              onChanged: (val) => onTap(val),
            ),
            SizedBox(
              width: gap,
            ), // you can control gap between checkbox and label with this field
            Flexible(
              child: Text(
                label,
                style: TextStyle(
                  fontSize: fontSize,
                  fontWeight: bold ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}