Flutter跨平台开发适配鸿蒙：骨架屏，让加载不那么“煎熬“

最近在做鸿蒙项目时，发现骨架屏这个小功能特别实用，但实现起来真不是想象中那么简单。今天就来跟大家分享一下我的实战经验，保证让你看完就能用上！

为啥要搞骨架屏？这玩意儿有啥用？

想象一下，你点开一个APP，看到一个大大的"加载中"，是不是特别烦躁？骨架屏就是解决这个问题的。它不是简单的旋转圈，而是先给你展示一个"大概的样子"，让你知道内容马上就要出来了。

鸿蒙上的坑：动画卡成PPT

我之前在Flutter上实现骨架屏挺顺的，但一搬到鸿蒙，就发现各种问题。最明显的就是动画不流畅，有时候还卡顿。

一开始我以为是代码问题，结果发现是鸿蒙对动画的处理和Flutter有点不一样。就像你用同一个APP，在iPhone和Android上体验可能有点差别，因为系统机制不一样。

我的实战解决方案

1. 布局要跟真实内容一模一样

骨架屏的核心是布局，得和真实内容的布局一模一样。我先画了个草图，确定了骨架屏的结构。

dart 复制代码

Widget _buildSkeletonCard() {
  return Card(
    margin: const EdgeInsets.only(bottom: 16),
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 头像+标题
          Row(
            children: [
              _buildSkeletonBox(50, 50, isCircle: true),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildSkeletonBox(120, 16),
                    const SizedBox(height: 8),
                    _buildSkeletonBox(80, 12),
                  ],
                ),
              ),
            ],
          ),
          // 内容区域
          const SizedBox(height: 16),
          _buildSkeletonBox(double.infinity, 20),
          const SizedBox(height: 8),
          _buildSkeletonBox(double.infinity, 20),
          // 按钮区域
          const SizedBox(height: 16),
          Row(
            children: [
              _buildSkeletonBox(100, 12),
              const Spacer(),
              _buildSkeletonBox(60, 12),
            ],
          ),
        ],
      ),
    ),
  );
}

为啥这样写？

用double.infinity让宽度自适应，这样在鸿蒙不同尺寸的屏幕上都能正常显示
用const EdgeInsets代替普通EdgeInsets，避免每次渲染都重新计算
保持和真实内容一样的间距，这样加载完切换的时候不会"跳"

2. 动画怎么调才能不卡？

这是最头疼的部分。我试了各种方法，最后发现：

dart 复制代码

Widget _buildSkeletonBox(double width, double height, {bool isCircle = false}) {
  return TweenAnimationBuilder<double>(
    tween: Tween(begin: 0.3, end: 1.0),
    duration: const Duration(milliseconds: 1000), // 这里我调长了
    curve: Curves.easeInOut,
    builder: (context, value, child) {
      return Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
          color: Colors.grey[300]!.withOpacity(value),
          borderRadius: isCircle
              ? BorderRadius.circular(width / 2)
              : BorderRadius.circular(4),
        ),
      );
    },
    onEnd: (_) {
      if (mounted) setState(() {});
    },
  );
}

关键点：

duration从500ms调到了1000ms，让动画慢一点
在鸿蒙上，动画太快反而会让用户感觉卡
用mounted检查，避免在组件销毁后还更新状态

3. 状态切换的技巧

加载状态管理是骨架屏的核心。我之前用一个bool变量控制，但发现有时候状态切换会"闪"一下。

dart 复制代码

bool _isLoading = true;
final List<NewsItem> _newsItems = [];

Future<void> _loadData() async {
  setState(() {
    _isLoading = true;
  });
  
  await Future.delayed(const Duration(seconds: 2));
  
  setState(() {
    _newsItems.clear();
    _newsItems.addAll([
      // 模拟数据
    ]);
    _isLoading = false;
  });
}

为啥这样写？

先设_isLoading=true，显示骨架屏
等数据加载完，再设_isLoading=false，显示真实内容
鸿蒙系统上，这个切换要特别平滑，不能让用户看到"跳变"

一张图看懂整个流程

开始
创建骨架屏布局
实现呼吸动画
处理状态切换
测试鸿蒙系统
优化动画
完成

图1：骨架屏在鸿蒙系统上的实现流程

一张图看懂优化点

跨平台代码
Flutter骨架屏
骨架屏组件
鸿蒙系统渲染
Flutter渲染
鸿蒙特定优化
标准Flutter
动画帧率优化
布局自适应
兼容性处理

图2：骨架屏在Flutter和鸿蒙间的实现关系

实战小贴士

动画不要太快：在鸿蒙上，动画时长建议在800-1200ms之间，太快会卡
减少动画元素：不是每个元素都需要动画，只给关键区域加
用模板：把常用的骨架屏布局存起来，避免重复创建

最后说两句

说实话，骨架屏这个小功能，看似简单，但真正做好了，对用户体验的提升是巨大的。在鸿蒙上实现它，需要特别注意动画和布局的优化。

希望我的经验能帮到大家！如果你们在鸿蒙上实现骨架屏也遇到了问题，欢迎在评论区交流。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起探索更多鸿蒙跨平台开发技术！