Flutter 点击ExpansionPanel自动向下滚动功能实现问题咨询

问题原因 #

你当前滚动效果不符合预期的核心原因是滚动方法的调用时机错误：调用setState更新isOpen状态后，ExpansionPanel自带的展开动画还未执行完成，body的内容还没完全渲染到页面上，此时计算的滚动偏移量是基于旧的布局高度，自然达不到滚动到展开后组件底部的效果。另外你同时调用jumpTo(0)和animateTo还会出现跳闪的问题。

解决步骤 #

1. 首先给ExpansionPanel的body绑定全局key，用来动态获取渲染完成后的实际高度和位置，避免写死固定高度适配性差的问题：

// 页面State中定义全局key
final GlobalKey _expansionBodyKey = GlobalKey();

将key绑定到body的Column上：

body: Column(key: _expansionBodyKey, children: taskContains()),

2. 修改expandList方法，等待帧渲染完成、ExpansionPanel展开动画结束后再执行滚动逻辑：

void expandList() {
  if (isOpen) {
    // 等待当前帧渲染完成，确认状态更新后的布局已经计算
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      // 等待ExpansionPanel默认的200ms展开动画执行完成
      await Future.delayed(const Duration(milliseconds: 200));
      
      // 获取body渲染后的实际位置
      final RenderBox? bodyRender = _expansionBodyKey.currentContext?.findRenderObject() as RenderBox?;
      if (bodyRender == null) return;
      // 计算body在滚动容器中的偏移位置
      final scrollOffset = bodyRender.localToGlobal(
        Offset.zero,
        ancestor: controller.position.context.findRenderObject(),
      ).dy + bodyRender.size.height;
      
      // 执行滚动，删掉原来多余的jumpTo调用
      controller.animateTo(
        scrollOffset,
        duration: const Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
      );
    });
  }
}

额外优化建议 #

你现在在TextButton的onPressed和ExpansionPanelList的expansionCallback中写了重复的状态更新逻辑，直接删除TextButton的onPress实现即可，避免重复触发回调。

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