欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

前言

容器转换过渡效果是现代移动应用中常见的交互方式，它能够为用户提供流畅、自然的视觉体验，增强应用的整体质感。在 Flutter 开发中，animations 包为我们提供了便捷的实现方式，使我们能够轻松创建各种容器转换效果。

本文将详细介绍如何在 Flutter 项目中集成 animations 库，并成功适配到 OpenHarmony 平台，实现容器转换过渡效果。我们将从依赖配置、组件开发、集成使用等方面展开讲解，帮助开发者快速掌握这一技术，并应用到实际项目中。

通过本次实践，我们不仅能为 OpenHarmony 平台带来流畅的容器转换效果，还能积累跨平台开发的宝贵经验，为未来的多端适配打下坚实基础。

混合工程结构深度解析

项目目录架构

当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：

my_flutter_harmony_app/
├── lib/                          # Flutter业务代码（基本不变）
│   ├── main.dart                 # 应用入口
│   ├── home_page.dart           # 首页
│   └── utils/
│       └── platform_utils.dart  # 平台工具类
├── pubspec.yaml                  # Flutter依赖配置
├── ohos/                         # 鸿蒙原生层（核心适配区）
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS代码
│   │       │   ├── MainAbility/
│   │       │   │   ├── MainAbility.ts       # 主Ability
│   │       │   │   └── MainAbilityContext.ts
│   │       │   └── pages/
│   │       │       ├── Index.ets           # 主页面
│   │       │       └── Splash.ets          # 启动页
│   │       ├── resources/        # 鸿蒙资源文件
│   │       │   ├── base/
│   │       │   │   ├── element/  # 字符串等
│   │       │   │   ├── media/    # 图片资源
│   │       │   │   └── profile/  # 配置文件
│   │       │   └── en_US/        # 英文资源
│   │       └── config.json       # 应用核心配置
│   ├── ohos_test/               # 测试模块
│   ├── build-profile.json5      # 构建配置
│   └── oh-package.json5         # 鸿蒙依赖管理
└── README.md

展示效果图片

Flutter 实时预览效果展示

运行到鸿蒙虚拟设备中效果展示

目录

• 引入第三方库 animations
• 功能代码实现
  • 容器转换过渡组件
  • 集成到首页
  • 组件使用方法
  • 开发注意事项
• 本次开发中容易遇到的问题
• 总结本次开发中用到的技术点

引入第三方库 animations

在项目中引入了 animations 库，版本为 ^2.0.0，用于实现容器转换过渡效果。在 pubspec.yaml 文件中添加了如下依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  animations: ^2.0.0

功能代码实现

容器转换过渡组件

在项目中，我们创建了 ContainerTransition 组件，用于展示和交互容器转换过渡效果。该组件充分利用了 animations 库提供的 OpenContainer 组件，实现了流畅的容器转换效果。

核心组件实现

1. ContainerTransition 主组件

ContainerTransition 是整个功能的核心组件，它负责管理容器的显示状态和交互逻辑。

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

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

  @override
  State<ContainerTransition> createState() => _ContainerTransitionState();
}

class _ContainerTransitionState extends State<ContainerTransition> {
  bool _isExpanded = false;

