Flutter锚点标签插件anchor_tabs的使用

介绍

anchor_tabs 是一个用于实现类似锚点标签面板的 Flutter 插件。这个插件特别适用于长列表滚动时，需要通过按钮帮助用户导航到不同滚动位置的场景。同时，当用户滚动时，选中的按钮也会自动更新。

特点

• Tab 按钮滚动到指定块：点击 Tab 按钮时，页面会滚动到对应的块。
• 滚动时更新选中的 Tab 按钮：当用户滚动页面时，选中的 Tab 按钮会自动更新。

视频教程

你可以观看以下视频了解如何使用这个插件：

• https://www.youtube.com/watch?v=CPql7o1utiM

示例演示

开始使用

添加依赖

在你的 pubspec.yaml 文件中添加 anchor_tabs 依赖：

dependencies:
  anchor_tabs: ^0.0.9

使用示例

简单示例

import 'package:anchor_tabs/anchor_tabs.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: Builder(
        builder: (context) => Scaffold(
          appBar: AppBar(
            leading: IconButton(
              icon: const Icon(Icons.build),
              onPressed: () => Navigator.of(context).push<dynamic>(
                MaterialPageRoute<dynamic>(
                  builder: (context) => TestAnchorTabPanelBuilder(),
                ),
              ),
            ),
            title: const Text('Anchor tabs example'),
            actions: [
              IconButton(
                icon: const Icon(Icons.add),
                onPressed: () => Navigator.push<dynamic>(
                  context,
                  MaterialPageRoute<dynamic>(
                      builder: (context) => const MultiScrollExample()),
                ),
              )
            ],
          ),
          body: const SimpleExample(),
        ),
      ));
}

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

  @override
  Widget build(BuildContext context) {
    final DateTime today = DateTime.now();

    final List<String> tabsText = [
      'Today',
      'Yesterday',
    ];

    for (int i = 2; i < 10; i++) {
      final DateTime pastDate = today.subtract(Duration(days: i));
      tabsText.add('${pastDate.day}/${pastDate.month}');
    }

    final List<Widget> tabs = [];
    final List<Widget> body = [];

    for (final element in tabsText) {
      // 创建一个 Tab 项
      tabs.add(Text(element));

      // 创建一个目标项
      body.add(
        ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          controller: ScrollController(),
          itemCount: 40,
          itemBuilder: (BuildContext ctxt, int i) => Text(
            '$element  $i',
            style: Theme.of(ctxt).textTheme.headlineSmall,
          ),
        ),
      );
    }

    return Container(
      margin: const EdgeInsets.all(10),
      child: Column(
        children: [
          const Text('Simple example of anchor tabs'),
          Expanded(
              child: AnchorTabPanel(
            tabs: tabs,
            body: body,
          )),
        ],
      ),
    );
  }
}

多个滚动示例

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

  @override
  Widget build(BuildContext context) {
    const int columnNumber = 6;
    final List<String> tabsTextList = [
      'a',
      'b',
      'c',
      'd',
      'e',
      'f',
      'g',
      'h',
      'i',
      'j'
    ];

    final List<Widget> tabs = [];
    final List<Widget> body = [];

    for (final String tabText in tabsTextList) {
      // 创建一个 Tab 项
      tabs.add(
        Text(tabText),
      );

      // 创建一个目标项
      body.add(
        SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            controller: ScrollController(),
            itemCount: 40,
            itemBuilder: (_, int i) {
              final List<Widget> columns = [];
              for (int c = 0; c < columnNumber; c++) {
                columns.add(
                  Text(
                    '$tabText column: $c item: $i ',
                    style: Theme.of(context).textTheme.headlineSmall,
                  ),
                );
              }

              return SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: columns,
                ),
              );
            },
          ),
        ),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('Multiple scrolls'),
      ),
      body: AnchorTabPanel(tabs: tabs, body: body),
    );
  }
}

使用 AnchorTabPanelBuilder

class TestAnchorTabPanelBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Anchor Tab Panel Test'),
        ),
        body: AnchorTabPanelBuilder(
          tabBuilder: (BuildContext context, int index) {
            debugPrint('Tab builder called for index: $index');
            return Text('Tab ${index + 1}');
          },
          bodyBuilder: (BuildContext context, int index) {
            debugPrint('Body builder called for index: $index');
            return Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              color: index % 2 == 0 ? Colors.orange : Colors.green,
              child: Center(
                child: Text(
                  'Body ${index + 1}',
                  style: const TextStyle(
                    fontSize: 24,
                    color: Colors.white,
                  ),
                ),
              ),
            );
          },
          itemCount: 100,
          animationDuration: const Duration(milliseconds: 1000),
          animationCurve: Curves.ease,
          tabHeight: 35,
          selectedTabHeight: 40,
        ),
      );
}

其他信息

• AnchorTabPanel 组件还提供了配置 Tab 按钮大小等其他字段。
• 为了提高性能，anchor_tabs 还提供了一个实验性的 AnchorTabPanelBuilder，它使用 ListView 在接近滚动位置时构建身体元素。

参与贡献

如果你在使用过程中遇到问题或有改进建议，欢迎在 GitHub 上提交 issue 或 pull request：

• https://github.com/ivofernandes/anchor_tabs

发布包到 pub.dev

dart pub publish

希望这些内容对你有所帮助！如果有任何问题或建议，欢迎随时反馈。