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

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

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

Answer 2

我发现的 ugly 解决方法是将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 3

Align的结果将取决于文本和图块的宽度。

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

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

Answer 4

您可以使用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 5

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

该软件包可在https://pub.dev/packages/list_tile_more_customizable处获得，并且使用此软件包，我们可以设置horizontalTitleGap，并将其设置为0.0（零）时，开头和标题之间的填充将变为零。

用法：

  "dependencies": {
    "lodash": "^4.17.15",
    "memoize-one": "^5.1.1"
  }

编辑：
这种方法对我来说非常有用，并且在BSD许可下，https://github.com/Playhi/list_tile_more_customizable处的代码也可用（原始代码太长），我很难理解为什么一个用户在不提交任何问题的情况下否决了答案它。

Answer 6

此代码是解决方案

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

Answer 7

相反，您可以如下创建自己的Widget：

假设我们将创建一个名为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),
               ),
             ],
           ),
         );
       }
     }

在屏幕上调用小部件

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

Answer 8

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

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

Answer 9

使用Apply complete! Resources: 10 added, 0 changed, 0 destroyed. Releasing state lock. This may take a few moments... Outputs: instance_public_ips = [ "34.244.18.5", "52.213.153.230", "34.244.69.143", ]获取更多信息，请查看https://api.flutter.dev/flutter/material/ListTile/contentPadding.html

从列表标题和标题之间删除填充

9 个答案: