2024年鸿蒙最全鸿蒙开发实战案例--朋友圈(1)，2024年最新面试题解析已整理成文档

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

第5部分看似是横向布局，它其实是一个叠加布局，黑色弹窗和两侧内容的叠加。代码如下：

Stack({alignContent:Alignment.End}){
Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
Text(this.momentItem.date)
.fontColor(‘rgb(185,185,185)’)
.fontSize(13)
Text(‘••’)
.width(35)
.height(18)
.borderRadius(5)
.fontSize(12)
.fontWeight(900)
.textAlign(TextAlign.Center)
.fontColor(‘rgb(90,109,150)’)
.backgroundColor(‘rgb(247,247,247)’)

}
.padding({right:20})
.height(40)

Flex({direction:FlexDirection.Row,}){
Flex({direction:FlexDirection.Row}){
Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){
Image(KaTeX parse error: Expected 'EOF', got '}' at position 122: …tAlign.Center) }̲ .width(60) .he…r(‘app.media.commen’))
.width(18)
.height(18)
Text(‘评论’)
.fontColor(Color.White)
.fontSize(14)
.textAlign(TextAlign.Center)
}
.width(60)
.height(40)
}
.borderRadius(4)
.width(120)
.height(40)
.position({x:0})
.backgroundColor(‘rgb(22,22,22)’)

}
.margin({right:60})
.width(120)
.height(40)

}
.height(40)

这样做完之后，看下效果：

问题来了，评论和赞的弹窗不应该每一行都显示，它只能点击的时候显示一个并且带有动画效果，所以现在全部把它们隐藏，注意这里的隐藏不能使用Visibility.Hidden,而是设置位置和尺寸。因为只有宽度和x坐标的同时变化才能做到朋友圈那样的效果，假设弹窗显示时的x坐标是0，宽度120，那么动画开始之前x初始值应该是120，宽度为0才对，但是幽蓝君亲身实验宽度为0时是不行的，所以这里宽度初始值设置0.01，肉眼看不见就好。

说了一通，不知道大家能不能理解，看代码吧，当右侧的按钮点击时：

@State menuWidth:number = 0.001 //弹窗width初始值
@State menuX:number = 120 //弹窗x值初始值

---

animateTo({
duration: 300,
onFinish:() => {
this.momentItem.showC = !this.momentItem.showC
}
}, () => {
if(!this.momentItem.showC){
//弹出
this.menuX = 0
this.menuWidth = 120
}else {
//收起
this.menuX = 120
this.menuWidth = 0.001
}
})

这样可以实现单个弹窗的弹出和收起，但是我们要控制整个页面只能出现一个弹窗，所以在上述点击事件中要同时把点击的序号index传给父组件，让父组件处理数据列表，除index外其他行的showC置为false。

问题又来了，我们之前说过，@state修饰的变量，嵌套数据的变化它是监测不到的，所以即便把数据修改了其他弹窗也不会隐藏。

所以子组件中数据对象使用@ObjectLink修饰，数据模型MomentClass也要使用@Observed修饰：

@Observed
class MomentClass {
public nickName: string;
public content: string;
public date: string;
public showC: boolean;
public images: string[];

constructor(nickName: string,content: string,date: string,showC: boolean,images:string[]) {
this.nickName = nickName;
this.content = content;
this.date = date;
this.showC = showC;
this.images = images;
}
}

---

@ObjectLink @Watch(‘onCountUpdated2’) momentItem: MomentClass;

这样就完成了整个评论弹窗的控制。

接下来就是导航栏了，导航栏有一个显示和隐藏的切换，规律是当第一个listGroupItem滑动消失时导航栏显示，否则隐藏。List组件有一个onScrollIndex方法：

.onScrollIndex((start,end)=>{
if(start == 0 && end == 1){
this.navHide = true
}
if(start == 1 && end == 1){
this.navHide = false
}
})

然后把navHide变量赋值给导航栏的hideTitleBar：

.hideTitleBar(this.navHide)

这样导航栏就可以按照我们要求显示和隐藏了，至于隐藏时的导航栏图标大家可以自己添加一个，和导航栏反向显示就行了。

最后就是点击预览朋友圈图片，幽蓝君的做法是点击图片弹出一个List组件覆盖到屏幕上，看代码：

if (this.previewAlpha) {
List({initialIndex:this.bigImageIndex}){
ForEach(this.bigImageList,(imagePath)=>{
ListItem(){
Image(imagePath)
.width(‘100%’)
.height(‘100%’)
.objectFit(ImageFit.Auto)
}
})

}
.edgeEffect(EdgeEffect.Spring)
.listDirection(Axis.Horizontal)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(Color.Black)
.onClick(()=>{
animateTo({ duration: 500 }, () => {
// 动画闭包内控制Image组件的出现和消失
this.previewAlpha = !this.previewAlpha;
})
})
//弹出动画
.transition({ type: TransitionType.Insert, translate: { x: 20, y: 20 },scale: { x: 0, y: 0 } })
//消失动画
.transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
}

点击图片的时候设置previewAlpha：

animateTo({ duration: 500 }, () => {
// 动画闭包内控制Image组件的出现和消失
this.previewAlpha = !this.previewAlpha;
})

这样朋友圈的功能就基本完成了。

今天的项目比较复杂，描述有些混乱，不知道大家能不能看明白。

为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术，这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (OpenHarmony)开发学习手册》：https://qr21.cn/FV7h05

入门必看：https://qr21.cn/FV7h05
1.  应用开发导读(ArkTS)
2.  ……

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系统定义
2. 技术架构
3. 技术特性
4. 系统安全

如何快速入门：https://qr21.cn/FV7h05
1.  基本概念
2.  构建第一个ArkTS应用
3.  构建第一个JS应用
4.  ……

开发基础知识：https://qr21.cn/FV7h05
1.  应用基础知识
2.  配置文件
3.  应用数据管理
4.  应用安全管理
5.  应用隐私保护
6.  三方应用调用管控机制
7.  资源分类与访问
8.  学习ArkTS语言
9.  ……

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

…(img-rESBTSpr-1715737021433)]
[外链图片转存中…(img-2G1cl2CX-1715737021433)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！