Flutter：如何删除复选框（多个 CheckboxListTile）的额外填充？

Posted 2023-02-23

【中文标题】Flutter：如何删除复选框（多个 CheckboxListTile）的额外填充？

【英文标题】：Flutter: How to remove extra paddings of checkbox (multiple CheckboxListTile)?

【发布时间】：2021-01-15 14:55:37

【问题描述】：

我正在尝试创建一个这样的复选框列表： my plan

我使用CheckBoxListTile 与dense 和contentPadding 来删除所有可能的填充，这就是我所拥有的： my result

有什么办法可以去掉CheckBoxListTile之间多余的“填充”？

这是我的代码（单个复选框）：

class Checklist extends StatefulWidget 
  Checklist(@required this.content);
  final String content;

  @override
  _ChecklistState createState() => _ChecklistState();


class _ChecklistState extends State<Checklist> 
  bool _checked = false;
  @override
  Widget build(BuildContext context) 
    return CheckboxListTile(
      contentPadding: EdgeInsets.all(0),
      //dense: true,
      title: Text(widget.content, style: TextStyle(color: kBlackColor),),
      value: _checked,
      onChanged: (bool value) 
        setState(() 
          _checked = value;
        );
      ,
      controlAffinity: ListTileControlAffinity.leading,
      activeColor: kBlackColor,
    );
  

多个复选框：

Column(
   children: [
      Checklist(content: 'Develop an app'),
      Checklist(content: 'Develop a good app'),
      Checklist(content: 'Develop a really good app'),
   ],
),

【问题讨论】：

手动制作复选框。

【参考方案1】：

将 CheckBox 包裹在 SizedBox 中会调整复选框的内边距

SizedBox(
    height: whatYouWant,
    width: whatYouWant,
    child: Checkbox(...),
 )

请检查此解决方案：https://***.com/a/59420505/11989529