如何去除 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

   - 在title和leading
之间

2. minVerticalPadding

   - 在title和subtitle
之间

3. minLeadingWidth

   - leading
的最小宽度

4. contentPadding

   - 内部填充

老

您可以使用

visualDensity

属性来减少空间。

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

visualDensity

值可以从

-4.0 to 4.0

改变。值越低，视图越紧凑。

附言此解决方案类似于不同的question

这道题是关于

top/bottom

间距的。但是另一个问题是关于

leading

和

title

之间的差距

Answer 2

在您的代码中，将属性 dense: true 放在列表 tile 中

       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 中对我有用：

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

Answer 5

用

ListTile

这是不可能的。借助

ListTileTheme

之类的颜色可以进行一些修改，也可以选择修改填充，但仅适用于左右填充。正如@santosh 在他的回答中所展示的那样，更好的做法是创建您自己的自定义磁贴。 您也可以使用 SizedBox 但它可能会导致悲剧性的输出。

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,
  minVerticalPadding: 0,
  contentPadding: EdgeInsets.zero,
  visualDensity: VisualDensity(horizontal: 0, vertical: 4),
        );

现在我完全没有填充

Answer 8

让我们尝试更短的方式：

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

Answer 9

对我来说，Padding 小部件代替了 ListTile。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,
  visualDensity: VisualDensity(horizontal: 0, vertical: -4),
  contentPadding: EdgeInsets.only(left: 0.0,right: 0.0, top: 0.0),
  title:  LabelText(
    labelText: "Cara",
    fontSize: 14,
    fontWeight: FontWeight.w600,
    color: AppColor.txtColor,
    textAlign: TextAlign.center
  ),
  subtitle:  LabelText(
    labelText: "Patient #1",
    fontSize: 12,
    fontWeight: FontWeight.normal,
    color: AppColor.inactive,
    textAlign: TextAlign.center
  ),
),

Answer 12

ListTile(
  minVerticalPadding: 0, // else 2px still present
  dense: true, // else 2px still present
  visualDensity: VisualDensity.compact, // Else theme will be use
  contentPadding: const EdgeInsets.zero, // Or what do you want, you will have now the exact amount of padding as expected
),