从 ListTile 中删除前导和标题之间的填充

Question

我需要删除 ListTile 中前导 Widget 和标题 Widget 之间的一些填充。 它有太多的空格。 有没有办法做到这一点？ 我使用的代码是这样的：

ListTile _getActionMenu(String text, IconData icon, Function() onTap) {
  return new ListTile(
    leading: new Icon(icon),
    title: new Text(text),
    onTap: onTap,
  );
}

Answer 1

编辑：Flutter 2.0 升级后

正如 Dinesh 在这里指出的那样， ListTile已收到minLeadingWidth属性。

默认值为40 ，因此要通过x减少前导和标题之间的空间，请传递minLeadingWidth: 40 - x 。

---

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

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

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

Answer 2

您可以在ListTile上使用 minLeadingWidth。 默认值为 40，因此您可以使用较低的值来使您的前导和标题更接近。

ListTile(
  leading : Icon(Icons.settings),
  title : Text("Settings"),
  minLeadingWidth : 10,
);

Answer 3

您可以使用Align并指定Alignment 。

ListTile _getActionMenu(String text, IconData icon, Function() onTap) {
  return new ListTile(
    leading: new Icon(icon),
    title: Align(
      child: new Text(text),
      alignment: Alignment(-1.2, 0),
    ),
    onTap: onTap,
  );
}

Answer 4

这段代码是解决方案

...
    contentPadding:EdgeInsets.all(0),
...

Answer 5

我为此找到的一个丑陋的解决方法是在标题部分放置一个 Row 小部件，然后将图标和文本放在该 Row 中，中间有一个 SizedBox。 这样您就可以控制它们之间需要多少空间：

ListView(
  shrinkWrap: true,
  children: <Widget>[
    ListTile(
      title: Row(
        children: <Widget>[
          Icon(Icons.android),
          SizedBox(
            width: 5, // here put the desired space between the icon and the text
          ),
          Text("Title") // here we could use a column widget if we want to add a subtitle
        ],
      ),
    )
  ],
)

Answer 6

对于那些正在寻找一个干净的、一条线的答案的人。 您可以使用

ListTile(
 horizontalTitleGap: desiredDoubleValue,
);

Answer 7

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

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

用法：

ListTileMoreCustomizable(
    title: Text("Title"),
    trailing: Icon(Icons.people),
    horizontalTitleGap: 0.0,
    onTap: (details){},
    onLongPress: (details){},
);

编辑：
这种方法对我很有用，而且代码可以在https://github.com/Playhi/list_tile_more_customizable在 BSD 许可证下获得（原始代码太长），我很难理解为什么一个用户不赞成回答而不提交任何问题。

Answer 8

将水平标题间隙设置为 0

 ListTile(
                          contentPadding: EdgeInsets.zero,
                          minLeadingWidth: 5,
                          ***horizontalTitleGap: 0,***
                          leading: widget,
                          title: widget ,
                         )

Answer 9

使用Horizo​​ntalTileGap：

ListTile(
        horizontalTitleGap: 0,
        leading: CircleAvatar(
          radius: 50,
          backgroundImage:
              NetworkImage("https://picsum.photos/250?image=1"),
        ),
        title: Text("Image 6"),
      ),

Answer 10

相反，您可以创建自己的小部件，如下所示：

1. 假设我们将创建一个名为text_icon.dart的小部件文件

    import 'package:flutter/material.dart';

      class TextIcon extends StatelessWidget {
        final String title;
        final IconData icon;
        final String button;

        const TextIcon({Key key, this.title, this.icon, this.button}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          final theme = Theme.of(context);

          return Padding(
            padding: const EdgeInsets.only(bottom: 24.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Icon(
                 icon,
                 size: 18,
                ),
               SizedBox(width: 5),
               Text(
                 title,
                 style: theme.textTheme.subhead.copyWith(fontSize: 13),
               ),
             ],
           ),
         );
       }
     }

2. 在屏幕上调用您的小部件

   TextIcon(icon: Icons.pause_circle_filled, title: "John Doe")

Answer 11

可以通过简单的添加来解决： contentPadding: EdgeInsets.zero,

Answer 12

现在 ListTile 具有 minLeadingWidth 的属性。

例子

ListTile(
      minLeadingWidth: 15,
      leading: Icons(Icons.search),
      title: Text("Data");

Answer 13

我认为ListTile不是正确的小部件，更优雅的方法是：

FlatButton.icon(
    onPressed: null,
    icon: Icon(
      Icons.flag_rounded,
      color: Colors.white,
    ),
    label: Text('Title'))

Answer 14

使用 Horizo​​ntalTitleGap 或 minLeadingWidth。 两者的默认值分别设置为 16.0 和 40.0。

水平标题间隙

最小前导宽度

ListTile(horizontalTitleGap: 0, minLeadingWidth: 0,),

Answer 15

您必须添加此参数。

return ListTile(
    leading: new Icon(icon),
    title: new Text(text),
    onTap: onTap,
    //Add this parameter
    contentPadding: EdgeInsets.zero,
);

Answer 16

contentPadding属性可以解决问题：

return ListTile(
  title: Text('Some fancy title'),
  contentPadding: EdgeInsets.zero,
);

请注意EdgeInsets.zero值以删除插入填充。