HarmonyOS NEXT开发实战教程：聊天交友App
一早醒来Mate70上热搜了，余承东发文宣布Mate70要在本月发布，史上最强手机终于要来了。
今天分享一个交友app实战教程，是幽蓝君用整整一个周末开发的，时间有限，只做了些皮毛，不是很完善，不过拿来练手应该是足够了。
先上效果图:
下面为大家分享一下本项目的开发过程：
首页
首先当中首先要注意的是渐变色的背景，这个背景在项目的每一个页面中都有出现，这个背景我使用图片来实现，让图片充满整个页面，页面内容部分与背景图片层叠布局。相关代码如下：
Stack({alignContent:Alignment.Top}){
Image($r('app.media.backImg'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Fill)
Navigation(){
//内容部分
}
}然后进入首页的内容部分，首先是导航栏，很明显需要自定义，不过比较简单，一个横向布局搞定：
@Builder NavMenu(){
Row(){
Row({space:3}){
Image($r('app.media.location'))
.width(16)
.height(16)
.objectFit(ImageFit.Auto)
Text('西安市')
.fontSize(13)
.fontColor('#333333')
}
.width(68)
.height(26)
.backgroundColor(Color.White)
.borderRadius(13)
Row({space:12}){
ForEach(this.timeList,(str:string,index)=>{
Column(){
Text(str)
.fontSize(this.timeIndex == index?20:18)
.fontColor(this.timeIndex == index?BasicContant.TEXT_BLACK_COLOR:'rgb(129,129,129)')
.height(21)
if(this.timeIndex == index){
Image($r('app.media.s_time'))
.width(17)
.height(10)
.objectFit(ImageFit.Auto)
}
}
.height(35)
.justifyContent(FlexAlign.Start)
})
}
Row(){
Image($r('app.media.more'))
.width(16)
.height(16)
.objectFit(ImageFit.Auto)
}
.width(68)
.height(16)
.justifyContent(FlexAlign.End)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
.height(44)
.padding({left:12,right:12})
}接下来是人物列表，是一个瀑布流布局，瀑布流看起来很难，但是鸿蒙里直接提供了瀑布流组件WaterFlow，文档也比较详细，甚至直接复制过来就可以使用，需要注意的是我们首先要知道自己的数据列表里图片的尺寸。相关代码如下：
export class WaterFlowDataSource implements IDataSource {
private dataArray: Object[] = []
private listeners: DataChangeListener[] = []
cardList:CardItem[] = [
{cover:$r('app.media.girl_1'),name:'橙子',distance:'3.4km',width:358,height:495},
{cover:$r('app.media.header1'),name:'橙子',distance:'3.4km',width:854,height:1280},
{cover:$r('app.media.header2'),name:'橙子',distance:'3.4km',width:1280,height:853},
{cover:$r('app.media.header3'),name:'橙子',distance:'3.4km',width:1050,height:1280},
{cover:$r('app.media.header4'),name:'橙子',distance:'3.4km',width:853,height:1280},
{cover:$r('app.media.header5'),name:'橙子',distance:'3.4km',width:692,height:1280},
{cover:$r('app.media.header6'),name:'橙子',distance:'3.4km',width:853,height:1280},
]
constructor() {
this.dataArray = this.cardList
}
// 获取索引对应的数据
public getData(index: number): Object {
return this.dataArray[index]
}
// 通知控制器数据重新加载
notifyDataReload(): void {
this.listeners.forEach(listener => {
listener.onDataReloaded()
})
}
// 通知控制器数据增加
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdded(index)
})
}
// 通知控制器数据变化
notifyDataChange(index: number): void {
this.listeners.forEach(listener => {
listener.onDataChanged(index)
})
}
// 通知控制器数据删除
notifyDataDelete(index: number): void {
this.listeners.forEach(listener => {
listener.onDataDeleted(index)
})
}
// 通知控制器数据位置变化
notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener => {
listener.onDataMoved(from, to)
})
}
// 获取数据总数
public totalCount(): number {
return this.dataArray.length
}
// 注册改变数据的控制器
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener)
}
}
// 注销改变数据的控制器
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener)
if (pos >= 0) {
this.listeners.splice(pos, 1)
}
}
// 增加数据
public Add1stItem(): void {
this.dataArray.splice(0, 0, this.dataArray.length)
this.notifyDataAdd(0)
}
// 在数据尾部增加一个元素
public AddLastItem(): void {
this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)
this.notifyDataAdd(this.dataArray.length-1)
}
// 在指定索引位置增加一个元素
public AddItem(index: number): void {
this.dataArray.splice(index, 0, this.dataArray.length)
this.notifyDataAdd(index)
}
// 删除第一个元素
public Delete1stItem(): void {
this.dataArray.splice(0, 1)
this.notifyDataDelete(0)
}
// 删除第二个元素
public Delete2ndItem(): void {
this.dataArray.splice(1, 1)
this.notifyDataDelete(1)
}
// 删除最后一个元素
public DeleteLastItem(): void {
this.dataArray.splice(-1, 1)
this.notifyDataDelete(this.dataArray.length)
}
// 重新加载数据
public Reload(): void {
this.dataArray.splice(1, 1)
this.dataArray.splice(3, 2)
this.notifyDataReload()
}
}WaterFlow() {
LazyForEach(this.dataSource, (item: CardItem,index:number) => {
FlowItem() {
Card({cardItem:item})
.width(this.item_width)
.height(this.item_width * item.height/item.width)
}
}, (item: string) => item)
}
.columnsTemplate("1fr 1fr")
.columnsGap(5)
.rowsGap(5)
.width('100%')
.height('100%')聊天页面
聊天页面其实也比较简单，写页面无非那几种布局方式，这里幽蓝君想讲一下消息气泡，自己的发的消息和别人发的消息我们可以使用FlexAlign.End和FlexAlign.Start两种对齐方式来实现气泡的靠左和靠右显示，然后这个气泡还有一个最大宽度，可以使用constraintSize来实现，以自己发的消息为例贴一段具体代码：
@Component struct MsgFromMe{
build() {
Row(){
Text('这周六有空吗？一起去广场滑滑板可以吗？')
.fontColor(Color.White)
.fontSize(16)
.lineHeight(22)
.padding({left:24,right:24,top:16,bottom:16})
.backgroundColor('rgba(154, 107, 249, 1)')
.borderRadius({bottomLeft:24,topRight:24})
.constraintSize({maxWidth:BasicContant.SCREEN_WIDTH*0.6})
}
.width('100%')
.justifyContent(FlexAlign.End)
.padding({top:12})
}
}以上就是本次交友App的简单讲解，大家可以发送‘鸿蒙社交’获取项目代码。
