Question

开头和标题之间的边距太大；

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

通过容器弯曲行距并将右边距设置为负；
变形标题并设置向左填充

但是，它根本不起作用；有什么解决办法吗，我确实需要帮助

Answer 1

对我来说唯一有效的答案是Matrix转换标题小部件。

此处，标题文本填充减少了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)),
              ),
);

来源：How to set the padding between leading and title from Flutter ListTile?

Answer 2

您最终最好自己构建容器-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 3

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

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 4

将 minLeadingWidth 设置为 0。

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

Answer 5

这几天我遇到了同样的问题，最后我发布了一个可以解决这个问题的软件包。

该软件包可在https://pub.dev/packages/list_tile_more_customizable处获得，并且使用此软件包，我们可以设置horizontalTitleGap，并将其设置为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处使用（原始代码太长），我很难理解为什么一个用户在不提交任何问题的情况下投票否决了答案。 / p>

Answer 6

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

Answer 7

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

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

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

P.S。此解决方案类似于其他question

此问题与leading和title之间的差距有关。但是other question大约是top/bottom间距

Answer 8

可以设置horizontalTileGap

<块引用>

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

Answer 9

在ListTile内部，使用contentPadding：EdgeInsets.fromLTRB（）然后可以调整R值以适合您的设计。

带有容器的示例：

>>> import spacy
>>>
>>> spacy.explain('dobj')
direct object
>>>
>>> spcay.explain('nsubj')
nominal subject

Answer 10

不使用前导，只在标题内使用行

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

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 子项的填充。

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

14 个答案: