Flutter for OpenHarmony 动效能力集成实战：让你的应用萌萌哒动起来~

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

嘿，你的应用是不是有点"高冷"呀？

亲爱的开发者小伙伴们，有没有觉得自己的应用虽然功能齐全，但总少了点什么？就像一个不会笑的洋娃娃，明明很漂亮，却让人感觉冷冰冰的~没错，你缺的就是动效！动效就像是应用的"表情"，能让你的应用从高冷女神变成邻家小妹，瞬间拉近和用户的距离呢！

今天要和大家分享的是 Flutter for OpenHarmony 跨平台开发中的动效能力集成，包括页面转场、组件交互、数据加载三大核心场景。这些可都是我在鸿蒙设备上亲自验证过的哦，绝对靠谱~快跟着我一起，让你的应用萌萌哒动起来吧！

一、页面转场：别让用户觉得手机"卡壳"了

1.1 那个让人抓狂的"瞬间切换"

你有没有遇到过这种情况：点击底部导航栏，页面"咔"的一下就变了，完全没有过渡？用户一脸懵圈：我刚才点了吗？手机是不是卡了？这种体验就像在看PPT翻页，一点都不丝滑~

很多小伙伴用 IndexedStack 配合 setState 来切换页面，虽然简单，但效果真的很"直男"呢！IndexedStack 本身就不支持动画，它只会简单粗暴地显示或隐藏子组件。想要丝滑的切换效果？PageView 才是你的真命天子~

1.2 PageView 让切换变得超温柔

PageView 天生就支持滑动切换，再配合 PageController 的 animateToPage 方法，页面切换就像丝绸一样顺滑~来看看这段代码，是不是很优雅？

class _MainScreenState extends State<MainScreen> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();

  final List<Widget> _pages = [
    const HomePage(),
    const MessagePage(),
    const WorkPage(),
    const DiscoverPage(),
    const ProfilePage(),
  ];

  void _onPageChanged(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  void _onTap(int index) {
    if (_currentIndex != index) {
      _pageController.animateToPage(
        index,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        onPageChanged: _onPageChanged,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onTap,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            activeIcon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat_bubble_outline),
            activeIcon: Icon(Icons.chat_bubble),
            label: '消息',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.work_outline),
            activeIcon: Icon(Icons.work),
            label: '工作台',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.explore_outlined),
            activeIcon: Icon(Icons.explore),
            label: '发现',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            activeIcon: Icon(Icons.person),
            label: '我的',
          ),
        ],
      ),
    );
  }
}

来来来，让我告诉你几个小秘密：

首先呢，_onPageChanged 回调一定要实现哦~不然用户滑动页面的时候，底部导航栏的选中状态就不会更新，界面状态就会乱成一团，用户会觉得很困惑呢！

其次，_onTap 方法里的条件判断 if (_currentIndex != index) 可不能省。没有这个判断，用户重复点击同一个 Tab，PageView 就会无意义地执行一次动画，既浪费资源又会让界面抖动，多尴尬呀~

第三，duration 设置为 300 毫秒是经过大量实践验证的最佳值哦~太快了显得急躁，太慢了又让人等得不耐烦。Curves.easeInOut 是一个先加速后减速的缓动曲线，就像人走路一样自然~

最后，_pageController.dispose() 必须在 dispose 方法中调用！这一点很多小伙伴都会忽略，结果应用越用越卡，最后内存溢出崩溃。PageController 持有动画资源和滚动位置信息，不释放的话就是典型的内存泄漏，一定要记得打扫干净哦~

1.3 OpenHarmony 上的小贴士

在 OpenHarmony 平台上，PageView 的表现和 Android/iOS 基本一致，但有几个小细节需要特别注意：

手势识别的灵敏度可能会有些差异，如果发现滑动切换不够灵敏，可以通过 PageView 的 pageSnapping 和 physics 属性进行调整。

如果某个页面包含大量数据或复杂计算，切换回来时可能会重新加载。这时候可以让页面组件混入 AutomaticKeepAliveClientMixin，强制保持页面状态：

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

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

class _HomePageState extends State<HomePage> 
    with AutomaticKeepAliveClientMixin {
  
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: _buildBody(),
    );
  }
}

二、组件交互：让用户感受到你的"心意"

