Flutter视图收缩动画插件shrinking_view的使用

shrinking_view 是一个轻量且高度可定制的Flutter插件，用于程序化地收缩和扩展视图/屏幕/小部件。它类似于iOS中前台内容背后的页面缩小效果，主要用于包裹 Scaffold 小部件。

功能

• 收缩和扩展视图/屏幕/小部件。
• 通过 ShrinkingViewController 控制。
• 只需几行代码即可实现。

GIF演示

使用步骤

1. 安装并导入包

在项目中添加 shrinking_view 包：

$ flutter pub add shrinking_view

然后导入：

import 'package:shrinking_view/shrinking_view.dart';

2. 创建 ShrinkingViewController

在您的应用程序中创建一个 ShrinkingViewController 并传递给 ShrinkingView：

late ShrinkingViewController controller;

@override
void initState() {
    controller = ShrinkingViewController(tickerProvider: this);
    super.initState();
}

注意：确保您的类使用了 SingleTickerProviderStateMixin 或 TickerProviderStateMixin，以便可以将 this 作为 TickerProvider 传递给 ShrinkingViewController。

3. 包裹 Scaffold（或任何其他小部件）

将您的 Scaffold （或任何其他小部件）包裹在 ShrinkingView 中，并传递您刚刚创建的 controller：

return ShrinkingView(
  controller: controller,
  child: const Scaffold(
    body: <YOUR_APP>,
  ),
);

4. 使用控制器方法控制动画

现在，您可以调用 controller.<SOME_METHOD> 来控制 ShrinkingView！

ShrinkingViewController 方法

• shrink() => void: 开始收缩动画。
• expand() => void: 开始扩展动画。
• isShrunk() => bool: 返回是否处于收缩状态。
• isExpanded() => bool: 返回是否处于扩展状态。
• isAnimating() => bool: 返回是否正在动画。
• isShrinkingCurrently() => bool: 返回是否正在收缩。
• isExpandingCurrently() => bool: 返回是否正在扩展。

ShrinkingView 属性

• controller: 必填项，控制 ShrinkingView 的控制器。
• child: 必填项，要包裹的小部件，通常是一个 Scaffold。
• 其他属性如 topLeftSquared, topRightSquared, backgroundColorWhileAnimating 等，用于自定义动画效果。

示例代码

以下是一个完整的示例，展示了如何使用 shrinking_view 包：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'shrinking_view package',
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  late ShrinkingViewController controller;

  @override
  void initState() {
    controller = ShrinkingViewController(tickerProvider: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ShrinkingView(
      controller: controller,
      child: Scaffold(
        appBar: AppBar(
          title: const Text("shrinking_view example"),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                onPressed: () => controller.expand(),
                child: const Text("Expand (action)"),
              ),
              TextButton(
                onPressed: () => controller.shrink(),
                child: const Text("Shrink (action)"),
              ),
              TextButton(
                onPressed: () => print(controller.isShrunk()),
                child: const Text("Is shrunk? (bool)"),
              ),
              TextButton(
                onPressed: () => print(controller.isExpanded()),
                child: const Text("Is expanded? (bool)"),
              ),
              TextButton(
                onPressed: () => print(controller.isAnimating()),
                child: const Text("Is animating? (bool)"),
              ),
              TextButton(
                onPressed: () => print(controller.isShrinkingCurrently()),
                child: const Text("Is currently shrinking? (bool)"),
              ),
              TextButton(
                onPressed: () => print(controller.isExpandingCurrently()),
                child: const Text("Is currently expanding? (bool)"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

希望这个指南能帮助您快速上手 shrinking_view 插件！如果有任何问题或建议，请随时联系作者或提交Issue。