Flutter动态效果插件fading_tile的使用

Flutter动态效果插件fading_tile的使用

fading_tile 是一个易于使用的隐式动画小部件，可以包装您的列表项以添加交错淡入动画。它非常适合需要动态加载或更新列表的场景。

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 中使用 fading_tile 插件。

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

// 模拟聊天消息的数据模型
class ChatMessage {
  final String text;
  final bool isSubscribed;

  ChatMessage({required this.text, required this.isSubscribed});
}

// 示例小部件：每个聊天消息的显示项
class ExampleScrollableTile extends StatelessWidget {
  final ChatMessage message;
  final bool isSubscribed;
  final int index;
  final List<ChatMessage> paginated;
  final List<ChatMessage> subscribed;

  const ExampleScrollableTile({
    Key? key,
    required this.message,
    required this.isSubscribed,
    required this.index,
    required this.paginated,
    required this.subscribed,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            message.text,
            style: TextStyle(fontSize: 16.0),
          ),
          const SizedBox(height: 8.0),
          if (isSubscribed)
            Text(
              "订阅消息",
              style: TextStyle(fontSize: 14.0, color: Colors.green),
            )
          else
            Text(
              "普通消息",
              style: TextStyle(fontSize: 14.0, color: Colors.red),
            ),
        ],
      ),
    );
  }
}

// 主屏幕小部件
class ExampleScrollable extends StatelessWidget {
  final List<ChatMessage> paginated;
  final List<ChatMessage> subscribed;

  const ExampleScrollable({
    Key? key,
    required this.paginated,
    required this.subscribed,
  }) : super(key: key);

  // 查找订阅消息的索引回调函数
  int _findSubscribedIndexCallback(Key key) {
    final index = (key as ValueKey<int>).value;
    final reversedIndex = subscribed.length - 1 - index;
    return reversedIndex;
  }

  // 构建分页消息
  Widget _buildPaginated(BuildContext context, int index) => FadingTile(
        key: ValueKey(index),
        index: index,
        child: ExampleScrollableTile(
          message: paginated[index],
          isSubscribed: false,
          index: index,
          paginated: paginated,
          subscribed: subscribed,
        ),
      );

  // 构建订阅消息
  Widget _buildSubscribed(BuildContext context, int index) {
    // 反转索引，使较新的消息出现在较旧的消息之前
    final effectiveIndex = subscribed.length - 1 - index;

    return FadingTile.size(
      key: ValueKey<int>(effectiveIndex),
      index: effectiveIndex,
      alignment: Alignment.bottomCenter,
      stagger: false, // 初始化顺序与项目顺序不匹配，因此淡入动画会错位
      child: ExampleScrollableTile(
        message: subscribed[effectiveIndex],
        isSubscribed: true,
        index: effectiveIndex,
        paginated: paginated,
        subscribed: subscribed,
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final padding = MediaQuery.of(context).padding;
    final horizontalPadding = EdgeInsets.symmetric(horizontal: padding.left + padding.right);

    // 注意：滚动方向为反向，因为我们正在构建一个聊天消息列表，
    // 这样可以从底部向上滚动。
    return CustomScrollView(
      reverse: true,
      slivers: [
        // 底部安全区域
        SliverPadding(padding: padding.bottom != null ? EdgeInsets.only(bottom: padding.bottom!) : EdgeInsets.zero),

        // 底部按钮，用于添加更多测试消息
        const SliverToBoxAdapter(
          child: Center(child: Text("点击添加新消息")),
        ),

        // 示例滑动列表：订阅的聊天消息
        if (subscribed.isNotEmpty)
          FadingTileController(
            key: const ValueKey('subscribed_list'),
            expectedItemCount: subscribed.length,
            child: SliverPadding(
              padding: horizontalPadding,
              sliver: SliverList(
                delegate: SliverChildBuilderDelegate(
                  _buildSubscribed,
                  childCount: subscribed.length,
                  findChildIndexCallback: _findSubscribedIndexCallback,
                  addAutomaticKeepAlives: false,
                ),
              ),
            ),
          ),

        // 示例滑动列表：分页的聊天消息
        FadingTileController(
          key: const ValueKey('paginated_list'),
          expectedItemCount: paginated.length,
          child: SliverPadding(
            padding: horizontalPadding,
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                _buildPaginated,
                childCount: paginated.length,
              ),
            ),
          ),
        ),

        // 顶部安全区域
        SliverPadding(padding: padding.top != null ? EdgeInsets.only(top: padding.top!) : EdgeInsets.zero),
      ],
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text("Fading Tile 示例")),
      body: Builder(
        builder: (context) {
          final paginated = List.generate(
            20,
            (index) => ChatMessage(
              text: "分页消息 $index",
              isSubscribed: false,
            ),
          );
          final subscribed = List.generate(
            5,
            (index) => ChatMessage(
              text: "订阅消息 $index",
              isSubscribed: true,
            ),
          );

          return ExampleScrollable(
            paginated: paginated,
            subscribed: subscribed,
          );
        },
      ),
    ),
  ));
}