HarmonyOS Next Ark UI小练习

凉_橙
73 阅读2分钟

登录页面开发

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({space:15}){
      Image($r('app.media.app_icon')).width(50)
      TextInput({
        placeholder: '请输入用户名'
      })
      TextInput({
        placeholder: '请输入密码'
      }).type(InputType.Password)
      Button('登录').width('100%')
      Row({space:15}){
        Text('前往注册')
        Text('忘记密码')
      }
    }.width('100%').padding(20)
  }
}

image.png

header顶部开发

  Column(){
    Row(){
      Image($r('app.media.ic_public_arrow_left'))
        .width(15)
      Text('个人中心')
      Image($r('app.media.ic_gallery_photoedit_more'))
        .width(15)
    }
    .width('100%').height(50).padding(10)
    .border({width:1,color:'#ccc'})
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceBetween)
  }
  .width('100%').height('100%')
  .backgroundColor('#ccc')
}

image.png

得物列表项

Row(){
  Column({space:15}){
    Text('玩一玩')
      .fontSize(18).fontWeight(700)
    Text('签到兑礼 | 超多大奖 超好玩')
      .fontColor('#999')
      .fontSize(12)
  }
  .alignItems(HorizontalAlign.Start)
  .height('100%')
  Row(){
    Image($r('app.media.app_icon')).width(40)
    Image($r('app.media.ic_public_arrow_right'))
      .width(30)
      .margin({left:5})
      .fillColor('#999')
  }
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%').height(70)
.margin({top:10}).padding(10)
.backgroundColor(Color.White)
.borderRadius(5)

image.png

得物卡片

  build() {
    Column(){
      Column(){
        Image($r('app.media.image1'))
          .width(200)
          .borderRadius({topLeft:15,topRight:15})
        Column({space:10}){
          Text('今晚吃这个|每日艺术分享')
          Text('No.43')
        }.alignItems(HorizontalAlign.Start).margin({top:10,bottom:10})

        Row(){
          Image($r('app.media.app_icon'))
            .margin({left:5,right:5})
            .width(16)
            .borderRadius(8)
          Text('插画师分享聚集地')
            .layoutWeight(1)
            .fontColor('#999')
            .fontSize(12)
          Image($r('app.media.ic_device_earphone_mermaid_left'))
            .width(15)
          Text('2300')
            .margin({right:10})
            .fontColor('#999')
            .fontSize(10)
        }.padding({bottom:10})
      }
      .width(200)
      .border({width:1,color: '#ccc'})
      .borderRadius({topLeft:15,topRight:15})
    }
    .width('100%').height('100%')
  }
}

image.png

播放器组件

