Flutter页面折叠动画插件paperfold的使用

paperfold 是一个提供页面折叠效果的Flutter插件。它允许你选择水平或垂直折叠方向，并且至少需要两个折叠条带。

安装

首先，在你的 pubspec.yaml 文件中添加 paperfold 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  paperfold: ^最新版本号

或者在终端中运行以下命令来添加依赖：

flutter pub add paperfold

然后运行 flutter pub get 来安装依赖。

使用方法

将 PaperFold widget 添加到你的 widget 树中即可实现折叠效果。下面是一个完整的示例代码，展示了如何使用 paperfold 插件。

示例代码

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

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

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

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  var foldSliderValue = 1.0;
  var splitsSliderValue = 2.0;
  var mainAxis = PaperFoldMainAxis.horizontal;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter paper fold',
      home: Builder(builder: (context) {
        final pixelRatio = MediaQuery.of(context).devicePixelRatio;
        return Scaffold(
          backgroundColor: Colors.red,
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                children: [
                  _getContent(pixelRatio),
                  Align(
                    alignment: Alignment.topRight,
                    child: _getContent(pixelRatio),
                  ),
                  Align(
                    alignment: Alignment.topLeft,
                    child: _getContent(pixelRatio),
                  ),
                  Slider(
                    value: foldSliderValue,
                    min: 0,
                    max: 1,
                    divisions: 100,
                    label: foldSliderValue.toString(),
                    onChanged: (double value) {
                      setState(() {
                        foldSliderValue = value;
                      });
                    },
                  ),
                  Slider(
                    value: splitsSliderValue,
                    min: 2,
                    max: 10,
                    divisions: 10,
                    label: splitsSliderValue.round().toString(),
                    onChanged: (double value) {
                      setState(() {
                        splitsSliderValue = value;
                      });
                    },
                  ),
                  Row(
                    children: [
                      const Text("MainAxis: HORIZONTAL"),
                      Checkbox(
                        value: mainAxis == PaperFoldMainAxis.horizontal,
                        onChanged: (value) {
                          setState(() {
                            if (mainAxis == PaperFoldMainAxis.horizontal) {
                              mainAxis = PaperFoldMainAxis.vertical;
                            } else {
                              mainAxis = PaperFoldMainAxis.horizontal;
                            }
                          });
                        },
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        );
      }),
    );
  }

  Widget _getContent(double pixelRatio) {
    return PaperFold(
      mainAxis: mainAxis,
      strips: splitsSliderValue.round(),
      foldValue: foldSliderValue,
      pixelRatio: pixelRatio,
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Container(
          color: Colors.green,
          height: 150,
          child: ListView.builder(
            itemCount: 30,
            itemBuilder: (context, index) {
              return const Column(
                children: [
                  Row(
                    children: [
                      Icon(
                        Icons.translate,
                        size: 50,
                      ),
                      Text("hello world, hello world")
                    ],
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

限制

• 用户交互（手势等）仅在展开状态（0 <= fold value < 1）下可用。
• 子部件不能被动画化。这同样适用于视频内容。你可以用 paperfold 包裹它，但在折叠状态下内容不会更新。

问题反馈

如果有任何问题、错误或功能请求，请随时在 GitHub Issues 提交。

许可证

该插件遵循 BSD-3-Clause 许可证。

希望这个指南能帮助你在Flutter项目中成功实现页面折叠动画！如果有任何疑问或需要进一步的帮助，请随时提问。