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

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

article 2024/12/22 12:08:46

目录

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%')
  }
}

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

5.总结

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


http://www.kler.cn/a/444375.html

相关文章：

  • 项目搭建+删除(单/批)
  • dolphinscheduler服务RPC框架源码解析(八)RPC提供者服务整合Spring框架实现
  • 拼多多电子面单接入：常见问题及专业解决方案
  • 小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书
  • Mac 开机 一闪框 mediasharingd
  • 【MAC】深入浅出 Homebrew 下 Nginx 的安装与配置指南
  • 【开源免费】基于Vue和SpringBoot的靓车汽车销售网站（附论文）
  • 系统移植——Linux 内核顶层 Makefile 详解
  • 谈谈网络流量控制
  • python学opencv|读取图像（十六）修改HSV图像HSV值
  • 【自用】通信内网部署rzgxxt项目_01，后端pipeDemo部署（使用nssm.exe仿照nohup）
  • 1、数据库概念和mysql表的管理
  • c语言----选择结构
  • clickhouse一直重启，日志提示structure needs cleaning
  • LeetCode hot100-76
  • Spark-Streaming容错语义
  • C++12--友元
  • 已有 containerd 的情况下部署二进制 docker 共存
  • 批量DWG文件转dxf（CAD图转dxf）——c#插件实现
  • （C语言）双向链表
  • iClent3D for Cesium 实现无人机巡检飞行效果
  • neo4j 图表数据导入到 TuGraph
  • 使用Docker启用MySQL8.0.11
  • HTMLCSS：这个动态删除按钮打几分？
  • 基于JavaScript的DBUtils增删改查操作实验
  • 算法编程题-不相交的线 联通网络的操作次数 销售价值减少的颜色球