零基础开始学习鸿蒙开发-交友软件页面设计

1.找一张网图，确定大致页面设计

2.页面布局代码详细介绍

3.完整的代码如下

4.最终的运行效果如下图所示

5.总结

1.找一张网图，确定大致页面设计

2.页面布局代码详细介绍

2.1 顶部文字与搜索框布局，在顶部采用行Row组件布局，设置整行的宽度占满屏幕，使用 .justifyContent(FlexAlign.SpaceBetween)方法，使得组件之间按照一定的比例撑开到两边。具体布局代码如下：

 Row(){Row({space:25}){Text('交友').fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bolder)Text('电竞').fontColor(Color.White).fontWeight(FontWeight.Bolder)}Row(){//搜索框Column(){Search({value:this.onChangeSearchValue,placeholder:'搜一搜',controller:this.searchController}).searchButton('搜索').width('50%').height(40).placeholderFont({ size: 14, weight: 400 }).textFont({ size: 14, weight: 400 }).onSubmit((value: string) => {this.onSubmitSearchValue = value}).onChange((value: string) => {this.onChangeSearchValue = value}).placeholderColor(Color.Grey).placeholderFont({ size: 12, weight: 400})}Column(){Image($r('app.media.activity')).width(30).height(30)Text('活动中心').fontSize(8).fontColor(Color.White).fontWeight(FontWeight.Bolder)}.justifyContent(FlexAlign.Center)}.margin({right:10})//自动向两边对齐。}.width('100%').justifyContent(FlexAlign.SpaceBetween)

2.2 中间的卡片布局，我是使用Column+背景图片自己进行绘制的(如果有更好的方法，可以使用其他方法)，代码详情如下:

  Row(){Column(){Text('玩伴匹配').fontColor(Color.White).fontSize(25)Text('5秒速配游戏CP').fontColor(Color.White).fontSize(8)}.backgroundImage($r('app.media.playFriend')).width(180).height(90).borderRadius(20)Column(){Text('纸飞机').fontColor(Color.White).fontSize(25)Text('一键群发 温暖开聊').fontColor(Color.White).fontSize(8)}.backgroundImage($r('app.media.fly')).width(180).height(90).borderRadius(20)}.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween).margin({left:20})//间隔Row(){}.width('100%').height(50)Row({space:30}){Column(){Text('赏金赛').fontColor(Color.White).fontSize(25)Text('淘汰1人得3元').fontColor('#ffb5480c').fontSize(12)}.height(90).width(120).backgroundImage($r('app.media.prize')).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).borderRadius(30)Column(){Text('钻石工厂').fontColor(Color.White)Text('淘汰1人得3元').fontColor('#ffb5480c').fontSize(12)}.height(90).width(120).backgroundImage($r('app.media.zhuanshi')).justifyContent(FlexAlign.Center).borderRadius(30)Column(){Text('解忧罐子').fontColor(Color.White)Text('治愈小情绪').fontColor('#ffb5480c').fontSize(12)}.height(90).width(120).backgroundImage($r('app.media.guanzi')).justifyContent(FlexAlign.Center).borderRadius(30)}.justifyContent(FlexAlign.SpaceBetween).width('100%').margin({left:30,right:30}).height(80)

2.3 交友资料介绍卡片，我是采用Column，进行绘制的，具体代码如下：

 Row(){Column(){Row(){Column(){Image($r('app.media.avator')).borderRadius(50)}.width(80).height(80)Column(){Text('乐乐林话多技术').fontSize(20)Column(){Grid(){GridItem(){Column(){Row(){Text('.').fontSize(10).fontColor("#ff2ea022")Text('在线').fontSize(10).fontColor("#ff2ea022")}.justifyContent(FlexAlign.Center)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Row(){Image($r('app.media.gps')).width(8).height(8)Text('同城').fontSize(10).fontColor(Color.Gray)}.justifyContent(FlexAlign.Center)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('天秤座').fontSize(10).fontColor(Color.Gray)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('软萌妹子').fontSize(10).fontColor(Color.Gray)}.width(40).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('人皮话多').fontSize(10).fontColor(Color.Gray)}.width(40).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('王者荣耀').fontSize(10).fontColor(Color.Gray)}.width(40).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('和平精英').fontSize(10).fontColor(Color.Gray)}.width(40).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('滑雪').fontSize(10).fontColor(Color.Gray)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('猫猫奴').fontSize(10).fontColor(Color.Gray)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}}.rowsTemplate('1fr 1fr ').columnsTemplate('1fr 1fr 1fr 1fr 1fr')}.width(250).height(50)Text('爱情经不起等待 游戏选我就现在').fontColor(Color.Gray).fontSize(15)Image($r('app.media.beauty')).width(70).height(58)}Column(){Text('Hi').fontColor(Color.White)}.backgroundColor('#ff0c548c').borderRadius({topLeft:5,topRight:5}).width(30).height(20)}.justifyContent(FlexAlign.SpaceBetween).width('95%').margin({left:10,right:10})}.backgroundColor(Color.White).width('95%').height(150).borderRadius({topLeft:30,bottomRight:30,bottomLeft:15,topRight:15})}.width('100%').margin({left:20}).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Top)

