Flutter ExpansionTile：Android与Web端内边距差异问题排查

核心原因 #

ExpansionTile在Flutter的Web和Android平台存在默认内边距、布局参数的差异，再加上容器未明确宽度约束，导致Android端显示尺寸异常。

具体解决方法 #

1. 覆盖ExpansionTile默认内边距 #

ExpansionTile自带平台差异化的tilePadding，直接设置统一值消除差异：

child: ExpansionTile(
  tilePadding: EdgeInsets.only(left: 12, right: 12), // 和外层Padding对齐，替换默认值
  title: Row(
    // 原有标题代码
  ),
  // 其他ExpansionTile属性
)

2. 给Container添加宽度约束 #

让容器自适应父容器宽度，避免Android端过度拉伸：

child: Container(
  width: double.infinity, // 强制占满父容器宽度
  padding: EdgeInsets.all(0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(5),
  ),
  child: ExpansionTile(
    // 原有ExpansionTile代码
  ),
)

3. 统一ListView布局约束 #

确保ListView在不同平台表现一致，添加shrinkWrap和统一padding：

body: ListView.builder(
  shrinkWrap: true,
  padding: EdgeInsets.zero, // 或自定义统一的外层padding
  itemBuilder: (context, index) {
    return Padding(
      padding: const EdgeInsets.only(left: 12, right: 12, top: 6, bottom: 6),
      child: Container(
        // 修改后的容器代码
      ),
    );
  },
)

完整修改后的代码片段 #

body: ListView.builder(
  shrinkWrap: true,
  padding: EdgeInsets.zero,
  itemBuilder: (context, index) {
    return Padding(
      padding: const EdgeInsets.only(left: 12, right: 12, top: 6, bottom: 6),
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.all(0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
        ),
        child: ExpansionTile(
          tilePadding: EdgeInsets.only(left: 12, right: 12),
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                thisListName,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              IconButton(
                padding: EdgeInsets.only(left: 10, right: 10),
                constraints: BoxConstraints(),
                onPressed: () {},
                icon: const Icon(Icons.edit),
                color: Colors.white,
              )
            ],
          ),
          // 展开内容部分代码
        ),
      ),
    );
  },
)

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