2.1 阴影效果：给组件加点"层次感"

很多小伙伴觉得阴影效果只是视觉装饰，可有可无。这种想法真的太天真啦！阴影是 Material Design 设计语言的核心元素之一，它传达了组件的层级关系，让界面具有空间感和立体感。没有阴影的界面，就像一张纸贴在屏幕上，毫无生气~

看看下面这个统计卡片的实现，是不是很有质感？

Widget _buildStatsCard() {
  return Container(
    margin: const EdgeInsets.all(16),
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue.shade400, Colors.blue.shade600],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      borderRadius: BorderRadius.circular(16),
      boxShadow: [
        BoxShadow(
          color: Colors.blue.withOpacity(0.3),
          blurRadius: 10,
          offset: const Offset(0, 4),
        ),
      ],
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        _buildStatItem('42', '全部任务', Icons.assignment),
        _buildStatItem('28', '已完成', Icons.check_circle),
      ],
    ),
  );
}

这个卡片同时使用了渐变背景和阴影效果。渐变让卡片更有质感，阴影则让卡片从背景中"浮"起来，形成明确的视觉层级。blurRadius: 10 和 offset: const Offset(0, 4) 的组合，模拟了真实世界中光源从上方照射的效果，是不是很贴心？

2.2 底部导航栏的阴影也要"向上看"

底部导航栏同样需要阴影效果，但方向要反过来哦——阴影应该向上投射，表示导航栏"浮"在内容之上：

bottomNavigationBar: Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.2),
        blurRadius: 10,
        offset: const Offset(0, -2),
      ),
    ],
  ),
  child: BottomNavigationBar(
    currentIndex: _currentIndex,
    onTap: _onTap,
    type: BottomNavigationBarType.fixed,
    backgroundColor: Colors.white,
    selectedItemColor: Colors.blue,
    unselectedItemColor: Colors.grey,
    items: [
      // ... items
    ],
  ),
)

注意 offset: const Offset(0, -2)，负值表示阴影向上偏移。这个小细节很多小伙伴都会搞错，结果阴影向下投射，看起来就像导航栏被什么东西压着一样，完全违背了设计初衷呢~

2.3 卡片列表的交互反馈：给用户一个"回应"

列表项的交互反馈同样重要哦~当用户点击一个列表项时，必须有即时的视觉反馈，否则用户会怀疑自己的点击是否生效，多焦虑呀！

Widget _buildTodoItem(TodoItem todo) {
  return Card(
    margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
    elevation: 2,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: InkWell(
      onTap: () {
        // 处理点击事件
      },
      borderRadius: BorderRadius.circular(12),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            CircleAvatar(
              backgroundColor: todo.completed ? Colors.green : Colors.orange,
              child: Icon(
                todo.completed ? Icons.check : Icons.pending,
                color: Colors.white,
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    todo.title,
                    style: TextStyle(
                      decoration: todo.completed 
                          ? TextDecoration.lineThrough 
                          : null,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    'ID: ${todo.id}',
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

InkWell 组件会在点击时产生水波纹效果，borderRadius 参数确保水波纹不会超出卡片的圆角边界。Card 的 elevation: 2 提供了轻微的阴影，让列表项具有层次感。这样用户点击的时候就能收到一个温柔的"回应"啦~

三、数据加载：别让用户对着空白发呆

3.1 那个转圈圈的加载动画

数据加载时显示一个 CircularProgressIndicator，这是最基本的处理方式。但就是这么简单的事情，很多小伙伴都做不好呢~

Widget _buildBody() {
  if (_isLoading) {
    return const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CircularProgressIndicator(),
          SizedBox(height: 16),
          Text('加载中...'),
        ],
      ),
    );
  }

  if (_errorMessage != null) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.error_outline, size: 64, color: Colors.red),
          const SizedBox(height: 16),
          Text('加载失败: $_errorMessage'),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: _loadData,
            child: const Text('重试'),
          ),
        ],
      ),
    );
  }

  return _buildTodoList();
}

这段代码处理了三种状态：加载中、加载失败、加载成功。很多小伙伴只处理了加载中和加载成功两种状态，完全忽略了网络请求可能失败的情况。结果就是用户在网络不好的时候，只能盯着那个永远转不完的圈圈，完全不知道发生了什么，多可怜呀~

