flutter anchor_scroll_view

这个包实现了一个支持锚点的 ScrollController。也就是说，AnchorScrollController 支持滚动到索引位置，并在用户滚动时监听索引变化。

特点

  • 滚动到索引

    Screenshot

  • 监听索引变化

    Screenshot

入门

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  ...
  anchor_scroll_view: <latest_version>

在您的库中添加以下导入

import 'package:anchor_scroll_controller/anchor_scroll_controller.dart';
import 'package:anchor_scroll_controller/anchor_scroll_wrapper.dart';

初始化一个 AnchorScrollController 对象，并将其用作 ListView 的 ScrollController，并将 ListView 中的项目用 AnchorItemWrapper 包裹起来。

late final AnchorScrollController _scrollController;

@override
void initState() {
  super.initState();

  _scrollController = AnchorScrollController(
    onIndexChanged: (index) {
      _tabController?.animateTo(index);
    },
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("GeneralScrollViewWidget"),
    ),
    body: Column(
      children: [
        Expanded(
          child: ListView.builder(
            controller: _scrollController,
            itemCount: length,
            itemBuilder: (context, index) => AnchorItemWrapper(
              key: ValueKey(index),
              index: index,
              controller: _scrollController,
              child: Container(
                height: 50.0 + Random().nextInt(50),
                color: Colors.primaries[index % Colors.primaries.length],
                alignment: Alignment.center,
                child: Text(index.toString(),
                            style: const TextStyle(fontSize: 24, color: Colors.black)),
              ),
            )
          ),
        ),
        ... // omit more code
      ],
    )
  );

GitHub

查看 Github