build() {
  Column(){
    Column(){
      Stack({
        alignContent: Alignment.Bottom
      }){
        Image($r('app.media.image1'))
          .width(200)
          .borderRadius({
            topLeft:15,
            topRight:15
          })
        Row(){
            Row({space:5}){
              Image($r('app.media.ic_redio_template'))
                .width(15)
                .fillColor(Color.White)
              Text('288万')
                .fontSize(12)
                .fontColor(Color.White)
              Image($r('app.media.ic_contacts_rcs_list'))
                .width(15)
                .fillColor(Color.White)
              Text('8655')
                .fontSize(12)
                .fontColor(Color.White)
            }
            Row(){
              Text('4:33')
                .fontSize(12)
                .fontColor(Color.White)
            }
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding({left:5,right:5,bottom:5})
      }
      Text('[David个人专辑] 欢迎来到国风统治区: 唢呐一响神曲,直接起飞')
        .width('100%')
        .margin({top:5,bottom:5})
        .textOverflow({overflow:TextOverflow.Ellipsis})
        .maxLines(2)

      Row(){
        Text('19万点赞')
          .padding(2)
          .backgroundColor(Color.Pink)
          .fontColor(Color.Red)
          .fontSize(10)
          .borderRadius(5)
        Image($r('app.media.ic_public_arrow_right'))
          .width(20)
          .fillColor('#999')
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .padding(5)
    }
    .width(200)
    .border({width:1,color:'#ccc'})
    .borderRadius({
      topLeft:15,
      topRight:15
    })
  }
  .width('100%').height('100%')
}

image.png

京东登录页面开发

build() {
  Column(){
    Row(){
      Image($r('app.media.jd_cancel')).width(20)
      Text('帮助')
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')

    Image($r('app.media.jd_logo')).width(250)
    Column({space:20}){
      Row(){
        Text('国家/地址').layoutWeight(1)
        Text('中国(+86)')
          .margin({right:2})
          .fontColor('#999')
        Image($r('app.media.jd_right')).width(20)
      }
      .padding({left:15,right:10})
      .width('100%').height(40)
      .backgroundColor('#fff')
      .borderRadius(20)
      TextInput({
        placeholder: '请输入手机号'
      }).backgroundColor('#fff')
      Row(){
        Checkbox()
          .width(10)
          .margin({top:8})
        Text(){
          Span('我已经阅读并同意')
          Span('《京东隐私政策》《京东用户服务协议》').fontColor('#3274f6')
          Span('未注册的手机号将自动创建京东账号')
        }.fontSize(12).fontColor('#666').lineHeight(20)
      }.alignItems(VerticalAlign.Top)
      Button('登录').width('100%').backgroundColor(Color.Red)
      Row(){
        Text('新用户注册')
        Text('账户密码登录')
        Text('无法登录')
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)

      Blank() //自适应空白区域 填充组件
      Text('其他登录方式')
      Row(){
        Image($r('app.media.jd_huawei')).width(34)
        Image($r('app.media.jd_wechat')).width(34).fillColor(Color.Green)
        Image($r('app.media.jd_weibo')).width(34).fillColor(Color.Red)
        Image($r('app.media.jd_QQ')).width(34).fillColor(Color.Blue)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
  }
  .padding(20)
  .width('100%').height('100%')
  .backgroundImage($r('app.media.jd_login_bg'))
}

image.png

支付宝首页练习

build() {
  Stack({alignContent:Alignment.Bottom}){
    // 上面还有一个层叠
    Stack({alignContent:Alignment.Top}){
      // 头部固定区域
      Row(){
        Column(){
          Text('深圳').fontSize(18).fontColor('#fff')
          Text('晴 2°C').fontSize(12).fontColor('#fff')
          Image($r('app.media.zfb_head_down'))
            .position({top:3,left:45})
            .width(12)
            .fillColor('#fff')
        }
        Row(){
          Image($r('app.media.zfb_head_search'))
            .width(20)
            .margin(5)
          Text('深圳公积金查询')
            .layoutWeight(1)
            .fontColor('#666')
            .fontSize(14)
          Text('搜索')
            .width(55)
            .padding({left:10})
            .fontColor('#5b73de')
            .border({width:{left:1},color:'#999'})
        }
        .height(32)
        .margin({left:35,right:10})
        .backgroundColor('#fff')
        .borderRadius(10)
        .layoutWeight(1)
        Image($r('app.media.zfb_head_plus'))
          .width(30)
          .fillColor('#fff')
      }
      .width('100%').height(60)
      .zIndex(99)
      .padding({left:10,right:10})
      .backgroundColor('#5b73de')
      // 主体滚动区域
      Scroll(){
        Column(){
          // 顶部功能
          Row(){
            Column({space:10}){
              Image($r('app.media.zfb_top_scan'))
                .width(36)
                .fillColor('#fff')
              Text('扫一扫')
                .fontSize(18)
                .fontColor('#fff')
            }
            Column({space:10}){
              Image($r('app.media.zfb_top_pay'))
                .width(36)
                .fillColor('#fff')
              Text('收付款')
                .fontSize(18)
                .fontColor('#fff')
            }
            Column({space:10}){
              Image($r('app.media.zfb_top_travel'))
                .width(36)
                .fillColor('#fff')
              Text('出行')
                .fontSize(18)
                .fontColor('#fff')
            }
            Column({space:10}){
              Image($r('app.media.zfb_top_card'))
                .width(36)
                .fillColor('#fff')
              Text('卡包')
                .fontSize(18)
                .fontColor('#fff')
            }
          }
          .width('100%')
          .padding({top:15,bottom:15})
          .justifyContent(FlexAlign.SpaceAround)
          .backgroundColor('#5b73de')
          // menu菜单
          Column(){
            Column(){
              Row(){
                Column({space:8}){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                  Text('青春特权').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav2'))
                    .width(28)
                  Text('市民中心').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav3'))
                    .width(28)
                  Text('菜鸟').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav4'))
                    .width(28)
                  Text('转账').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav5'))
                    .width(28)
                  Text('手机充值').fontSize(14)
                }.layoutWeight(1)
              }.margin({top:15,bottom:15})
              Row(){
                Column({space:8}){
                  Image($r('app.media.zfb_nav6'))
                    .width(28)
                  Text('余额宝').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav7'))
                    .width(28)
                  Text('生活缴费').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav8'))
                    .width(28)
                  Text('哈啰出行').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav9'))
                    .width(28)
                  Text('红包').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav10'))
                    .width(28)
                  Text('医疗健康').fontSize(14)
                }.layoutWeight(1)
              }.margin({top:15,bottom:15})
              Row(){
                Column({space:8}){
                  Image($r('app.media.zfb_nav11'))
                    .width(28)
                  Text('消费圈').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav12'))
                    .width(28)
                  Text('手机充值').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav13'))
                    .width(28)
                  Text('粑粑农场').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav14'))
                    .width(28)
                  Text('高德打车').fontSize(14)
                }.layoutWeight(1)
                Column({space:8}){
                  Image($r('app.media.zfb_nav15_more'))
                    .width(28)
                  Text('更多').fontSize(14)
                }.layoutWeight(1)
              }.margin({top:15,bottom:15})
            }
            .width('100%')
            .padding({left:10,right:10})
            .backgroundColor('#f6f6f6')
            .borderRadius({
              topLeft:15,
              topRight:15
            })
          }.backgroundColor('#5b73de')
          // 活动页面
          Row({space:5}){
            Image($r('app.media.zfb_pro_pic1')).layoutWeight(1)
            Image($r('app.media.zfb_pro_pic2')).layoutWeight(1)
            Image($r('app.media.zfb_pro_pic3')).layoutWeight(1)

          }
          .width('100%')
          .padding({left:10,right:10})

          Column({space:10}){
            Image($r('app.media.zfb_pro_list1'))
            Image($r('app.media.zfb_pro_list2'))
          }.padding(10)
        }
        .padding({top:60,bottom:60})
      }
      .width('100%').height('100%')
      .scrollBarWidth(0)
    }
    // 底部区域
    Row(){
      Image($r('app.media.zfb_tab_home')).width(35)
      Column({space:5}){
        Image($r('app.media.zfb_tab_money')).width(28)
        Text('理财')
      }
      Column({space:5}){
        Image($r('app.media.zfb_tab_life')).width(28)
        Text('生活')
      }
      Column({space:5}){
        Image($r('app.media.zfb_tab_chat')).width(28)
        Text('消息')
      }
      Column({space:5}){
        Image($r('app.media.zfb_tab_me')).width(28)
        Text('我的')
      }
    }
    .width('100%').height(60)
    .zIndex(99)
    .backgroundColor('#fff')
    .justifyContent(FlexAlign.SpaceAround)
    .border({width:{top:1},color:'#ccc'})
  }
  .width('100%').height('100%')
  .backgroundColor('#f6f6f6')
}

image.png

avatar
文章
阅读
粉丝