3.2 骨架屏：比转圈圈更优雅的选择

说实话，那个转圈圈的加载动画虽然能用，但用户体验并不好。用户看到的是一个完全空白的界面，只有一个孤零零的圈圈在转，信息量为零。就像在黑暗中等待，不知道光明什么时候会来~

骨架屏（Skeleton Screen）是更好的选择哦！它在数据加载完成之前，先展示一个与真实内容布局相似的占位界面，让用户对即将展示的内容有一个心理预期，是不是很贴心？

shimmer 库是实现骨架屏的首选方案，而且已经完成了 OpenHarmony 平台的适配。在 pubspec.yaml 中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  shimmer: ^3.0.0

然后创建骨架屏组件：

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

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

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300]!,
      highlightColor: Colors.grey[100]!,
      child: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return Container(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
            ),
            child: Row(
              children: [
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 16,
                        width: double.infinity,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                      const SizedBox(height: 8),
                      Container(
                        height: 12,
                        width: 100,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

在加载状态时使用骨架屏：

Widget _buildBody() {
  if (_isLoading) {
    return const TodoSkeleton();
  }
  // ... 其他状态处理
}

shimmer 库的 Shimmer.fromColors 组件会在子组件上叠加一个从 baseColor 到 highlightColor 的渐变动画，产生一种"闪烁"的效果，暗示内容正在加载中。这种视觉反馈比单纯的转圈圈要友好得多，就像在告诉用户：“别急别急，内容马上就来~”

3.3 shimmer 库在 OpenHarmony 上的表现

shimmer 库是一个纯 Dart 实现的三方库，不依赖任何原生平台能力，因此可以直接在 OpenHarmony 上运行。根据 OpenHarmony 已兼容三方库清单，shimmer ^3.0.0 版本已经完成了鸿蒙化适配验证。

在实际测试中，shimmer 动画在 OpenHarmony 设备上的表现与 Android/iOS 平台完全一致，帧率稳定在 60fps，没有出现卡顿或掉帧的情况。唯一需要注意的是，如果骨架屏元素过多，可能会对低端设备造成一定的渲染压力，建议将骨架屏的 itemCount 控制在 5-8 个之间哦~

四、运行截图：让事实说话

【截图1：应用启动 - 骨架屏加载效果】
在这里插入图片描述

应用启动时，首页展示骨架屏动画，用户可以清晰地看到即将加载的内容布局，而不是对着空白屏幕发呆。shimmer 动画流畅自然，闪烁效果温柔又优雅~

【截图2：底部导航栏切换 - 页面转场动画】
在这里插入图片描述

点击底部导航栏切换页面时，PageView 执行平滑的滑动动画，切换时长约 300 毫秒。底部导航栏的选中状态与页面内容同步更新，没有出现状态不一致的情况，丝滑又流畅~

五、写在最后

动效能力从来都不是什么高深莫测的技术，它需要的只是开发者的用心和细致。PageView 的滑动切换、阴影效果的层次感、骨架屏的加载反馈——这些都不是什么复杂的实现，但它们对用户体验的影响是实实在在的。

Flutter for OpenHarmony 为开发者提供了完整的动效能力支持，从基础的动画组件到成熟的第三方库，应有尽有。shimmer 库已经完成了鸿蒙化适配，可以直接在 OpenHarmony 设备上运行。如果你还在用那个转圈圈的加载动画，如果你还在用 IndexedStack 做页面切换，那么是时候改变一下了~

用户可能不会因为动效做得好而夸奖你，但他们一定会因为动效做得烂而吐槽你。这就是现实，接受它，然后做得更好吧！

本文的完整代码已托管至 AtomGit 平台（https://atomgit.com），欢迎开发者参考学习。如有技术问题或改进建议，欢迎在开源鸿蒙跨平台社区进行交流讨论，我们一起进步~

# flutter # harmonyos # 华为 # 学习方法
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

12华夏之光永存：全栈破局·价值兑现：这套技术路径，将重塑华为算力全球话语权

avatar 人工智能6S服务平台
cover

Flutter 三方库 dio 与 pull_to_refresh 的鸿蒙化适配指南

avatar 人工智能6S服务平台
cover

Flutter鸿蒙应用开发：基础UI组件库设计与实现实战

avatar 人工智能6S服务平台