  void _toggleExpanded() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('容器转换过渡效果'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '点击下方容器查看转换效果:',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 40),
            // 第一个容器：淡入淡出转换效果
            OpenContainer(
              transitionType: ContainerTransitionType.fade,
              openBuilder: (context, action) => const ExpandedContainer(),
              closedBuilder: (context, action) => GestureDetector(
                onTap: action,
                child: Container(
                  width: 200,
                  height: 200,
                  decoration: BoxDecoration(
                    color: Colors.deepPurple,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: const Center(
                    child: Text(
                      '点击展开',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 40),
            // 控制按钮
            ElevatedButton(
              onPressed: _toggleExpanded,
              child: Text(_isExpanded ? '收起容器' : '展开容器'),
            ),
            const SizedBox(height: 40),
            // 第二个容器：淡入淡出转换效果
            if (_isExpanded)
              OpenContainer(
                transitionType: ContainerTransitionType.fade,
                openBuilder: (context, action) => const FullScreenContainer(),
                closedBuilder: (context, action) => GestureDetector(
                  onTap: action,
                  child: Container(
                    width: 150,
                    height: 100,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: const Center(
                      child: Text(
                        '点击查看详情',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 14,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

实现要点：

• 使用 OpenContainer 组件实现容器转换效果
• 通过 transitionType 参数设置过渡类型为 fade（淡入淡出）
• 利用 openBuilder 和 closedBuilder 分别定义打开和关闭状态的UI
• 使用 GestureDetector 实现容器的点击交互
• 通过 _isExpanded 状态变量控制第二个容器的显示和隐藏

2. ExpandedContainer 组件

ExpandedContainer 是第一个容器展开后的详情页面，展示了一个更大的容器。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('展开的容器'),
      ),
      body: Center(
        child: Container(
          width: double.infinity,
          height: 300,
          margin: const EdgeInsets.all(20),
          decoration: BoxDecoration(
            color: Colors.deepPurple.shade300,
            borderRadius: BorderRadius.circular(16),
          ),
          child: const Center(
            child: Text(
              '这是展开后的容器',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

实现要点：

• 使用 Scaffold 作为页面结构
• 设计了一个宽度充满屏幕、高度为300的容器
• 使用 Colors.deepPurple.shade300 作为背景色，与原始容器形成视觉关联
• 居中显示提示文本，清晰告知用户当前状态

3. FullScreenContainer 组件

FullScreenContainer 是第二个容器展开后的全屏页面，展示了一个占据整个屏幕的容器。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('全屏容器'),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue.shade200,
        child: Center(
          child: Text(
            '这是全屏容器',
            style: TextStyle(
              color: Colors.blue[900],
              fontSize: 32,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

实现要点：

• 使用 Scaffold 作为页面结构
• 设计了一个宽度和高度都充满屏幕的容器
• 使用 Colors.blue.shade200 作为背景色，与原始容器形成视觉关联
• 居中显示提示文本，清晰告知用户当前状态
• 使用 Colors.blue[900] 作为文本颜色，确保在浅色背景上的可读性

集成到首页

在 main.dart 文件中，我们将 ContainerTransition 组件集成到首页，确保应用启动后直接展示容器转换过渡效果。

import 'package:flutter/material.dart';
import 'package:aa/components/container_transition.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter for openHarmony',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter for openHarmony'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const ContainerTransition();
  }
}

集成要点：

• 导入 container_transition.dart 文件，确保能够使用 ContainerTransition 组件
• 在 _MyHomePageState 的 build 方法中直接返回 ContainerTransition 组件
• 这样应用启动后就会直接显示容器转换过渡效果的界面

组件使用方法

1. 引入组件：在需要使用容器转换过渡效果的文件中，导入 container_transition.dart 文件。

   import 'package:aa/components/container_transition.dart';
   

2. 添加到页面：将 ContainerTransition 组件添加到页面的 build 方法中。

   @override
   Widget build(BuildContext context) {
     return const ContainerTransition();
   }
   

3. 交互操作：

   • 点击第一个容器（紫色）：触发淡入淡出的转换效果，打开 ExpandedContainer 页面
   • 点击“展开容器”按钮：显示第二个容器（蓝色）
   • 点击“收起容器”按钮：隐藏第二个容器（蓝色）
   • 点击第二个容器（蓝色）：触发淡入淡出的转换效果，打开 FullScreenContainer 页面

开发注意事项

1. 依赖安装：

   • 确保在 pubspec.yaml 文件中正确添加了 animations 依赖，并指定合适的版本
   • 运行 flutter pub get 命令安装依赖，确保依赖正确加载

2. 过渡类型选择：

   • 根据实际需求选择合适的过渡类型，如 fade（淡入淡出）、scale（缩放）等
   • 不同的过渡类型适合不同的场景，需要根据具体UI设计选择

3. 性能优化：

   • 对于复杂的容器内容，考虑使用 RepaintBoundary 包裹，避免过渡动画卡顿
   • 避免在容器转换过程中进行复杂的计算或网络请求

4. 适配不同屏幕：

   • 确保容器的尺寸设置合理，在不同屏幕尺寸下都能正确显示
   • 考虑使用 MediaQuery 获取屏幕尺寸，进行响应式设计

5. 用户体验：

   • 合理使用过渡效果，避免过度使用导致用户疲劳
   • 确保过渡动画的时长和效果与应用整体风格一致

本次开发中容易遇到的问题

1. 依赖版本兼容性问题：

   • 问题：不同版本的 animations 库可能与不同版本的 Flutter SDK 存在兼容性问题
   • 解决方案：确保使用与当前 Flutter SDK 版本兼容的 animations 库版本，可通过 flutter pub outdated 检查依赖状态

2. 过渡效果不流畅：

   • 问题：容器内容过于复杂，导致过渡动画卡顿
   • 解决方案：使用 RepaintBoundary 包裹复杂内容，减少重绘区域；优化容器内的 widget 结构，避免不必要的嵌套

3. OpenHarmony 平台适配问题：

   • 问题：动画效果在 OpenHarmony 平台上可能表现不一致
   • 解决方案：在 OpenHarmony 设备或模拟器上进行充分测试，确保动画效果正常；关注 OpenHarmony 平台的特性和限制

4. 状态管理问题：

   • 问题：容器的显示/隐藏状态管理不当，导致过渡效果无法正确触发
   • 解决方案：使用 setState 正确管理状态，确保状态更新能够触发 UI 重建

5. 布局溢出问题：

   • 问题：容器尺寸设置不合理，导致过渡过程中出现布局溢出
   • 解决方案：合理设置容器的尺寸和边距，确保在过渡前后都能适应屏幕空间

6. 常量表达式错误：

   • 问题：在常量表达式中使用 Colors.blue.shade900 等属性导致编译错误
   • 解决方案：将颜色值改为 Colors.blue[900] 或在非常量上下文中使用

总结本次开发中用到的技术点

1. Flutter 动画库集成：

   • 集成了 animations 库，使用 OpenContainer 组件实现容器转换过渡效果
   • 掌握了 ContainerTransitionType 的使用，实现了淡入淡出的过渡效果

2. 组件化开发：

   • 创建了独立的 ContainerTransition 组件，实现了功能的封装和复用
   • 设计了 ExpandedContainer 和 FullScreenContainer 两个子组件，分别对应不同的展开状态

3. 用户交互实现：

   • 实现了按钮点击事件处理，通过 setState 更新组件状态
   • 使用 GestureDetector 实现了容器的点击交互，触发转换效果

4. 布局设计技巧：

   • 使用 Center 和 Column 实现居中布局，使界面元素排列整齐
   • 使用 SizedBox 控制元素间距，提升界面美观度
   • 设计了美观的容器样式，包括颜色、圆角等属性

5. 状态管理：

   • 使用 setState 管理组件状态，控制容器的显示和隐藏
   • 实现了状态变量 _isExpanded，用于控制第二个容器的显示状态

6. OpenHarmony 平台适配：

   • 确保代码在 OpenHarmony 平台上正常运行，考虑了平台特定的显示特性
   • 验证了 animations 库在 OpenHarmony 平台上的兼容性

7. 用户体验优化：

   • 通过流畅的过渡动画提升用户体验，使界面交互更加自然
   • 实现了直观的交互反馈，让用户清楚了解操作结果
   • 设计了清晰的视觉层次，引导用户关注核心交互元素

通过本次开发，我们成功实现了 Flutter 三方库 animations 在 OpenHarmony 平台上的适配，创建了一个功能完整的容器转换过渡效果展示应用。该应用包含了多种容器转换效果和交互方式，为用户提供了流畅、直观的视觉体验。同时，我们也积累了跨平台开发的宝贵经验，为未来的多端适配项目打下了坚实基础。