【问题标题】:How do I reduce spaces between checkboxListTile如何减少 checkboxListTile 之间的空格
【发布时间】:2023-03-22 15:59:01
【问题描述】:

我有一个字符串数组,我使用 CheckboxListTile 小部件映射到不同的复选框,但我需要减少这些复选框之间的空间。

  @override
  _CheckBoxInListviewState createState() => _CheckBoxInListviewState();
}

class _CheckBoxInListviewState extends State<CheckBoxInListview> {
  // bool _isChecked = false;

 Map<String,bool> _texts = {
    "InduceSmile.com": false,
    "google.com": false,
    "youtube.com": false,
    "yahoo.com": false,
 };
  @override
  Widget build(BuildContext context) {
return  Column(
          
          children: _texts.keys.map((text) => Theme(
            data: ThemeData(

                    checkboxTheme: CheckboxThemeData(
                      visualDensity: VisualDensity.compact,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(topLeft: Radius.circular(4),topRight: Radius.circular(4),bottomLeft: Radius.circular(4),bottomRight: Radius.circular(4))))),
            child: CheckboxListTile(
              controlAffinity: ListTileControlAffinity.leading,
              title: Transform.translate(offset: Offset(-15,0),
              child: Text(text,style: TextStyle(fontSize: 13),),
              ),
               value: _texts[text],
                  onChanged: (val) {
                  setState(() {
                   _texts[text] = val;
            
                });
              },
            ),
          )).toList(),
  );
  }
}

这是我的代码的结果 here is the picture(result of the code above)

【问题讨论】:

  • ListTiles 具有固定高度,因此很容易击中它们 - 你无法降低该高度,ListTile 的文档说:“一个固定高度的行通常包含一些文本以及前导或尾随图标。”
  • 那么有什么更好的解决方法呢?
  • 转到CheckboxListTile 文档并找到CheckboxListTile isn't exactly what I want 部分

标签: java android flutter dart android-layout


【解决方案1】:

正如@pskink 的评论中提到的,CheckboxListTile 就像固定高度组件,只有contentPadding 可以调整内容周围的空间,而不能控制其他空间。

但是,您可以增加 Text 小部件的字体大小以提供更好的 UI - 下面是字体大小为 28 的屏幕截图。

【讨论】:

  • 我会试试这个谢谢