Flutter折叠列表动画插件paperfold_list的使用

Flutter折叠列表动画插件paperfold_list的使用

<paperfold_list> </paperfold_list>

灵感来源于 PaperfoldJs。

Paperfold List 是一个 Flutter 小部件，它创建了一个可以像纸一样展开和折叠的可扩展列表视图。这个小部件允许用户获得一种视觉上吸引人且交互式的列表体验，支持自定义动画和效果。

特性

• 支持带有折叠纸效果的可扩展列表视图。
• 支持水平和垂直两种列表方向。
• 平滑且可自定义的展开和折叠动画。

示例用法

主要小部件

Paperfold List 可以这样创建：

PaperfoldList(
  itemExtent: 100,
  targetUnfold: 0.5,
  axis: PaperfoldAxis.vertical,
  axisSize: PaperfoldAxisSize.min,
  axisAlignment: PaperfoldAxisAlignment.start,
  animationDuration: const Duration(milliseconds: 500),
  animationCurve: Curves.ease,
  perspective: 0.0015,
  firstChildFoldsInward: true,
  unmountOnFold: true,
  interactionUnfoldThreshold: 1.0,
  effect: PaperfoldShadeEffect(),
  children: const [
    Text("First"),
    Text("Second"),
    Text("Third"),
  ],
)

使用构建器模式创建列表：

PaperfoldList.builder(
  itemExtent: 100,
  targetUnfold: 0.5,
  itemCount: 3,
  itemBuilder: (context, index) => Text("Child $index"),
)

有关参数的详细信息，请参阅 PaperfoldList 文档。

效果

PaperfoldEffect 类提供了一种通过包装每个子项来添加额外效果的方法，这些效果基于列表折叠的程度和其他属性绘制在子项上。

提供的三种效果类型：

• PaperfoldNoEffect：不装饰子项。

示例：

PaperfoldList(
  effect: PaperfoldNoEffect(),
)

• PaperfoldShadeEffect：默认效果（未指定时）。这是一个预设效果，包含各种选项以快速包含一些阴影效果。

示例：

PaperfoldList(
  effect: PaperfoldShadeEffect(
    backgroundColor: Colors.white,
    inwardOverlay: Colors.black54,
    inwardCrease: Colors.black12,
  ),
)

有关参数的详细信息，请参阅 PaperfoldShadeEffect 文档。

• PaperfoldListCustomEffect：使用 PaperfoldEffectBuilder 定义自定义效果。

示例效果：当列表折叠时，渐隐子项。

PaperfoldList(
  effect: PaperfoldListCustomEffect(
    builder: (context, info, child) {
      return Opacity(
        opacity: info.unfold,
        child: child,
      );
    }
  ),
)

问题

遇到问题？请在 GitHub 上提出。

示例代码

以下是一个完整的示例代码，展示了如何使用 PaperfoldList 创建一个带有折叠动画的列表：

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

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

class Post {
  final int id;
  final String userImageUrl;
  final String userName;
  final String content;

  const Post({
    required this.id,
    required this.userImageUrl,
    required this.userName,
    required this.content,
  });
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(useMaterial3: true),
      home: const ExamplePage(),
    );
  }
}

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

  [@override](/user/override)
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  static const List<Post> _posts = [
    Post(
      id: 1,
      userImageUrl: 'https://randomuser.me/api/portraits/men/1.jpg',
      userName: 'John Miller',
      content: 'Just had a great day at the beach!',
    ),
    Post(
      id: 2,
      userImageUrl: 'https://randomuser.me/api/portraits/women/2.jpg',
      userName: 'Jane Smith',
      content: 'Loving the new coffee place downtown.',
    ),
    Post(
      id: 3,
      userImageUrl: 'https://randomuser.me/api/portraits/men/3.jpg',
      userName: 'Michael Johnson',
      content: 'Started a new book today. Excited to dive in!',
    ),
    Post(
      id: 4,
      userImageUrl: 'https://randomuser.me/api/portraits/women/4.jpg',
      userName: 'Emily Davis',
      content: 'Had an amazing dinner with friends.',
    ),
    Post(
      id: 5,
      userImageUrl: 'https://randomuser.me/api/portraits/men/5.jpg',
      userName: 'Chris Brown',
      content: 'Just finished a 5k run. Feeling great!',
    ),
    Post(
      id: 6,
      userImageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
      userName: 'Sarah Wilson',
      content: 'Baking some cookies today. Can’t wait to taste them!',
    ),
    Post(
      id: 7,
      userImageUrl: 'https://randomuser.me/api/portraits/men/7.jpg',
      userName: 'David Lee',
      content: 'Enjoying a beautiful sunset at the park.',
    ),
    Post(
      id: 8,
      userImageUrl: 'https://randomuser.me/api/portraits/women/8.jpg',
      userName: 'Olivia Martinez',
      content: 'Just finished reading an amazing book!',
    ),
  ];

  final double _itemExtent = 80;

  bool _folded = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Recent Posts"),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.add),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildPost(_posts.first),
            PaperfoldList.builder(
              targetUnfold: _folded ? 0 : 1,
              axis: PaperfoldAxis.vertical,
              itemExtent: _itemExtent,
              itemCount: _posts.length - 2,
              interactionUnfoldThreshold: 1,
              unmountOnFold: true,
              animationCurve: Curves.easeInOut,
              animationDuration: const Duration(milliseconds: 500),
              effect: PaperfoldShadeEffect(
                backgroundColor: Theme.of(context).scaffoldBackgroundColor,
                preBuilder: (context, info, child) => Material(child: child),
              ),
              itemBuilder: (context, index) {
                final post = _posts[index + 1];
                return _buildPost(post);
              },
            ),
            _buildPost(_posts.last),
            const SizedBox(height: 8),
            _buildShowMoreLessButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildPost(Post post) {
    return SizedBox(
      height: _itemExtent,
      child: ListTile(
        onTap: () {},
        leading: CircleAvatar(
          foregroundImage: NetworkImage(post.userImageUrl),
        ),
        title: Text(post.userName),
        subtitle: Text(
          post.content,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    );
  }

  Widget _buildShowMoreLessButton() {
    return TextButton(
      onPressed: () {
        setState(() {
          _folded = !_folded;
        });
      },
      child: Text(_folded ? "Show More" : "Show Less"),
    );
  }
}