Flutter动画排行榜插件 animated_leaderboard 的使用

animated_leaderboard 是一个用于 Flutter 应用的交互式动画排行榜小部件。该包允许您轻松集成动态排行榜 UI，具有可自定义的用户排名、过滤器和点击操作，为用户提供流畅且吸引人的体验。

特性

• 交互性：点击用户卡片以触发动作。
• 动画效果：平滑的过渡和滚动动画。
• 可定制性：易于配置以适应您的应用设计。
• 响应式：适应不同的屏幕尺寸和设备。

截图示例

以下是 AnimatedLeaderboard 的一些截图示例：

安装

要在 Flutter 项目中使用此包，请将其添加到 pubspec.yaml 文件中：

dependencies:
  animated_leaderboard: ^0.1.3

然后运行 flutter pub get 来安装该包。

使用方法

要使用 AnimatedLeaderboard 小部件，请在您的 Flutter 小部件中添加以下代码：

import 'package:animated_leaderboard/animated_leaderboard.dart';

AnimatedLeaderboard( 
    scrollController: _scrollController,
    topContainer: _topContainer,
    filterLabel1: 'Weekly',
    filterLabel2: 'All-time',
    users: _users,
    myId: _myId,
    isFirstFilterSelected: _isFirstFilterSelected,
    onFilterTap: _onFilterTap,
    radius: 20,
)

参数说明

• scrollController: 控制滚动行为的 ScrollController。
• topContainer: 表示顶部容器位置的 double，用于动画。
• filterLabel1 & filterLabel2: 过滤器标签的字符串。
• users: 要在排行榜中显示的用户列表。
• myId: 当前用户的 ID。
• isFirstFilterSelected: 布尔值，指示所选过滤器。
• onFilterTap: 处理过滤器更改的回调函数。
• radius: 可选的圆角半径（默认是 20）。

示例代码

以下是一个完整的示例，展示了如何使用排行榜：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Screen(),
    );
  }
}

class Screen extends StatefulWidget {
  const Screen({super.key});

  [@override](/user/override)
  _ScreenState createState() => _ScreenState();
}

class _ScreenState extends State<Screen> {
  final ScrollController _scrollController = ScrollController();
  double _topContainer = 0;

  final List<User> _users = List.generate(
    10,
    (index) => User(
      index,
      'user$index',
      '',
      'https://shorturl.at/Jl6mL',
      (10 - index) * 10,
      (10 - index) * 50,
    ),
  );

  final int _myId = 2;
  bool _isWeeklyFiltered = true;

  [@override](/user/override)
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  [@override](/user/override)
  void dispose() {
    _scrollController.removeListener(_onScroll);
    _scrollController.dispose();
    super.dispose();
  }

  void _onScroll() {
    final double value = _scrollController.offset / 119;
    setState(() {
      _topContainer = value;
    });
  }

  void _filter(bool isFirstFilterSelected) {
    setState(() {
      _isWeeklyFiltered = isFirstFilterSelected;
    });
    // TODO: 根据选定的过滤器对用户进行排序
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Leaderboard', style: TextStyle(color: Theme.of(context).colorScheme.secondary)),
        scrolledUnderElevation: 0,
      ),
      body: AnimatedLeaderboard(
        scrollController: _scrollController,
        topContainer: _topContainer,
        filterLabel1: 'Weekly',
        filterLabel2: 'All-time',
        users: _users,
        myId: _myId,
        isFirstFilterSelected: _isWeeklyFiltered,
        onFilterTap: _filter,
      ),
    );
  }
}

class User {
  final int id;
  final String photo;
  final String firstName;
  final String lastName;
  final int weeklyPoints;
  final int allTimePoints;

  User(this.id, this.firstName, this.lastName, this.photo, this.weeklyPoints, this.allTimePoints);

  int get firstFilterPoints => weeklyPoints;
  int get secondFilterPoints => allTimePoints;
}