时间戳

首页 > 解决方案 > 如何删除/减少 Flutter 中 CheckboxListTile 的文本和复选框之间的空间？

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

问题描述

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

似乎以下行仅删除了周围的空间。

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

在此处输入图像描述

标签： flutter

解决方案

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

编辑：

我正在使用这个自定义小部件，您可以控制与fieldLabeledCheckbox之间的间隙，它也被包裹起来，因此它也注册了对文本的点击，而不仅仅是复选框本身。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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

推荐阅读