Flutter_学习记录_实现商品详情页Tab点击跳转对应锚点的demo

背景

如下图，要实现点击“推荐”跳转到对应的位置的功能 需要用用SingleChildScrollView代替ListView。

SingleChildScrollView 简介

ListView 组件默认内容比较多的时候具有延迟加载的特性。
SingleChildScrollView 不支持基于 Sliver 的延迟实例化模型，也就是使用 SingleChildScrollView 默认没有延迟加载的特性。
SingleChildScrollView 类似于 Android 中的 ScrollView，它只能接收一个子组件，由于默认没 有延迟加载的特性，所以可以刚开始就获取里面所有控件的位置，这样就可以很好的实现锚点效果。

SingleChildScrollView 锚点的实现流程

1. 为每一个锚点创建对应的 GlobalKey，
2. 将需要锚点的所有代码使用 SingleChildScrollView 包裹，
3. 控件关联对应的锚点key值
4. 使用 Scrollable 的 ensureVisible 方法跳转至每个 key: Scrollable.ensureVisible(对应key.currentContext as BuildContext)

代码实现

1. 在页面的controller上添加对应的key：

// tab点击跳转到对应的锚点：第一步GlobalKey gk1 = GlobalKey();GlobalKey gk2 = GlobalKey();GlobalKey gk3 = GlobalKey();

2. 视图上用 SingleChildScrollView 和 控件关联对应的key值:

// 自定义内容视图Widget _bodyWidget() {// tab点击跳转到对应的锚点：第二步， 用SingleChildScrollView代替ListViewreturn SingleChildScrollView(controller: controller.scrollController,child: Column(children: [Container(// tab点击跳转到对应的锚点：第三步， 控件关联对应的keykey: controller.gk1,color: Colors.orange,alignment: Alignment.center,height: Screenadapter.height(1800),child: Text("商品", style: TextStyle(fontSize: 100)),),Container(// tab点击跳转到对应的锚点：第三步， 控件关联对应的keykey: controller.gk2,color: Colors.blue,alignment: Alignment.center,height: Screenadapter.height(2800),child: Text("详情", style: TextStyle(fontSize: 100)),),Container(// tab点击跳转到对应的锚点：第三步， 控件关联对应的keykey: controller.gk3,color: Colors.red,alignment: Alignment.center,height: Screenadapter.height(3800),child: Text("推荐", style: TextStyle(fontSize: 100)),),],),);}

3. 点击事件实现跳转方法

			onTap: (){int index = value["id"];controller.updateTabsSelectIndex(index);// tab点击跳转到对应的锚点：第四步， 跳转实现if (index == 1) {Scrollable.ensureVisible(controller.gk1.currentContext as BuildContext,duration: Duration(milliseconds: 100));} else if (index == 2) {Scrollable.ensureVisible(controller.gk2.currentContext as BuildContext,duration: Duration(milliseconds: 100));} else {Scrollable.ensureVisible(controller.gk3.currentContext as BuildContext,duration: Duration(milliseconds: 100));}},