Flutter锚点滚动插件anchor_point_scroll_view的使用

Flutter锚点滚动插件anchor_point_scroll_view的使用

效果

示例代码

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<AnchorPointScrollViewState> _anchorKey = GlobalKey();
  int _currentIndex = 0;

  _onPress(int index) {
    // 跳转到指定索引的视图
    _anchorKey.currentState?.jumpToIndex(index);
    // 如果需要动画效果，可以使用 animatedTo 方法
    // _anchorKey.currentState?.animatedTo(index, duration: const Duration(milliseconds: 150), curve: Curves.easeInOut);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: [
        // 按钮列表，用于选择要跳转到的索引
        Wrap(
          children: List.generate(10, (index) {
            return TextButton(
              onPressed: () => _onPress(index),
              child: Text(
                index.toString(),
                style: TextStyle(
                  color: index == _currentIndex ? Colors.red : Colors.grey,
                  fontSize: index == _currentIndex ? 24 : 12,
                ),
              ),
            );
          }),
        ),
        // 使用锚点滚动视图
        Expanded(
          child: AnchorPointScrollView(
            key: _anchorKey,
            // 当滚动到某个视图时触发的回调
            onIndexChanged: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            children: List.generate(10, (index) {
              return Container(
                height: 80.0 * (index + 1),
                color: Colors.primaries[index % Colors.primaries.length],
                alignment: Alignment.center,
                child: Text(index.toString(),
                    style: const TextStyle(fontSize: 28, color: Colors.black)),
              );
            }),
          ),
        ),
      ]),
    );
  }
}

参数

参数名 描述 是否必传
children widget 列表 是
excludeOffset 不参与计算定位的偏移量 否
key 组件key 否
onIndexChanged 滚动到对应widget 的回调 否
onScroll 滚动过程的回调 否

可调用方法

  • 滚动到指定下标组件的位置
jumpToIndex(int index);

animatedTo(
    int index, {
    required Duration duration,
    required Curve curve,
  })

更多关于Flutter锚点滚动插件anchor_point_scroll_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter锚点滚动插件anchor_point_scroll_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


anchor_point_scroll_view 是一个 Flutter 插件，用于实现类似锚点滚动的功能。它允许你在滚动视图中定义一些锚点，并在用户滚动时自动滚动到这些锚点位置。这个插件非常适合用于需要分段显示内容的场景，例如带有章节的长篇文章、带有分类的商品列表等。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 anchor_point_scroll_view 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  anchor_point_scroll_view: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用插件

下面是一个简单的示例，展示如何使用 anchor_point_scroll_view 插件来实现锚点滚动功能。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Anchor Point Scroll View Example'),
        ),
        body: AnchorPointScrollView(
          anchorPoints: [
            AnchorPoint(id: 'section1', child: Section(title: 'Section 1')),
            AnchorPoint(id: 'section2', child: Section(title: 'Section 2')),
            AnchorPoint(id: 'section3', child: Section(title: 'Section 3')),
          ],
          onAnchorPointReached: (id) {
            print('Reached anchor point: $id');
          },
        ),
      ),
    );
  }
}

class Section extends StatelessWidget {
  final String title;

  Section({required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: Colors.grey[200],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 16),
          Text('Content for $title goes here.'),
          SizedBox(height: 16),
          Text('More content for $title...'),
        ],
      ),
    );
  }
}
回到顶部