Flutter列表滚动到指定Widget位置

使用 Scrollable.ensureVisible(context); 完成滚动

SingleChildScrollView(
  child: Column(
    children: [
      _item1(),
      _item2(),
      _item2(),
    ],
  ),
)

先给列表中的每个item设置key

Widget _item1() {
  return Container(
    key: const GlobalObjectKey(1),
    //...
  );
}

Widget _item2() {
  return Container(
    key: const GlobalObjectKey(2),
    //...
  );
}

Widget _item3() {
  return Container(
    key: const GlobalObjectKey(3),
    //...
  );
}

点击触发滚动

onTap: (int key) {
  if (GlobalObjectKey(key).currentContext != null) {
    Scrollable.ensureVisible(GlobalObjectKey(key).currentContext!);
  }
}

Scrollable.ensureVisible传入指定GlobalObjectKey的currentContext，即可滚动到指定Widget的位置。

ensureVisible也可以设置Curve动画

image.png

这里列表使用的组件是SingleChildScrollView而非ListView，因为ListView只会渲染当前屏幕中的item，当item划出屏幕就会被回收，item的currentContext也就获取不到了，因而无法完成滚动