Flutter开发：Card内Row最后一项填色时如何去除周围Padding

首先咱们得先定位Padding的来源，大概率是ListTile自带的默认内边距或者布局层级里的默认间距导致的，下面给你几个针对性的解决方案：

1. 移除ListTile的默认内边距 #

ListTile组件默认带有contentPadding（默认值是EdgeInsets.symmetric(horizontal: 16.0)），这会让它在Row里占用额外的水平空间，直接导致最后一个子项周围出现空白。你可以把这个padding直接设为0：

new Expanded(
  child: new ListTile(
    contentPadding: EdgeInsets.zero, // 关键：移除ListTile的默认内边距
    leading: new Image(...),
    // 其他ListTile属性...
  ),
),

2. 替换ListTile为自定义Row（更灵活） #

如果ListTile的默认样式限制了你的布局，完全可以用自定义Row替代它，这样能彻底控制所有内边距和元素间距：

new Expanded(
  child: new Row(
    children: [
      new Image(...), // 原来的leading组件
      new SizedBox(width: 12.0), // 自己控制图片和文本的间距
      new Expanded(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            new Text("标题"),
            new Text("副标题"),
          ],
        ),
      ),
    ],
  ),
),

3. 让最后一个子项充满剩余空间 #

如果最后一个子项需要填充Row的剩余区域，记得给它加上Expanded，同时确保父级没有额外padding：

new Row(
  children: <Widget>[
    new Expanded(child: new ListTile(...)),
    new Expanded( // 让最后一个子项铺满剩余空间
      child: new Container(
        color: Colors.blue,
        alignment: Alignment.center,
        child: new Text("填充区域"),
      ),
    ),
  ],
),

4. 调整Card的裁剪行为 #

如果最后一个子项的颜色无法铺满Card边缘，可以给Card设置clipBehavior，确保颜色能延伸到Card的边界：

new Card(
  clipBehavior: Clip.antiAlias, // 确保子组件颜色铺满Card边缘
  child: new Row(
    children: <Widget>[
      // 你的子组件...
    ],
  ),
),

完整修改示例代码 #

return new Container(
  margin: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 16.0),
  child: new InkWell(
    child: new Card(
      clipBehavior: Clip.antiAlias,
      child: new Row(
        children: <Widget>[
          new Expanded(
            child: new ListTile(
              contentPadding: EdgeInsets.zero,
              leading: new Image.network("你的图片URL"),
              title: new Text("标题文本"),
              subtitle: new Text("副标题文本"),
            ),
          ),
          new Container(
            width: 80.0,
            color: Colors.green,
            alignment: Alignment.center,
            child: new Text("填充区"),
          ),
        ],
      ),
    ),
  ),
);

你可以优先试试移除ListTile的contentPadding，这是最常见的问题根源。

内容的提问来源于stack exchange，提问作者spongyboss