Flutter ExpansionTile组件高度无法按UI要求管理问题求助

折叠状态高度控制 #

原生ExpansionTile没有直接的折叠高度配置项，你可以给title嵌套一个固定高度的Container，同时调整contentPadding消除默认内边距影响，精准控制折叠时的整体高度：

ExpansionTile(
  title: Container(
    height: 56, // 替换成UI要求的折叠高度
    alignment: Alignment.centerLeft,
    child: Text("你的标题文本"),
  ),
  contentPadding: EdgeInsets.zero,
  // 其他必要属性...
)

展开状态高度控制 #

展开后的内容区域，直接给内容容器设置固定高度，搭配SingleChildScrollView避免内容过长时溢出：

ExpansionTile(
  title: Text("你的标题文本"),
  children: [
    Container(
      height: 240, // 替换成UI要求的展开高度
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: SingleChildScrollView(
        child: Text("这里是展开的内容，即使内容很长也能滚动展示"),
      ),
    )
  ],
)

完全自定义（彻底摆脱原生限制） #

如果原生组件灵活性不够，直接用GestureDetector+AnimatedContainer实现自定义展开折叠逻辑，高度完全由你掌控：

bool _expanded = false;

// 在build方法中使用
GestureDetector(
  onTap: () => setState(() => _expanded = !_expanded),
  child: Column(
    children: [
      // 自定义头部（固定高度）
      Container(
        height: 56,
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("自定义标题"),
            Icon(_expanded ? Icons.expand_less : Icons.expand_more),
          ],
        ),
      ),
      // 展开内容的动画容器
      AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        height: _expanded ? 240 : 0,
        curve: Curves.easeInOut,
        child: _expanded
            ? Container(
                padding: EdgeInsets.all(16),
                child: Text("自定义展开内容"),
              )
            : null,
      ),
    ],
  ),
)

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