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

Question

如何从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),
        ),
      ),),

截屏：

Answer 1

更新

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

1. horizontalTitleGap - 在标题和前导之间
2. minVerticalPadding - 在标题和副标题之间
3. minLeadingWidth -前导的最小宽度
4. contentPadding - 内部填充

老的

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

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

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

PS这个解决方案类似于一个不同的问题

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

Answer 2

在您的代码中将属性 dense: true 放在列表图块内

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

希望能帮助到你！

Answer 3

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

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

Answer 4

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

Answer 5

这在 ListTile 中对我有用：

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

Answer 6

尝试这个

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

Answer 7

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

您可以通过设置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),),
 );

Answer 8

让我们尝试更短的方法：

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

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

Answer 10

上述解决方案都不起作用（目前）。 您最好的选择是使用TextButton并包含一个Row作为孩子

Answer 11

这对我有用

ListTile(
  dense:true,
  minVerticalPadding: 0,
  contentPadding: EdgeInsets.zero,
  visualDensity: VisualDensity(horizontal: 0, vertical: 4),
        );

现在我根本没有填充