2.4 最后布局的是Tabs导航栏设置，前一篇文章有介绍，这里就不详细介绍了，具体代码如下:

 Row(){Column(){Tabs(){TabContent(){Text('比心')}.tabBar(this.tabBuilder('比心',0,$r('app.media.normalHeart'),$r('app.media.selectedHeart')));TabContent(){Text('娱乐')}.tabBar(this.tabBuilder('娱乐',1,$r('app.media.normalAmuse'),$r('app.media.selectedAmuse')));TabContent(){Text('广场')}.tabBar(this.tabBuilder('广场',2,$r('app.media.normalSquare'),$r('app.media.selectedSqare')));TabContent(){Text('聊天')}.tabBar(this.tabBuilder('聊天',3,$r('app.media.normalChat'),$r('app.media.selectedChat')));TabContent(){Text('我的')}.tabBar(this.tabBuilder('我的',4,$r('app.media.normalMe'),$r('app.media.selectedMe')));}.width('100%').onChange((index:number)=>{this.currentIndex = index;})}}

3.完整的代码如下

import { Font } from '@ohos.arkui.UIContext'@Entry
@Component
struct Index {//搜索框改变值@State onChangeSearchValue:string ="";//搜索框提交值@State onSubmitSearchValue:string ="";//坐标信息@State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }//搜索框控制器searchController: SearchController = new SearchController()//定义当前的索引@State currentIndex :number =0;//自定义构建tab@Builder tabBuilder(title:string,targetIndex:number,normalImg:Resource,selectdImg:Resource){Column(){Image(this.currentIndex === targetIndex ? selectdImg : normalImg).size({ width: 25, height: 25 })Text(title).fontColor(this.currentIndex===targetIndex?'#ff49d0e2':Color.Gray);}.width('100%').height(50).justifyContent(FlexAlign.Center)}build() {Row() {Column() {Row(){Row({space:25}){Text('交友').fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bolder)Text('电竞').fontColor(Color.White).fontWeight(FontWeight.Bolder)}Row(){//搜索框Column(){Search({value:this.onChangeSearchValue,placeholder:'搜一搜',controller:this.searchController}).searchButton('搜索').width('50%').height(40).placeholderFont({ size: 14, weight: 400 }).textFont({ size: 14, weight: 400 }).onSubmit((value: string) => {this.onSubmitSearchValue = value}).onChange((value: string) => {this.onChangeSearchValue = value}).placeholderColor(Color.Grey).placeholderFont({ size: 12, weight: 400})}Column(){Image($r('app.media.activity')).width(30).height(30)Text('活动中心').fontSize(8).fontColor(Color.White).fontWeight(FontWeight.Bolder)}.justifyContent(FlexAlign.Center)}.margin({right:10})//自动向两边对齐。}.width('100%').justifyContent(FlexAlign.SpaceBetween)//间隔Row(){}.width('100%').height(50)Row(){Column(){Text('玩伴匹配').fontColor(Color.White).fontSize(25)Text('5秒速配游戏CP').fontColor(Color.White).fontSize(8)}.backgroundImage($r('app.media.playFriend')).width(180).height(90).borderRadius(20)Column(){Text('纸飞机').fontColor(Color.White).fontSize(25)Text('一键群发 温暖开聊').fontColor(Color.White).fontSize(8)}.backgroundImage($r('app.media.fly')).width(180).height(90).borderRadius(20)}.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween).margin({left:20})//间隔Row(){}.width('100%').height(50)Row({space:30}){Column(){Text('赏金赛').fontColor(Color.White).fontSize(25)Text('淘汰1人得3元').fontColor('#ffb5480c').fontSize(12)}.height(90).width(120).backgroundImage($r('app.media.prize')).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).borderRadius(30)Column(){Text('钻石工厂').fontColor(Color.White)Text('淘汰1人得3元').fontColor('#ffb5480c').fontSize(12)}.height(90).width(120).backgroundImage($r('app.media.zhuanshi')).justifyContent(FlexAlign.Center).borderRadius(30)Column(){Text('解忧罐子').fontColor(Color.White)Text('治愈小情绪').fontColor('#ffb5480c').fontSize(12)}.height(90).width(120).backgroundImage($r('app.media.guanzi')).justifyContent(FlexAlign.Center).borderRadius(30)}.justifyContent(FlexAlign.SpaceBetween).width('100%').margin({left:30,right:30}).height(80)//间隔Row(){}.width('100%').height(10)Row(){Text('一起玩').fontColor(Color.Black).fontSize(30).fontStyle(FontStyle.Italic)Row(){Text('+').fontSize(25).fontColor('#ff1a92d2')Text('创建房间').fontColor('#ff1a92d2')}.justifyContent(FlexAlign.End)}.width('100%').height(70).justifyContent(FlexAlign.SpaceBetween).margin({left:10,right:10})Row(){}.width('100%').height(20)Row(){Column(){Text('闲聊扩列').fontColor(Color.Gray)}.backgroundImage($r('app.media.chitchat')).height(60).justifyContent(FlexAlign.Center).backgroundImageSize(ImageSize.Cover).borderRadius(5)Column(){Text('-起嗨歌').fontColor(Color.Gray)}.backgroundImage($r('app.media.singing')).width(70).height(60).justifyContent(FlexAlign.Center).backgroundImageSize(ImageSize.Cover).borderRadius(5)Column(){Text('CP真心话').fontColor(Color.Gray)}.backgroundImage($r('app.media.realChat')).width(70).height(60).justifyContent(FlexAlign.Center).backgroundImageSize(ImageSize.Cover).borderRadius(5)Column(){Text('海龟汤').fontColor(Color.Gray)}.backgroundImage($r('app.media.haigui')).width(70).height(60).justifyContent(FlexAlign.Center).backgroundImageSize(ImageSize.Cover).borderRadius(5)Column(){Text('你画我猜').fontColor(Color.Gray)}.backgroundImage($r('app.media.draw')).width(70).height(60).justifyContent(FlexAlign.Center).backgroundImageSize(ImageSize.Cover).borderRadius(5)}.width('100%').height(100).justifyContent(FlexAlign.SpaceBetween).margin({left:20,right:20})//找她玩Row(){}.height(20)Row(){Text('找ta玩').fontColor(Color.Black).fontSize(30).fontStyle(FontStyle.Italic)}.width('100%')Row(){Column(){Row(){Column(){Image($r('app.media.avator')).borderRadius(50)}.width(80).height(80)Column(){Text('乐乐林话多技术').fontSize(20)Column(){Grid(){GridItem(){Column(){Row(){Text('.').fontSize(10).fontColor("#ff2ea022")Text('在线').fontSize(10).fontColor("#ff2ea022")}.justifyContent(FlexAlign.Center)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Row(){Image($r('app.media.gps')).width(8).height(8)Text('同城').fontSize(10).fontColor(Color.Gray)}.justifyContent(FlexAlign.Center)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('天秤座').fontSize(10).fontColor(Color.Gray)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('软萌妹子').fontSize(10).fontColor(Color.Gray)}.width(40).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('人皮话多').fontSize(10).fontColor(Color.Gray)}.width(40).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('王者荣耀').fontSize(10).fontColor(Color.Gray)}.width(40).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('和平精英').fontSize(10).fontColor(Color.Gray)}.width(40).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('滑雪').fontSize(10).fontColor(Color.Gray)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}GridItem(){Column(){Text('猫猫奴').fontSize(10).fontColor(Color.Gray)}.width(30).height(20).backgroundColor('#ffd6d6d5').justifyContent(FlexAlign.Center).borderRadius(7)}}.rowsTemplate('1fr 1fr ').columnsTemplate('1fr 1fr 1fr 1fr 1fr')}.width(250).height(50)Text('爱情经不起等待 游戏选我就现在').fontColor(Color.Gray).fontSize(15)Image($r('app.media.beauty')).width(70).height(58)}Column(){Text('Hi').fontColor(Color.White)}.backgroundColor('#ff0c548c').borderRadius({topLeft:5,topRight:5}).width(30).height(20)}.justifyContent(FlexAlign.SpaceBetween).width('95%').margin({left:10,right:10})}.backgroundColor(Color.White).width('95%').height(150).borderRadius({topLeft:30,bottomRight:30,bottomLeft:15,topRight:15})}.width('100%').margin({left:20}).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Top)Row(){Column(){Tabs(){TabContent(){Text('比心')}.tabBar(this.tabBuilder('比心',0,$r('app.media.normalHeart'),$r('app.media.selectedHeart')));TabContent(){Text('娱乐')}.tabBar(this.tabBuilder('娱乐',1,$r('app.media.normalAmuse'),$r('app.media.selectedAmuse')));TabContent(){Text('广场')}.tabBar(this.tabBuilder('广场',2,$r('app.media.normalSquare'),$r('app.media.selectedSqare')));TabContent(){Text('聊天')}.tabBar(this.tabBuilder('聊天',3,$r('app.media.normalChat'),$r('app.media.selectedChat')));TabContent(){Text('我的')}.tabBar(this.tabBuilder('我的',4,$r('app.media.normalMe'),$r('app.media.selectedMe')));}.width('100%').onChange((index:number)=>{this.currentIndex = index;})}}}.backgroundImage($r('app.media.backgroundImage')).width('100%').height('100%').backgroundImageSize({width:'100%',height:'100%'})}.height('100%')}
}