如何减少 ListTile 的“领先”和“标题”之间的边距？ 扑

Question

前导和标题之间的边距太大；

如何减少它； 我尝试了几种方法：

1. 用容器扭曲前导并将边距设置为负；
2. 扭曲标题并设置 padding-left

然而，它根本不起作用； 有什么解决办法吗，我需要帮助

Answer 1

您最终最好构建自己的容器 - ListTile 没有什么特别或复杂的地方。 这样您就可以轻松自定义标题和按钮之间的间距等内容。 只需使用这样的东西：

  Container(
    padding: new EdgeInsets.symmetric(vertical: 6.0, horizontal: 6.0),
    margin: EdgeInsets.symmetric(vertical: 6.0),

    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6.0),
      border: Border.all(color: Colors.black),
    ),

    child: Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[

                  IconButton(
                    icon: Icon(myLeadingIcon),
                    onPressed: () => {},
                  ),
                  Padding(padding: EdgeInsets.only(left: 20.0)),
                  Text(_myTitle),
                ],
              ),
    ...

Answer 2

对我有用的唯一答案是矩阵转换标题小部件。

这里，标题文本填充减少了 16。

ListTile(
  leading: Icon(icon),
  title: Transform(
              transform: Matrix4.translationValues(-16, 0.0, 0.0),
              child: Text("Title text",
                          style: TextStyle(fontSize: 18, color: textPrimary)),
              ),
);

来源： 如何从 Flutter ListTile 设置前导和标题之间的填充？

Answer 3

更新

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

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

老的

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

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

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

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

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

Answer 4

不要使用前导，只需在标题内使用 Row

title: Row(
    children: <Widget>[
       Icon(Icons.location_on,size: 15,color:ThemeManager.mainContentColor,),
       SizedBox(width: 8,),
       Text('DEMO'),
    ],
),

Answer 5

将minLeadingWidth设置为0 。

ListTile(
  minLeadingWidth: 0, // <-- Set this. 
  leading: Icon(Icons.settings),
  title: Text('Settings'),
)

Answer 6

在 ListTile 中，使用 contentPadding : EdgeInsets.fromLTRB() 然后您可以调整 R 值以适合您的设计。

一个容器的例子：

Container(
        child: ListTile(
          contentPadding: EdgeInsets.fromLTRB(10.0, 0.0, 250.0, 0.0),
          leading: CircleAvatar(
            backgroundColor: Colors.purpleAccent,
            child: Text('A'),
          ),
          trailing: Text(
            'Any Text here',
            style: const TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: 16.0,
            ),
          ),
        ),
      ),

Answer 7

我认为现在回复这个已经很晚了，但我认为这可以帮助其他人。 我遇到了类似的问题。 下面的代码帮助我解决了这个问题：

Card(
  child: ListTile(
    leading: Icon(
      Icons.call,
      color: Colors.teal,
      size: 20
    ),
    title: Align(
      child: Text(
          "xxxxxxxxxx"
      ),
      alignment: Alignment(-1.3, 0),
    ),
    dense: true,
  )

因此，基本上将Alignment property to title和dense: true最终帮助我解决了这个问题。

注意：根据您的用例使用对齐值。

我希望这能帮到您！

Answer 8

我这几天也有同样的问题，最后我发布了一个可以解决这个问题的包。

该包可在https://pub.dev/packages/list_tile_more_customizable 获得，使用该包我们可以设置水平标题间隙，当它设置为 0.0（零）时，前导和标题之间的填充将变为零。

用法：

ListTileMoreCustomizable(
    title: Text("Title"),
    trailing: Icon(Icons.people),
    horizontalTitleGap: 0.0, // This horizontalTitleGap can set the margin between 'leading' and 'title' and also between 'trailing' and 'title'.
    onTap: (details){},
    onLongPress: (details){},
);

编辑：
这种方法对我很有用，代码也可以在https://github.com/Playhi/list_tile_more_customizable （原始代码太长），我很难理解为什么一个用户在没有提交的情况下对答案投了反对票任何问题。

Answer 9

设置密集的 true 可能会解决您的问题。 ListTile（密集：真实）

Answer 10

您可以设置horizo​​ntalTileGap

ListTile( horizontalTitleGap: 0, //Set this. minLeadingWidth: 0, leading: Icon(Icons.settings), title: Text('Settings'),)

Answer 11

如果在 ListTile 或 ListView.separated 中使用 Divider 作为行，则将 Divider 高度设置为 0，因为 Divider 默认采用一些高度。

Divider(
              height: 0,
        );

这对我来说工作正常。

Answer 12

Flutter 2.0 升级后

ListTile 已收到 minLeadingWidth 属性。 默认值为 40，因此通过 x 传递 minLeadingWidth: 40 - x 来减少前导和标题之间的空间。

对齐结果将取决于文本和平铺宽度。

使用 Transform.translate 以获得一致的结果。

ListTile(
  leading: Icon(icon),
  title: Transform.translate(
    offset: Offset(-16, 0),
    child: Text('Some text'),
  ),
);

Answer 13

自 2021 年 6 月 9 日起，您可以使用horizontalTitleGap像这样实现：

ListTile(
      horizontalTitleGap: 2,
      title: Text("Title Number ${index + 1}")
)

Answer 14

设置minLeadingWidth: 0以消除前导和标题之间的间隙，设置horizontalTitleGap: 7以调整前导和标题之间的自定义间隙。

ListTile(
  minLeadingWidth: 0, // min width of leading; if 0 => leading won't take extra space 
  horizontalTitleGap: 7,  //gap between title and leading
  leading: SvgPicture.asset(icChecked),
  title: const Text('Demo Text', style: tsWhiteSemiBold16),
),

如果您希望在CenterVertical领先，那么您必须将领先图标包装在Container

ListTile(
  minLeadingWidth: 0, // min width of leading; if 0 => leading won't take extra space 
  horizontalTitleGap: 7,  //gap between title and leading
  leading: Container(
    height: double.infinity,
    child: SvgPicture.asset(icChecked),
  ),
  title: const Text('Demo Text', style: tsWhiteSemiBold16),
),

您还可以使用contentPadding来调整ListTile子项的填充。