Flutter高级列表组件插件super_sliver_list的使用

SuperSliverList和SuperListView是Flutter中SliverList和ListView的替代品，提供了更好的性能和额外的功能。以下是该插件的主要特点、基本用法以及一些高级功能。

主要特点

• 快速滚动大量具有不同高度的项目：当快速滚动浏览大量具有不同高度的项目时，SliverList的性能会显著下降，而SuperSliverList通过不同的布局算法可以处理几乎无限数量的具有可变高度的项目，不会出现性能问题。
• 跳转或动画到特定项目的能力：SliverList不提供任何方式来跳转或动画到特定索引的项目，而SuperSliverList可以可靠地跳转和动画到特定项目，即使该项目不在视口内且尚未构建或布局。
• 平滑且可预测的滚动条行为：SuperSliverList确保了滚动条的行为更加平滑和可预测。

基本用法

使用SuperListView

SuperListView是ListView的直接替代品，你可以像使用ListView一样使用它：

SuperListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)

使用SuperSliverList

SuperSliverList是SliverList的直接替代品，适用于任何CustomScrollView配置：

CustomScrollView(
  slivers: <Widget>[
    SliverPadding(
      padding: const EdgeInsets.all(20.0),
      sliver: SuperSliverList(
        delegate: SliverChildListDelegate(
          <Widget>[
            const Text("I'm dedicating every day to you"),
            const Text('Domestic life was never quite my style'),
            const Text('When you smile, you knock me out, I fall apart'),
            const Text('And I thought I was so smart'),
          ],
        ),
      ),
    ),
  ],
)

跳转和动画到特定项目

可以通过ListController来实现跳转或动画到特定项目：

class _MyState extends State<MyWidget> {
  final _listController = ListController();
  final _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return SuperListView.builder(
      listController: _listController,
      controller: _scrollController,
      itemCount: 1000,
      itemBuilder: (context, index) {
        return ListTile(title: Text('Item $index'));
      },
    );
  }

  void jumpToItem(int index) {
    _listController.jumpToItem(
      index: index,
      scrollController: _scrollController,
      alignment: 0.5,
    );
  }

  void animateToItem(int index) {
    _listController.animateToItem(
      index: index,
      scrollController: _scrollController,
      alignment: 0.5,
      // You can provide duration and curve depending on the estimated
      // distance between currentPosition and the target item position.
      duration: (estimatedDistance) => Duration(milliseconds: 250),
      curve: (estimatedDistance) => Curves.easeInOut,
    );
  }
}

高级用法

改善高度估算

你可以注册自定义回调来估计项目的高度，这对于你大致知道每个项目高度的情况非常有用：

SuperSliverList(
    delegate: /*...*/,
    estimateExtent: (index) => 100.0, // Provide your own extent estimation
)

预计算项目高度

如果需要，SuperSliverList可以异步预计算项目的高度。为此，继承ExtentPrecalculationPolicy并将其提供给SuperSliverList：

class MyPrecalculationPolicy extends ExtentPrecalculationPolicy {
  @override
  bool shouldPrecaculateExtents(ExtentPrecalculationContext context)  {
    return context.numberOfItems < 100;
  }
}

return SuperSliverList(
    delegate: /*...*/,
    extentPrecalculationPolicy: myPolicy,
)

示例代码

以下是一个完整的示例应用，展示了如何使用SuperSliverList：

import "dart:async";
import "package:flutter/foundation.dart";
import "package:logging/logging.dart";
import "package:pixel_snap/widgets.dart";
import "shell/app.dart";

void main() {
  Logger.root.onRecord.listen((record) {
    Zone.current.print("${record.level.name}: ${record.message}");
  });
  hierarchicalLoggingEnabled = true;
  WidgetsFlutterBinding.ensureInitialized();
  
  // Right now the debug bar doesn't work nicely with safe area so
  // only enable it on desktop platform.
  Widget app = const ExampleApp();
  if (defaultTargetPlatform != TargetPlatform.iOS &&
      defaultTargetPlatform != TargetPlatform.android) {
    app = PixelSnapDebugBar(child: app);
  }
  runApp(app);
}

更多示例代码可以在GitHub仓库中找到。你也可以查看在线示例以了解其实际效果。