Flutter 使用ExpansionPanel实现可展开表格时头部与表头对齐异常

问题根因 #

对齐错位来自两个布局差异：

• ExpansionPanelList 组件默认给头部配置了左右内边距，同时右侧的展开箭头会占据固定的宽度空间
• 自定义表头和ExpansionPanel内部的头部Row权重分配不统一，第三列预留的空位大小不匹配

修复方案 #

统一表头和ExpansionPanel头部的布局规则，关闭组件默认内边距，手动控制边距和权重分配即可，完整修改后代码如下：

class TestPanel extends StatefulWidget {
  const TestPanel({Key? key}) : super(key: key);

  @override
  _TestPanelState createState() => _TestPanelState();
}

class _TestPanelState extends State<TestPanel> {
  bool _customTileExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      child: Column(
        children: [
          // 自定义表头
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: const <Widget>[
                Expanded(flex: 1, child: Text("Header 1")),
                Expanded(flex: 1, child: Text("Some Header 2")),
                // 预留箭头位置，flex值和下方头部对应
                Expanded(flex: 0.2, child: SizedBox.shrink()),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: 1,
              itemBuilder: (BuildContext context, int index) {
                return ExpansionPanelList(
                  animationDuration: const Duration(milliseconds: 1000),
                  dividerColor: Colors.grey,
                  elevation: 1,
                  // 移除默认头部内边距，手动控制和表头对齐
                  expandedHeaderPadding: EdgeInsets.zero,
                  children: [
                    ExpansionPanel(
                      body: Container(
                        padding: const EdgeInsets.all(10),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Some text here",
                              style: TextStyle(
                                  color: Colors.grey[700],
                                  fontSize: 15,
                                  letterSpacing: 0.3,
                                  height: 1.3),
                            ),
                          ],
                        ),
                      ),
                      headerBuilder: (BuildContext context, bool isExpanded) {
                        return Container(
                          // padding和表头保持完全一致
                          padding: const EdgeInsets.all(8.0),
                          child: Row(
                            children: const <Widget>[
                              Expanded(flex: 1, child: Text("Value 1")),
                              Expanded(flex: 1, child: Text("Some Value 2")),
                              // 预留箭头位置，flex和表头对应
                              Expanded(flex: 0.2, child: SizedBox.shrink()),
                            ],
                          ),
                        );
                      },
                      isExpanded: _customTileExpanded,
                    )
                  ],
                  expansionCallback: (int item, bool expanded) {
                    setState(() => _customTileExpanded = !expanded);
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点 #

• 给表头和ExpansionPanel头部的所有Expanded子项指定统一的flex权重，前两列占比相同，第三列固定预留箭头位置，保证两边列宽完全匹配
• 设置expandedHeaderPadding: EdgeInsets.zero移除ExpansionPanel自带的默认头部内边距，手动设置头部padding和表头完全一致
• 调整后无论窗口宽度如何变化，两部分的列宽都会自动同步对齐

修复后运行效果示意：

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