Flutter如何移除ExpansionTile内边距？设置titlePadding无效

问题 #

我在Flutter应用里用ExpansionTile组件，想把titlePadding和childrenPadding设为0来去掉内边距，但根本没效果。我的ListView.Builder代码如下：

Widget buildExpandableCatalog(List<Catalog> catalog) => ListView.builder(
      itemCount: catalog.length,
      itemBuilder: (context, index) {
        final catalogItem = catalog[index];
        return Column(
          children: [
            Card(
              elevation: 0,
              child: ExpansionTile(
                  onExpansionChanged: (a) {
                    if (catalogItem.hasChild != true) {},
                  leading: CircleAvatar(),
                  trailing: catalogItem.hasChild
                      ? Icon(Icons.arrow_drop_down)
                      : Icon(null),
                  title: Text(
                    catalogItem.name,
                    style: TextStyle(fontSize: 13),
                  ),
                  children: catalogItem.hasChild
                      ? <Widget>[
                          Column(
                              children: getNestedTitles(
                                  index, catalogItem.id, catalogItem.name))
                        ]
                      : [Column()]),
            ),
          ],
        );
      });

效果截图：

解决方法 #

1. 先清掉Card的默认边距 #

Card组件本身默认有外边距和内边距，这会导致你设置ExpansionTile的内边距后看起来还是有间距，给Card加上这两个属性：

Card(
  elevation: 0,
  margin: EdgeInsets.zero, // 清除外边距
  padding: EdgeInsets.zero, // 清除内边距
  child: ExpansionTile(
    // ... 原有属性
  ),
)

2. 强制设置ExpansionTile的内边距+消除leading与title的间距 #

除了设置titlePadding和childrenPadding为EdgeInsets.zero，还要注意leading和title之间默认有16px的间距，需要手动去掉：

ExpansionTile(
  titlePadding: EdgeInsets.zero,
  childrenPadding: EdgeInsets.zero,
  leading: Padding(
    padding: EdgeInsets.only(right: 0), // 移除leading和title之间的默认间距
    child: CircleAvatar(),
  ),
  title: Text(
    catalogItem.name,
    style: TextStyle(fontSize: 13),
  ),
  // ... 其他原有属性
)

3. 自定义展开组件（彻底控制样式） #

如果上面的方法还是达不到预期，不如自己用ListTile+AnimatedContainer实现展开效果，完全掌控所有边距：

// 示例代码，需要结合状态管理（比如StatefulWidget）
bool _isExpanded = false;

// 替换原来的ExpansionTile部分
ListTile(
  contentPadding: EdgeInsets.zero,
  leading: CircleAvatar(),
  title: Text(catalogItem.name, style: TextStyle(fontSize: 13)),
  trailing: catalogItem.hasChild 
      ? Icon(_isExpanded ? Icons.arrow_drop_up : Icons.arrow_drop_down)
      : null,
  onTap: () {
    if (catalogItem.hasChild) {
      setState(() => _isExpanded = !_isExpanded);
    }
  },
),
// 展开的内容
AnimatedContainer(
  duration: Duration(milliseconds: 300),
  height: _isExpanded ? null : 0,
  child: Column(
    children: getNestedTitles(index, catalogItem.id, catalogItem.name),
  ),
)

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