Flutter开发：如何使容器与ExpansionTile中卡片高度匹配

要让Stack布局里的红色Container高度和左侧包含ExpansionTile及卡片的容器高度完全匹配，可以通过GlobalKey获取内容容器的实时高度来实现，具体步骤如下：

1. 定义GlobalKey #

在你的State类中添加一个GlobalKey，用来绑定左侧的内容容器：

final GlobalKey _contentKey = GlobalKey();

2. 绑定内容容器 #

将左侧的Padding组件与这个GlobalKey关联：

Padding(
  key: _contentKey, // 绑定key
  padding: const EdgeInsets.only(right: 20, left: 30),
  child: Column(
    children: [
      // 原有姓名、等级等组件...
      const SizedBox(height: 15),
      // 修正原代码语法错误，补全闭合括号
      ExpansionTile(
        title: const Text('Phone'),
        children: List.generate(state.user.boss.length, (index) {
          return const Card(
            child: Text('+91 84785783458'),
          );
        }),
      ),
    ],
  ),
)

3. 同步红色Container高度 #

修改红色Container的height属性，通过GlobalKey获取内容容器的实时高度：

Container(
  color: Colors.red,
  width: 20,
  // 获取内容容器的高度，默认值设为0避免布局错误
  height: _contentKey.currentContext?.size?.height ?? 0,
  child: const Text('data'),
)

原理说明 #

当ExpansionTile展开或收起时，内容容器的高度会发生变化，Flutter会触发重新build，此时GlobalKey会获取到最新的容器高度，红色Container的高度也会自动同步更新，实现两者高度完全匹配的效果。

完整代码示例 #

// 假设在State类中
final GlobalKey _contentKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return Container(
    child: Stack(
      children: [
        Padding(
          key: _contentKey,
          padding: const EdgeInsets.only(right: 20, left: 30),
          child: Column(
            children: [
              Row(
                children: [
                  const Flexible(
                    child: Text('Jhon Doe'),
                  ),
                  Flexible(
                    child: Container(
                      height: 22,
                      width: 70,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        color: const Color(0XFF00B383),
                      ),
                      child: const Center(
                        child: Padding(
                          padding: EdgeInsets.only(bottom: 1),
                          child: Text('User'),
                        ),
                      ),
                    ),
                  )
                ],
              ),
              const Text('Level'),
              const Row(
                children: [
                  Icon(
                    Icons.level,
                    size: 18,
                    color: Color(0XFF3F414E),
                  ),
                  SizedBox(width: 5),
                  Text('Boss'),
                ],
              ),
              InkWell(
                onTap: () {},
                child: const Text('Detailed'),
              ),
              const SizedBox(height: 15),
              ExpansionTile(
                title: const Text('Phone'),
                children: List.generate(state.user.boss.length, (index) {
                  return const Card(
                    child: Text('+91 84785783458'),
                  );
                }),
              ),
            ],
          ),
        ),
        Container(
          color: Colors.red,
          width: 20,
          height: _contentKey.currentContext?.size?.height ?? 0,
          child: const Text('data'),
        )
      ],
    ),
  );
}

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