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

Question

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

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

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为像我一样完全灵活，这并不难。

编辑：

我正在使用这个自定义LabeledCheckbox小部件，您可以使用字段gap控制CheckBox和Text之间的间隙，它也被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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

你可以做这样的事情

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,
    ),
  ),

Answer 3

我根据已接受的答案重新设计了一个完整的小部件，但实际上不起作用（没有状态管理、空安全和手势检测器问题）。

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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

你可以在 dartpad 上找到一个完整的工作示例

Answer 4

这很简单。 不要使用CheckboxListTile 。 而是使用CheckBox with Text in Row with mainAxisSize: MainAxisSize.min如下所示，并将这些属性设置为CheckBox ：

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
visualDensity: VisualDensity.compact,

检查此示例代码

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    
    Checkbox(
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      visualDensity: VisualDensity.compact,
      value: true,
      onChanged: (newValue){
        //Do Something When Value Changes to True Or False
        
      },
    ),
    
    Text('Account number not available'),
    
  ]
)

享受！！