Infinite List Flutter 插件在鸿蒙上的使用指南-优快云博客

插件介绍

Infinite List 是一个展示"无限列表"UX模式的 Flutter 示例应用，它实现了一个对用户来说看似连续，但内部实际上是分页加载的列表体验。这种模式广泛应用于各种移动应用中，如购物目录、搜索引擎结果和社交媒体客户端。

该插件的核心特点包括：

按需分页加载数据
智能缓存管理（自动清理距离当前位置过远的数据）
使用 Provider 进行状态管理
展示如何将 UI 代码与复杂的异步和分页逻辑分离
演示 Provider 包中 Selector 组件的最佳实践

使用步骤

1. 包的引入

由于此三方库为自定义修改版本，需要通过 Git 形式引入。在您的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖配置：

dependencies:
  infinite_list:
    git:
      url: "https://atomgit.com/"
      path: "packages/infinite_list/infinite_list"
  provider: ^6.0.2

2. 基本使用

初始化 Catalog

首先，在应用的入口处提供 Catalog 实例：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:infinite_list/catalog.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<Catalog>(
      create: (context) => Catalog(),
      child: MaterialApp(
        title: 'Infinite List Sample',
        theme: ThemeData.light(useMaterial3: true),
        home: const MyHomePage(),
      ),
    );
  }
}

实现无限列表视图

使用 ListView.builder 和 Selector 组件实现无限列表：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Infinite List Sample'),
      ),
      body: Selector<Catalog, int?>(
        // 只监听 Catalog 的 itemCount 属性
        selector: (context, catalog) => catalog.itemCount,
        builder: (context, itemCount, child) => ListView.builder(
          // itemCount 为 null 时表示无限列表
          itemCount: itemCount,
          padding: const EdgeInsets.symmetric(vertical: 18),
          itemBuilder: (context, index) {
            var catalog = Provider.of<Catalog>(context);

            // 同步获取指定索引的项目
            return switch (catalog.getByIndex(index)) {
              Item(isLoading: true) => const LoadingItemTile(),
              var item => ItemTile(item: item)
            };
          },
        ),
      ),
    );
  }
}

实现项目和加载项组件

class ItemTile extends StatelessWidget {
  const ItemTile({super.key, required this.item});

  final Item item;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                item.title,
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              const SizedBox(height: 8),
              Text(item.description),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 24,
                width: 150,
                child: Container(color: Colors.grey[300]),
              ),
              const SizedBox(height: 8),
              SizedBox(
                height: 16,
                width: double.infinity,
                child: Container(color: Colors.grey[200]),
              ),
              const SizedBox(height: 8),
              SizedBox(
                height: 16,
                width: double.infinity,
                child: Container(color: Colors.grey[200]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 核心 API 详解

Catalog 类

Catalog 是无限列表的核心类，继承自 ChangeNotifier：

class Catalog extends ChangeNotifier {
  // 获取指定索引的项目
  Item getByIndex(int index) {
    // 内部逻辑：检查缓存 -> 启动加载 -> 返回结果
  }

  // 其他内部方法...
}

Item 类

表示列表中的单个项目：

class Item {
  final String id;
  final String title;
  final String description;
  final bool isLoading;

  // 构造函数和静态方法...
}

fetchPage 函数

从 API 获取分页数据：

Future<ItemPage> fetchPage(int startingIndex) async {
  // 模拟 API 请求
  await Future.delayed(const Duration(milliseconds: 500));

  // 返回分页数据
}

总结

Infinite List Flutter 插件为鸿蒙系统上的 Flutter 应用提供了一个优雅的无限列表解决方案。通过智能的分页加载和缓存管理，它能够高效地处理大量数据，同时保持流畅的用户体验。

使用此插件时，需要注意以下几点：

通过 Git 形式引入自定义修改版本的插件
使用 Provider 进行状态管理
利用 Selector 组件优化性能，只监听必要的状态变化
实现适当的加载状态 UI，提升用户体验

Infinite List 插件的设计模式可以作为其他类似功能实现的参考，特别是在需要处理大量数据或网络请求的场景中。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.youkuaiyun.com