如何减少/删除下图中CheckboxListTile和文本之间的空间?下面的行似乎只删除了周围的空间。
CheckboxListTile( title: Text('Account number not available'), contentPadding: EdgeInsets.all(0), controlAffinity: ListTileControlAffinity.leading, )
dwthyt8l1#
CheckboxListTile使用的ListTile与contentPadding具有相同的填充,因此这不是问题,因为您将其设置为0.0,但是它也有一个名为visualDensity的字段,你不能从CheckboxListTile中设置它。这个visualDensity继承自ThemeData。所以你可以在你的主题中设置VisualDensity.compact(你仍然不能完全删除你突出显示的空间,但它会更小,这取决于你当前的ThemeData设置),或者像我一样定制一个LabeledCheckbox小部件以获得充分的灵活性,这并不难。
CheckboxListTile
ListTile
ThemeData
VisualDensity.compact
LabeledCheckbox
我正在使用这个自定义的LabeledCheckbox小工具,你可以控制CheckBox和Text之间的差距与字段gap,而且它是 Package 与GestureDetector,所以它注册点击文本太多,而不仅仅是复选框本身。
CheckBox
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, ), ), ), ], ), ), ); } }
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, ), ),
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
3条答案
按热度按时间dwthyt8l1#
CheckboxListTile
使用的ListTile
与contentPadding具有相同的填充,因此这不是问题,因为您将其设置为0.0,但是它也有一个名为visualDensity的字段,你不能从CheckboxListTile
中设置它。这个visualDensity继承自ThemeData
。所以你可以在你的主题中设置VisualDensity.compact
(你仍然不能完全删除你突出显示的空间,但它会更小,这取决于你当前的ThemeData
设置),或者像我一样定制一个LabeledCheckbox
小部件以获得充分的灵活性,这并不难。我正在使用这个自定义的
LabeledCheckbox
小工具,你可以控制CheckBox
和Text
之间的差距与字段gap
,而且它是 Package 与GestureDetector
,所以它注册点击文本太多,而不仅仅是复选框本身。o4tp2gmn2#
你可以做这样的事
zwghvu4y3#
我重新编写了一个完整的小部件,灵感来自于实际上不起作用的公认答案(无状态管理、空安全性和手势检测器问题)。
您可以找到完整的working exemple on dartpad