Flutter锚点定位插件flutter_anchorlable的使用

flutter_anchorlable 是一个用于Flutter的插件，它提供了可自由滚动的小部件及其控制器，并以键作为锚点。通过这个插件，你可以轻松实现页面内滚动到指定位置的功能。

安装

在你的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_anchorlable: <latest_version>

然后，在你的库中添加以下导入：

import 'package:flutter_anchorlable/flutter_anchorlable.dart';

使用

创建控制器

AnchorlableController 是一个控制器，它允许你滚动由附加客户端拥有的小部件。通过指定 initialAnchorKey，可以指定附加客户端的初始滚动位置。

final controller = AnchorlableController();

跳转到指定锚点

jumpToAnchor 方法可以让页面直接跳转到指定的锚点。

controller.jumpToAnchor(anchorKey);

动画滚动到指定锚点

animateToAnchor 方法可以为带有目标键的小部件执行动画滚动。如果你不确定选择哪种曲线（Curve），可以参考 Flutter官方文档。

onPressed: () async {
  await controller.animateToAnchor(anchor,
                duration: const Duration(seconds: 1),
                curve: Curves.fastOutSlowIn);
}

垂直排列小部件

AnchorlableScrollColumn 可以用来垂直排列小部件。它需要一个 Key 和 AnchorlableController。通过使用 AnchorlableController，可以滚动带有 Key 的小部件。

final controller = AnchorlableController();
const anchorKey = GlobalObjectKey('anchor');
AnchorlableScrollColumn(
  controller: controller,
  children: [
    Container(
      child: Text(
        key: anchorKey,
        'Widgets you want to anchor',
      ),
    ),
    // 其他子组件
  ],
);

水平排列小部件

AnchorlableScrollRow 是 AnchorlableScrollColumn 的横向版本。

final controller = AnchorlableController();
const anchorKey = GlobalObjectKey('anchor');
AnchorlableScrollRow(
  controller: controller,
  children: [
    Container(
      child: Text(
        key: anchorKey,
        'Widgets you want to anchor',
      ),
    ),
    // 其他子组件
  ],
);

与 CustomScrollView 配合使用

AnchorlableSliverColumn 是一个可以与 CustomScrollView 一起使用的锚点小部件。与 AnchorlableScrollColumn 不同，它需要一些额外的工作来处理 AnchorlableController。

final controller = AnchorlableController();
const anchorKey = GlobalObjectKey('anchor');
CustomScrollView(
  controller: controller,
  slivers: [
    AnchorlableSliverColumn(
      children: [
        Container(
          child: Text(
            key: anchorKey,
            'Widgets you want to anchor',
          ),
        ),
        // 其他子组件
      ],
    ),
  ],
);

AnchorlableSliverRow 是 AnchorlableSliverColumn 的横向版本。

示例代码

下面是一个完整的示例，展示了如何使用 flutter_anchorlable 实现一个简单的个人作品集网站：

import 'package:flutter/material.dart';
import 'package:flutter_anchorlable/flutter_anchorlable.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hiyoko's Portfolio",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final anchorlableBodyController = AnchorlableController();

    Widget animateJumpButton(String data, GlobalKey anchor) => TextButton(
          onPressed: () async {
            await anchorlableBodyController.animateToAnchor(anchor,
                duration: const Duration(seconds: 1),
                curve: Curves.fastOutSlowIn);
          },
          child: Text(
            data,
            style: const TextStyle(fontSize: 30, color: Colors.black),
          ),
        );

    Widget Footer() {
      return Container(
        height: 100,
        width: MediaQuery.of(context).size.width,
        key: contactKey,
        alignment: Alignment.bottomLeft,
        color: Colors.black,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              'Contact Me',
              style: TextStyle(color: Colors.white, fontSize: 32),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                IconButton(
                  iconSize: 50,
                  icon: const Icon(Icons.web, color: Colors.white),
                  onPressed: () async {
                    await launchUrl(Uri.parse('https://zenn.dev/antman'));
                  },
                ),
                IconButton(
                  iconSize: 50,
                  icon: const Icon(Icons.github, color: Colors.white),
                  onPressed: () async {
                    await launchUrl(Uri.parse('https://github.com/yama-yeah'));
                  },
                ),
              ],
            ),
          ],
        ),
      );
    }

    Widget Header() {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text("Hiyoko's Portfolio", style: TextStyle(fontSize: 32)),
          Padding(
            padding: const EdgeInsets.only(right: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                animateJumpButton('works', worksKey),
                animateJumpButton('Intro', introKey),
                animateJumpButton('Contact', contactKey),
              ],
            ),
          ),
        ],
      );
    }

    Widget work(String data, String imageUrl, String url) => TextButton(
          onPressed: () async => await launchUrl(Uri.parse(url)),
          child: Column(
            children: [
              Text(data, style: const TextStyle(fontSize: 48)),
              Image.network(
                imageUrl,
                width: 400,
              ),
            ],
          ),
        );

    return Scaffold(
      body: AnchorlableScrollColumn(
        shrinkWrap: true,
        controller: anchorlableBodyController,
        children: [
          Header(),
          const SizedBox(height: 60),
          const Text(
            key: introKey,
            'Hello My name is Hiyoko!!!',
            style: TextStyle(fontSize: 32),
          ),
          const Text(
            'I like a Humbugger!!!',
            style: TextStyle(fontSize: 32),
          ),
          const Text(
            'Welcome to my site',
            style: TextStyle(fontSize: 32),
          ),
          const SizedBox(height: 60),
          SizedBox(
            height: 1100,
            child: Column(
              key: worksKey,
              children: [
                const Text(
                  'There are My Works',
                  style: TextStyle(fontSize: 32),
                ),
                Row(
                  children: [
                    work(
                      'Maho',
                      'https://user-images.githubusercontent.com/82094614/190878311-8049c43e-360f-449c-85d2-3958aa5754f.png',
                      'https://github.com/yama-yeah/Maho',
                    ),
                    work(
                      'glassmorphism_widget',
                      'https://user-images.githubusercontent.com/82094614/147371522-76db6662-3945-4470-bad3-1dfec306ccd1.png',
                      'https://github.com/yama-yeah/glassmorphism_widgets',
                    ),
                    work(
                      'flutter_anchorlable',
                      'https://user-images.githubusercontent.com/82094614/190932053-f3228df0-d264-4427-a17b-bce43f130fa7.gif',
                      'https://github.com/yama-yeah/flutter_anchorlable',
                    ),
                  ],
                ),
              ],
            ),
          ),
          const SizedBox(height: 60),
          Footer(),
        ],
      ),
    );
  }
}

final anchorlableBodyController = AnchorlableController();
const introKey = GlobalObjectKey('intro');
const worksKey = GlobalObjectKey('works');
const contactKey = GlobalObjectKey('contact');