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

nbysray5  于 2022-12-24  发布在  Flutter
关注(0)|答案(3)|浏览(277)

如何减少/删除下图中CheckboxListTile和文本之间的空间?
下面的行似乎只删除了周围的空间。

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

dwthyt8l

dwthyt8l1#

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

    • 编辑:**

我正在使用这个自定义的LabeledCheckbox小工具,你可以控制CheckBoxText之间的差距与字段gap,而且它是 Package 与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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
o4tp2gmn

o4tp2gmn2#

你可以做这样的事

ListTileTheme(
    horizontalTitleGap: 0,
    child: CheckboxListTile(
      controlAffinity: ListTileControlAffinity.leading,
      title: Text(
        title,
        style: kRegularFontStyle.copyWith(
          fontSize: 16.0.sp,
          color: Theme.of(context).textTheme.subtitle1!.color,
        ),
      ),
      value: isChecked,
      onChanged: onChanged,
      activeColor: kStructuralBlue500,
      checkColor: kWhiteColor,
      checkboxShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0.r)),
      contentPadding: EdgeInsets.zero,
    ),
  ),
zwghvu4y

zwghvu4y3#

我重新编写了一个完整的小部件,灵感来自于实际上不起作用的公认答案(无状态管理、空安全性和手势检测器问题)。

class LabeledCheckbox extends StatefulWidget {

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

  const LabeledCheckbox({
    required this.label,
    this.contentPadding,
    required this.value,
    required this.onTap,
    this.activeColor = Colors.blueAccent,
    this.fontSize = 16.0,
    this.gap = 4.0,
    this.bold = false,
  });

  @override
  State<LabeledCheckbox> createState() => _LabeledCheckboxState();
}

class _LabeledCheckboxState extends State<LabeledCheckbox> {

  late bool _checkboxValue;

  @override
  void initState() {
    _checkboxValue = widget.value;
    super.initState();
  }

  void _updateCheckBox(bool val){
    setState(() {
      _checkboxValue = val;
      // call ontap with new value
      widget.onTap(_checkboxValue);
    });
  }

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

您可以找到完整的working exemple on dartpad

相关问题