flutter页面内跳转——锚点效果的实现

问题描述

点击一个按钮，跳转到页面对应的内容区域，类似于HTML中的target跳转，也就是锚点标签。
在HTML中，此种效果的实现是不需要手动计算元素高度的，所以我在flutter实现的首先原则为不手动计算组件高度。

解决方法

一. 第三方插件

1. indexed_list_view

该组件需要创建controller，使用controller中的方法，根据索引值来跳转到ListView组件中的某一项。
缺点是没有属性shrinkwrap，布局时需要注意。在其git社区，也有很多人请求官方加入这个属性。
还有一点就是，跳转的锚点必须在ListView中。

2. scrollable_positioned_list

用法同上，缺点也同上。

二. 笔者采用的方法

1. 思路

将需要锚点的所有代码使用SingleChildScrollView包裹，为每一个锚点创建对应的GlobalKey，使用Scrollable的ensureVisible方法跳转至每个key。

2. demo

  GlobalKey key1 = GlobalKey();
  GlobalKey key2 = GlobalKey();
  GlobalKey key3 = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Row(
            children: [
              ElevatedButton(
                  onPressed: () {
                    Scrollable.ensureVisible(
                        key1.currentContext as BuildContext);
                  },
                  child: Text('grey')),
              ElevatedButton(
                  onPressed: () {
                    Scrollable.ensureVisible(
                        key2.currentContext as BuildContext);
                  },
                  child: Text('green')),
              ElevatedButton(
                  onPressed: () {
                    Scrollable.ensureVisible(
                        key3.currentContext as BuildContext);
                  },
                  child: Text('blue')),
            ],
          ),
          Container(
            height: 300,
            key: key1,
            color: Colors.grey,
          ),
          Container(
            height: 300,
            key: key2,
            color: Colors.green,
          ),
          Container(
            height: 300,
            key: key3,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }

类似写法即可实现锚点效果。需要注意的是，使用GlobalKey时，每一个key只能对应一个组件，绝不能重复使用。

3. 扩展

按照上面demo的思路，你就可以异步创建锚点了。比如，你需要使用ListView创建一些内容，你需要一个按钮列表来分别到达每个锚点，而列表渲染使用的数据是异步的。在数据请求完成后你就可以使用循环来创建对应的GlobalKey，并且将他们存入你已经在init阶段就预定的globalKeys数组中。接下来，在ListView的itemBuilder中，你就可以使用索引，来对应每一个锚点了。

如果对你有帮助的话，请给我一个赞吧