如何删除 ListTile 颤振顶部和底部的空间？

Posted 2023-02-23

【中文标题】如何删除 ListTile 颤振顶部和底部的空间？

【英文标题】：How to Remove space at top and bottom ListTile flutter?

【发布时间】：2019-08-11 09:58:24

【问题描述】：

如何去掉ListTile的上下空格？

我的代码是：

 child: Column(
    children: <Widget>[
      ListTile(
        contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
        title: Text(
          'Home',
          style: TextStyle(fontSize: 15.0),
        ),
      ),
      ListTile(
        contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
        title: Text(
          'Audio',
          style:
              TextStyle(fontSize: 15.0, color: Colors.black45),
        ),
      ),),

截图：

【参考方案1】：

上述解决方案都不起作用（目前）。最好的办法是使用 TextButton 并包含 Row 作为子项

【参考方案2】：

更新

现在您还可以使用以下属性：

horizontalTitleGap - 在 title 和 leading 之间 minVerticalPadding - 在 title 和 subtitle 之间 minLeadingWidth - 前导的最小宽度 contentPadding - 内部填充

旧

您可以使用visualDensity 属性来减少空间。

ListTile(
    visualDensity: VisualDensity(horizontal: 0, vertical: -4),
    title: Text("xyz")
);

visualDensity 值可以从-4.0 to 4.0 更改。降低值，视图更紧凑。

附：这个解决方案类似于不同的question

这个问题是关于top/bottom 间距的。但是other question 是关于leading 和title 之间的差距

【讨论】：

我在我的 ListTile 小部件属性中找不到这个“visualDensity”！！！

解决了 50% 的空间，Listtile 顶部和内容之间仍有 6-8 像素的间隙。

@Kamlesh 如果您需要更大的灵活性，您可以创建自定义列表图块

@reverie_ss 好的，谢谢。

minVerticalPadding 非常适合我。

【参考方案3】：

让我们尝试更短的方式：

ListTile(
          contentPadding: EdgeInsets.zero,
          dense: true,
          title: Text('label'),
        );

【讨论】：

contentPadding 帮我删除左右空格

【参考方案4】：

ListTile(
    dense: true,
    contentPadding: EdgeInsets.symmetric(horizontal: 0.0, vertical: 0.0),
    visualDensity: VisualDensity(horizontal: 0, vertical: -4),
);

以上解决方案对我有用。我希望，这也会对你有所帮助。感谢您提出这个问题。

【参考方案5】：

这在 ListTile 中对我有用：

visualDensity: VisualDensity(horizontal: 0, vertical: -4)

【参考方案6】：

ListTile 是不可能的。在ListTileTheme 的帮助下可以进行一些修改，例如颜色，还有修改填充的选项，但仅适用于左右填充。正如@santosh 在他的回答中显示的那样，创建自己的自定义磁贴更好。 你也可以使用 SizedBox 但它会导致悲剧性的输出。

【讨论】：

是的，可以使用visualDensity。检查：***.com/a/63504719/6747251

【参考方案7】：

在您的代码中将属性 dense: true 放入列表磁贴中

       ListTile(
                dense:true,
                contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
                title: Text(
                  'Home',
                  style: TextStyle(fontSize: 15.0),
                ),
              ),

希望对你有帮助！

【讨论】：

它只删除水平填充，而不是垂直填充。

"dense: true" 单独确实减少了垂直间距。但内容填充不适用于垂直间距问题

【参考方案8】：

在你的ListTile 属性中实现这个dense:true，dense 参数使文本更小并将所有内容打包在一起。

您可以通过设置contentPadding 来更改内容在左侧和右侧（但不是顶部或底部）的插入量。默认值为 16.0，但这里我们将设置为 0.0：

 ListTile(
   contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 
    0.0),
   dense:true,
   title: Text("Your title"),
   subtitle: Text("subtitle",
    style: TextStyle(fontSize: 14.0),),
 );

【讨论】：

我需要dense: true 将我的title 文本垂直居中。谢谢！

【参考方案9】：

对我来说，代替 ListTile.padding 变量工作的 Padding 小部件可以根据您对 ListItem 的要求进行更新。

Padding(
        padding: const EdgeInsets.only(left : 8.0 , right 8.0),
        child: Text("List Item Text",
            style: Theme.of(context).textTheme.body1))

【参考方案10】：

试试这个

              child: Column(
                children: <Widget>[
                    Text(
                      'Home',
                      style: TextStyle(fontSize: 15.0),
                    ),
                    Text(
                      'Audio',
                      style:
                          TextStyle(fontSize: 15.0, color: Colors.black45),
                    ),
                 ),)