当前位置：首页 > news >正文

【flutter for open harmony】第三方库Flutter 鸿蒙版骨架屏实战指南（适配 1.0.0）✨

news 2026/5/1 8:51:14

【flutter for open harmony】第三方库Flutter 鸿蒙版骨架屏实战指南（适配 1.0.0）✨

Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

本文详细介绍如何在Flutter鸿蒙应用中实现骨架屏效果，包括加载占位和动画效果。

一、前言

骨架屏是加载时的占位效果，可以提升用户体验，避免页面空白。本文将介绍如何在Flutter鸿蒙应用中实现骨架屏功能。

二、效果展示

2.1 功能特性

功能	描述
加载占位	加载时显示占位内容
闪烁动画	骨架屏闪烁效果
内容切换	加载完成后切换内容
刷新功能	支持重新加载

三、项目背景与目标

3.1 项目背景

骨架屏是现代应用中常见的加载效果，比传统的加载指示器更友好。

3.2 项目目标

实现骨架屏布局
实现闪烁动画
实现内容切换
实现刷新功能

四、技术架构设计

4.1 架构概述

骨架屏使用AnimationController控制闪烁动画，通过状态变量切换显示内容。

4.2 动画原理

使用AnimationController控制透明度变化，实现闪烁效果。

五、详细实现

5.1 Flutter端实现

import'dart:async';import'package:flutter/material.dart';classSkeletonPageextendsStatefulWidget{constSkeletonPage({super.key});@overrideState<SkeletonPage>createState()=>_SkeletonPageState();}class_SkeletonPageStateextendsState<SkeletonPage>withSingleTickerProviderStateMixin{lateAnimationController_controller;bool _isLoading=true;@overridevoidinitState(){super.initState();_controller=AnimationController(vsync:this,duration:constDuration(milliseconds:1500),)..repeat();Future.delayed(constDuration(seconds:3),(){if(mounted){setState(()=>_isLoading=false);}});}@overridevoiddispose(){_controller.dispose();super.dispose();}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText('骨架屏'),centerTitle:true,backgroundColor:Colors.blueGrey,foregroundColor:Colors.white,actions:[IconButton(icon:constIcon(Icons.refresh),onPressed:(){setState(()=>_isLoading=true);Future.delayed(constDuration(seconds:3),(){if(mounted){setState(()=>_isLoading=false);}});},),],),body:_isLoading?_buildSkeletonList():_buildContentList(),);}Widget_buildSkeletonList(){returnListView.builder(padding:constEdgeInsets.all(16),itemCount:6,itemBuilder:(context,index){returnCard(margin:constEdgeInsets.only(bottom:16),child:Padding(padding:constEdgeInsets.all(16),child:Row(children:[AnimatedBuilder(animation:_controller,builder:(context,child){returnContainer(width:60,height:60,decoration:BoxDecoration(color:Colors.grey[300]!.withOpacity(0.5+_controller.value*0.3),borderRadius:BorderRadius.circular(30),),);},),constSizedBox(width:16),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[AnimatedBuilder(animation:_controller,builder:(context,child){returnContainer(height:16,width:double.infinity,decoration:BoxDecoration(color:Colors.grey[300]!.withOpacity(0.5+_controller.value*0.3),borderRadius:BorderRadius.circular(4),),);},),constSizedBox(height:8),AnimatedBuilder(animation:_controller,builder:(context,child){returnContainer(height:12,width:150,decoration:BoxDecoration(color:Colors.grey[300]!.withOpacity(0.5+_controller.value*0.3),borderRadius:BorderRadius.circular(4),),);},),],),),],),),);},);}Widget_buildContentList(){returnListView.builder(padding:constEdgeInsets.all(16),itemCount:6,itemBuilder:(context,index){returnCard(margin:constEdgeInsets.only(bottom:16),child:ListTile(leading:CircleAvatar(child:Text('${index+1}')),title:Text('内容标题${index+1}'),subtitle:Text('这是第${index+1}条内容'),),);},);}}