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

2024-05-14

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

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

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

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

Edit:

我正在使用这个自定义LabeledCheckbox小部件,您可以控制之间的间隙CheckBox and Text有场gap,它还包裹着GestureDetector因此它也会注册文本上的点击,而不仅仅是复选框本身。

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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