hadss_geometry_transition #

介绍 #

hadss_geometry_transition 是一个为 Flutter 提供“一镜到底”页面跳转转场动画的三方库。

目前该库提供的组件如下：

1. 一镜到底动画组件：实现组件绑定，实现页面跳转的过渡动画。

组件接口 #

GeometryTransition #

用于处理一镜到底的具体实现

工程目录 #

.
├─example                                        // 示例工程
│  └─lib
│     ├─components         
│     │   └─home_screen.dart                     // 一镜到底详情页   
│     └─main.dart                                // 工程入口              
│                   
├─lib
│  ├─src
│  │  ├─constant.dart      // 一镜到底动画常量配置
│  │  ├─geometry_transition_route.dart           // 一镜到底布局构建与动画执行
│  │  ├─geometry_transition_widget.dart          // 一镜到底动画组件
│  │  └─hide_container.dart                      // 共享节点，控制显隐和占位
│  └─hadss_geometry_transition.dart              // 一镜到底库入口

安装与使用 #

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:  
     hadss_geometry_transition:
       path: ../  
   

2. 获取依赖：

   flutter pub get
   

3. 编译 hap 包：

   flutter build hap --release
   

4. 安装 hap 包（以 hdc 工具为例）：

   hdc install .\entry-default-signed.hap
   

示例代码 #

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hadss_geometry_transition Demo',
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final double screenRadius = MediaQuery
        .of(context)
        .padding
        .top - 10;
    return Scaffold(
      appBar: AppBar(title: const Text('一镜到底动画示例')),
      body: Center(
        child: GeometryTransition(
          closedRadius: const BorderRadius.all(Radius.circular(8.0)),
          openRadius: BorderRadius.all(Radius.circular(screenRadius)),
          closedBuilder: (context, open) {
            return SizedBox(
                width: 100,
                height: 100,
                // 初始化圆角
                child: ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(8.0)),
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        Container(
                          width: 100,
                          height: 100,
                          color: Colors.orange,
                        ),
                        const SizedBox(height: 20),
                        Align(
                          alignment: Alignment.center,
                          child: FittedBox(
                              fit: BoxFit.contain,
                              child: ElevatedButton(
                                onPressed: open,
                                child: Text('跳转'),
                              )),
                        )
                      ],
                    )));
          },
          openBuilder: (context, close) {
            return Scaffold(
              backgroundColor: Colors.blue,
              body: Align(
                alignment: Alignment.topCenter,
                child: Container(
                  width: 200,
                  height: 200,
                  alignment: Alignment.topCenter,
                  color: Colors.red,
                ),
              ),
            );
          },
          tappable: true,
          onPushCallback: (data) => debugPrint('动画回调'),
        ),
      ),
    );
  }
}

约束与限制 #

本示例仅支持标准系统上运行，支持设备：Phone | Tablet。

地区限制：仅支持中国境内（不包含中国香港、中国澳门、中国台湾）提供服务。

DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。

OpenHarmony SDK: >= API 12.

flutter sdk 版本要求：>= 3.7.12

使用过程中发现任何问题都可以提 Issue。

同时，也非常欢迎您提交 PR。

开源协议 #

本项目基于Apache License 2.0，请自由地享受和参与开源。