hadss_geometry_transition

介绍

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

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

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

组件接口

GeometryTransition

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

名称 类型 必填 说明
closeBuilder Widget CloseContainerBuilder(BuildContext context, VoidCallback action) 是 构建起始共享组件UI，VoidCallback用于共享组件创建完成回调
openBuilder Widget OpenContainerBuilder<S> (BuildContext context, PopActionCallback<S> action) 是 构建目标页面UI，PopActionCallback可获取pop页面操作
tappable bool 否 是否允许点击触发动画，默认 true
transitionDuration Duration 否 动画总时长，默认400ms
useRootNavigator bool 否 是否由导航路由推入，默认 false
onPushCallback PushActionCallback 否 新页面返回时的回调函数
closedRadius BorderRadius 否 共享组件的圆角
openRadius BorderRadius 否 目标页面的圆角
routeSettings RouteSettings 否 路由配置

工程目录

.
├─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，请自由地享受和参与开源。

Libraries

hadss_geometry_transition