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

Question

领先与头衔之间的差距太大；

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

1. 用集装箱翘起导程并将右边距设置为负；
2. 调整标题并设置向左填充

但是，它根本不起作用；有什么解决方案，我需要帮助吗

Answer 1

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

这里，标题文本填充减少了 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 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

更新

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

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。值越低，视图越紧凑。

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最终帮助我解决了这个问题。

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

我希望这能帮到您！