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

心之所想，行之将至2024-12-24 11:19

目录

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

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

3.完整的代码如下

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

5.总结

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

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

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

javascript 复制代码 
 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+背景图片自己进行绘制的(如果有更好的方法，可以使用其他方法)，代码详情如下:

javascript 复制代码 
  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，进行绘制的，具体代码如下：

javascript 复制代码 
 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导航栏设置，前一篇文章有介绍，这里就不详细介绍了，具体代码如下:

javascript 复制代码 
 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.完整的代码如下

javascript 复制代码 
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%')
  }
}

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

5.总结

初学者，页面的设计可能没那么好看，有错误的地方，欢迎各位博友批评和指正，我会不断的努力和改善，成为一个合格的鸿蒙开发者，每一份努力都值得被尊敬，你们的点赞和收藏是我前进的动力。谢谢!

相关推荐
机智的叉烧1 小时前
前沿重器[57] | sigir24：大模型推荐系统的文本ID对齐学习
人工智能·学习·机器学习
量子-Alex2 小时前
【多模态聚类】用于无标记视频自监督学习的多模态聚类网络
学习·音视频·聚类
吉大一菜鸡2 小时前
FPGA学习（基于小梅哥Xilinx FPGA）学习笔记
笔记·学习·fpga开发
爱吃西瓜的小菜鸡4 小时前
【C语言】判断回文
c语言·学习·算法
小A1595 小时前
STM32完全学习——SPI接口的FLASH（DMA模式）
stm32·嵌入式硬件·学习
岁岁岁平安5 小时前
spring学习(spring-DI(字符串或对象引用注入、集合注入)(XML配置))
java·学习·spring·依赖注入·集合注入·基本数据类型注入·引用数据类型注入
武昌库里写JAVA5 小时前
Java成长之路（一）--SpringBoot基础学习--SpringBoot代码测试
java·开发语言·spring boot·学习·课程设计
qq_589568105 小时前
数据可视化echarts学习笔记
学习·信息可视化·echarts
兔C6 小时前
微信小程序的轮播图学习报告
学习·微信小程序·小程序
海海不掉头发6 小时前
苍穹外卖-day05redis 缓存的学习
学习·缓存
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07构建高效的广告投放系统：应用架构的设计与实现08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10【一文读懂】NTN（非地面网络）技术介绍