ArkUI 开发学习随记——登陆界面，正圆头像，主页顶部，列表项案例源码

小丑西瓜666

已于 2024-06-22 19:52:33 修改

阅读量367

点赞数 6

文章标签：学习华为 harmonyos 基础语法 ui 界面开发

于 2024-06-22 19:49:40 首次发布

本文链接：https://blog.csdn.net/zgwnb666/article/details/139879242

版权

案例一：登录界面

代码：

 build() {
    Column({space:10}){
      Image($r("app.media.naxida")).width(100)
      Text("原神？启动!").fontSize(18).fontWeight(700).margin({bottom:40})
      Button("QQ登录").width("100%")
      Button("微信登录").width("100%").backgroundColor("#ddd").fontColor("#000")
    }.width("100%").padding(20)
  }

案例二：正圆头像，胶囊按钮

代码：

build() {
      Column(){
        Image($r("app.media.cat")).width(100).height(100).borderRadius(50)
        Text("每天注意多喝水").height(50).width(150).backgroundColor(Color.Pink).borderRadius(25)
          .margin({top:20})
      }.padding(20)
  }

这两个思路都差不多，只需要将搞两个半圆就行，只是正圆用的正方形。

案例三：主页顶部

代码：

build() {
  Column(){
    Row(){
      Image($r("app.media.ic_arrow_left")).width(40)
      Text("个人中心")
      Image($r("app.media.ic_more")).width(40)
    }.width("100%").justifyContent(FlexAlign.SpaceBetween).backgroundColor(Color.Grey)


  }.width("100%").height("100%").backgroundColor(Color.White)

  }

这里就是简单用了一下对齐方式justifycontent

案例四：列表项

代码：

 build() {

    Row(){
      Column(){
        Text("玩一玩").fontWeight(700).fontSize(20).margin({bottom:10})
        Row(){
          Text("开放世界").fontSize(13).padding({right:5}).border({width:{right:1},color:"#a1a1a1"}).fontColor("#a1a1a1")
          Text("冒险之旅 超好玩").fontSize(13).margin({left:5}).fontColor("#a1a1a1")
        }
      }.alignItems(HorizontalAlign.Start)
      Row(){
        Image($r("app.media.mihoyo")).width(50).borderRadius(5).padding(2)
        Image($r("app.media.ic_arrow_right")).width(50).fillColor(Color.Grey)
      }.justifyContent(FlexAlign.End).width("60%")
    }.width("100%").padding(20)
  }

这个稍微复杂一些但是看应该是看得懂。