如何从 ListTile 前导属性中删除固有填充？前导属性容器的填充颜色

Posted 2023-02-23

【中文标题】如何从 ListTile 前导属性中删除固有填充？前导属性容器的填充颜色

【英文标题】：How to remove inherent padding from ListTile leading property? Fill color of leading property container

【发布时间】：2019-09-03 01:43:11

【问题描述】：

我正在创建一个应用内电子邮件收件箱，并且想要对 ListTile 中的前导图标的背景进行着色。如何填充前导属性，以便在图标上方和下方有填充？

过去我曾尝试将 ListTile 的 contentpadding 设置为 0.0。以及将 Container padding 设置为 0.0。

请在下面查看我的代码：

    Widget buildItem(LeaveBehindItem item) 
    final ThemeData theme = Theme.of(context);
    return new Dismissible(
        key: new ObjectKey(item),
        direction: _dismissDirection,
        onDismissed: (DismissDirection direction) 
          setState(() 
            leaveBehindItems.remove(item);
          );
          final String action = (direction == DismissDirection.endToStart) ? 'archived' : 'deleted';
          _scaffoldKey.currentState.showSnackBar(new SnackBar(
              content: new Text('You $action item $item.index'),
              action: new SnackBarAction(
                  label: 'UNDO',
                  onPressed: ()  handleUndo(item); 
              )
          ));
        ,
        background: new Container(
            color: Colors.green,
            child: const ListTile(
                leading: const Icon(Icons.done, color: Colors.white, size: 36.0)
            )
        ),
        secondaryBackground: new Container(
            color: Colors.orange,
            child: const ListTile(
                trailing: const Icon(Icons.query_builder, color: Colors.white, size: 36.0)
            )
        ),
        child: new Container(
           padding: EdgeInsets.all(0.0),
            decoration: new BoxDecoration(
                color: theme.canvasColor,
                border: new Border(bottom: new BorderSide(color: theme.dividerColor))
            ),
            child: new ListTile(
              contentPadding: EdgeInsets.all(0.0),
              leading: Container(
                decoration: BoxDecoration(color: Colors.grey[500]),
                child: Icon(Icons.lightbulb_outline, size: 50.0,),
              ),
              title: new Text(item.name),
              subtitle: new Text('$item.subject\n$item.to\nHas been read: $item.read'),
              onTap: () async 
                await Navigator.push(context, MaterialPageRoute(builder: (context) => EmailBody(item: item)));
               item.read = true;
              ,
            )
        )
    );
  

【参考方案1】：

ListTile 具有硬编码的顶部和底部填充 4：

// The minimum padding on the top and bottom of the title and subtitle widgets.
static const double _minVerticalPadding = 4.0;

解决此问题的唯一方法是将 ListTile 替换为自定义 Row。这将为您提供所需的所有灵活性。

此外，Padding 为 0 永远不会在视觉上改变任何东西。