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

鸿蒙学习构建视图的基本语法（二）

article 2025/1/19 12:01:24
一、层叠布局

在这里插入图片描述


//   图片 本地图片和在线图片   Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png')
@Entry
@Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间
  // Position
struct Index {
  build() {
    Column(){ //层叠布局 解决组件的层叠问题 更简洁编码效率更高
      Stack({alignContent:Alignment.Bottom}){
        Text('1').width(250).height(250).backgroundColor(Color.Brown)
        Text('2').width(150).height(150).backgroundColor(Color.Blue)
        Text('3').width(50).height(50).backgroundColor(Color.Orange)
      }.width(300).height(600).backgroundColor(Color.Pink)

    }.width('100%').height('100%')
  }
}
二、b站卡片布局

在这里插入图片描述


//   图片 本地图片和在线图片   Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png')
@Entry
@Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间
  // Position
struct Index {
  build() {
    Column(){ //层叠布局 解决组件的层叠问题 更简洁编码效率更高
      Stack({alignContent:Alignment.Bottom}){
        Image($r('app.media.bz_img')).borderRadius({topLeft:10,topRight:10}).width('100%')
        Row(){
          Row({space:5}){
            Image($r('app.media.bz_play')).width(14).fillColor(Color.White)
            Text('288万').fontColor(Color.White)
          }.margin({right:10})
          Row({space:5}){
            Image($r('app.media.bz_msg')).width(14).fillColor(Color.White)
            Text('14.33').fontColor(Color.White)
          }
          Blank()
          Text('14.33').fontColor(Color.White)
        }.height(24).width('100%').padding({
          left:5,
          right:5
        })
      }.width('100%').backgroundColor(Color.Pink)
      Column(){
        Text('【凤凰传奇新歌】欢迎来到国风统治区:唢呐一响神曲《铁衣流派推广曲》').textOverflow({
          overflow:TextOverflow.Ellipsis
        }).fontSize(13).maxLines(2)
        Row(){
          Text('19万点赞').fontSize(10).backgroundColor('#fef0ef').fontColor('#e66c43').padding(5).borderRadius(5)
          Image($r('app.media.bz_more')).width(14)
        }.width('100%').justifyContent(FlexAlign.SpaceBetween).margin({top:6})
      }
    }.width('80%').height('100%')
  }
}
三、支付宝综合案例

在这里插入图片描述


//   图片 本地图片和在线图片   Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png')
@Entry
@Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间
  // Position
struct Index {
  build() {
    Stack({alignContent:Alignment.Bottom}){ //层叠布局 解决组件的层叠问题 更简洁编码效率更高
      Stack({alignContent:Alignment.Top}){
        Row({space:20}){
          Column(){
            Text('北京').fontSize(18).fontColor(Color.White)
            Text('晴 2°C').fontSize(12).fontColor(Color.White)
            Image($r('app.media.zfb_head_down')).width(12).fillColor(Color.White).position({x:40,y:10})
          }
          Row(){
            Image($r('app.media.zfb_head_search'))
              .width(20)
              .fillColor('#666')
              .margin({ left: 5, right: 5 })
            Text('北京交通一卡通').layoutWeight(1)
            // TextInput({
            //   placeholder:'北京交通一卡通'
            // }).backgroundColor(Color.White).placeholderColor('#666').placeholderFont({size:14}).layoutWeight(1)
            Text('|').margin({right:10}).fontColor('#ccc')
            Text('搜索').fontSize(16).fontColor('#5b73de').fontWeight(700)
              .textAlign(TextAlign.Center)
          }.layoutWeight(1).backgroundColor(Color.White).height(32).borderRadius(5).padding({ left: 10, right: 10 })
          // 右边
          Image($r('app.media.zfb_head_plus'))
            .width(30)
            .fillColor('#fff')
        }.backgroundColor('#5b73e1').width('100%').height(60).padding({left:10,right:10}).zIndex(666)
        // 主体页面
        Scroll(){
         Column(){
           // Top快捷按钮区域
           Row() {
             Column() {
               Image($r('app.media.zfb_top_scan'))
                 .width(36)
                 .fillColor('#fff')
               Text('扫一扫')
                 .fontColor('#fff')
             }
             .layoutWeight(1)

             Column() {
               Image($r('app.media.zfb_top_pay'))
                 .width(36)
                 .fillColor('#fff')
               Text('收付款')
                 .fontColor('#fff')
             }
             .layoutWeight(1)

             Column() {
               Image($r('app.media.zfb_top_travel'))
                 .width(36)
                 .fillColor('#fff')
               Text('出行')
                 .fontColor('#fff')
             }
             .layoutWeight(1)

             Column() {
               Image($r('app.media.zfb_top_card'))
                 .width(36)
                 .fillColor('#fff')
               Text('卡包')
                 .fontColor('#fff')
             }
             .layoutWeight(1)
           }
           .backgroundColor('#5b73de')
           .padding({ top: 5, bottom: 15 })
            //nav导航
              Column(){
                Flex({
                  direction:FlexDirection.Row,
                  wrap:FlexWrap.Wrap
                }) {
                  Column() {
                    Image($r('app.media.zfb_nav1'))
                      .width(28).margin({ bottom: 8 })
                    Text('滴滴出行')
                      .fontSize(12).fontColor('#666')
                  }.height(80).justifyContent(FlexAlign.Center)
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav2'))
                      .width(28).margin({ bottom: 8 })
                    Text('生活缴费')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav3'))
                      .width(28).margin({ bottom: 8 })
                    Text('股票')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav4'))
                      .width(28).margin({ bottom: 8 })
                    Text('蚂蚁森林')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav5'))
                      .width(28).margin({ bottom: 8 })
                    Text('手机充值')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)
                  Column() {
                    Image($r('app.media.zfb_nav6'))
                      .width(28).margin({ bottom: 8 })
                    Text('余额宝')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav7'))
                      .width(28).margin({ bottom: 8 })
                    Text('花呗')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav8'))
                      .width(28).margin({ bottom: 8 })
                    Text('飞猪旅行')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav9'))
                      .width(28).margin({ bottom: 8 })
                    Text('淘票票')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav10'))
                      .width(28).margin({ bottom: 8 })
                    Text('饿了么')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav11'))
                      .width(28).margin({ bottom: 8 })
                    Text('读书听书')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav12'))
                      .width(28).margin({ bottom: 8 })
                    Text('基金')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav13'))
                      .width(28).margin({ bottom: 8 })
                    Text('直播广场')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav14'))
                      .width(28).margin({ bottom: 8 })
                    Text('医疗健康')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)

                  Column() {
                    Image($r('app.media.zfb_nav15_more'))
                      .width(28).margin({ bottom: 8 })
                    Text('更多')
                      .fontSize(12).fontColor('#666')
                  }
                  .width('20%').height(70).justifyContent(FlexAlign.Center)
                }

                // 产品区
                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)
                }
                .padding(10)

              }.height(1000).width('100%').backgroundColor('#fff').borderRadius({topLeft:20,topRight:20})
         }.width('100%')
         .padding({ top: 60, bottom: 60 })
        }
      }.width('100%').height('100%').backgroundColor('#5b73de')
      Row(){
        Column(){
          Image($r('app.media.zfb_tab_home'))
            .width(35)
        }.layoutWeight(1)
        Column() {
          Image($r('app.media.zfb_tab_money'))
            .width(28).margin({ bottom: 2 })
          Text('理财')
            .fontSize(12)
        }.layoutWeight(1)
        Column() {
          Image($r('app.media.zfb_tab_life'))
            .width(28).margin({ bottom: 2 })
          Text('生活')
            .fontSize(12)
        }.layoutWeight(1)

        Column() {
          Image($r('app.media.zfb_tab_chat'))
            .width(28).margin({ bottom: 2 })
          Text('消息')
            .fontSize(12)
        }
        .layoutWeight(1)
        Column() {
          Image($r('app.media.zfb_tab_me'))
            .width(28).margin({ bottom: 2 })
          Text('我的')
            .fontSize(12)
        }
        .layoutWeight(1)
      }.width('100%').height(60)
      .backgroundColor('#fbfcfe')
    }.width('100%')
    .height('100%')
    .backgroundColor('#5b73de')
  }
}

菜单导航布局，方法有些许的区别，写法如下（采用layoutWeight）


//   图片 本地图片和在线图片   Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png')
@Entry
@Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间
  // Position
struct Index {
  build() {
    Stack({alignContent:Alignment.Bottom}){ //层叠布局 解决组件的层叠问题 更简洁编码效率更高
      Stack({alignContent:Alignment.Top}){
        Row({space:20}){
          Column(){
            Text('北京').fontSize(18).fontColor(Color.White)
            Text('晴 2°C').fontSize(12).fontColor(Color.White)
            Image($r('app.media.zfb_head_down')).width(12).fillColor(Color.White).position({x:40,y:10})
          }
          Row(){
            Image($r('app.media.zfb_head_search'))
              .width(20)
              .fillColor('#666')
              .margin({ left: 5, right: 5 })
            Text('北京交通一卡通').layoutWeight(1)
            // TextInput({
            //   placeholder:'北京交通一卡通'
            // }).backgroundColor(Color.White).placeholderColor('#666').placeholderFont({size:14}).layoutWeight(1)
            Text('|').margin({right:10}).fontColor('#ccc')
            Text('搜索').fontSize(16).fontColor('#5b73de').fontWeight(700)
              .textAlign(TextAlign.Center)
          }.layoutWeight(1).backgroundColor(Color.White).height(32).borderRadius(5).padding({ left: 10, right: 10 })
          // 右边
          Image($r('app.media.zfb_head_plus'))
            .width(30)
            .fillColor('#fff')
        }.backgroundColor('#5b73e1').width('100%').height(60).padding({left:10,right:10}).zIndex(666)
        // 主体页面
        Scroll(){
          Column(){
            // Top快捷按钮区域
            Row() {
              Column() {
                Image($r('app.media.zfb_top_scan'))
                  .width(36)
                  .fillColor('#fff')
                Text('扫一扫')
                  .fontColor('#fff')
              }
              .layoutWeight(1)

              Column() {
                Image($r('app.media.zfb_top_pay'))
                  .width(36)
                  .fillColor('#fff')
                Text('收付款')
                  .fontColor('#fff')
              }
              .layoutWeight(1)

              Column() {
                Image($r('app.media.zfb_top_travel'))
                  .width(36)
                  .fillColor('#fff')
                Text('出行')
                  .fontColor('#fff')
              }
              .layoutWeight(1)

              Column() {
                Image($r('app.media.zfb_top_card'))
                  .width(36)
                  .fillColor('#fff')
                Text('卡包')
                  .fontColor('#fff')
              }
              .layoutWeight(1)
            }
            .backgroundColor('#5b73de')
            .padding({ top: 5, bottom: 15 })
            //nav导航
            Column(){
              Flex({
                direction:FlexDirection.Row,
                wrap:FlexWrap.Wrap
              }) {
                Column() {
                  Image($r('app.media.zfb_nav1'))
                    .width(28).margin({ bottom: 8 })
                  Text('滴滴出行')
                    .fontSize(12).fontColor('#666')
                }.height(80).justifyContent(FlexAlign.Center)
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav2'))
                    .width(28).margin({ bottom: 8 })
                  Text('生活缴费')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav3'))
                    .width(28).margin({ bottom: 8 })
                  Text('股票')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav4'))
                    .width(28).margin({ bottom: 8 })
                  Text('蚂蚁森林')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav5'))
                    .width(28).margin({ bottom: 8 })
                  Text('手机充值')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)
                Column() {
                  Image($r('app.media.zfb_nav6'))
                    .width(28).margin({ bottom: 8 })
                  Text('余额宝')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav7'))
                    .width(28).margin({ bottom: 8 })
                  Text('花呗')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav8'))
                    .width(28).margin({ bottom: 8 })
                  Text('飞猪旅行')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav9'))
                    .width(28).margin({ bottom: 8 })
                  Text('淘票票')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav10'))
                    .width(28).margin({ bottom: 8 })
                  Text('饿了么')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav11'))
                    .width(28).margin({ bottom: 8 })
                  Text('读书听书')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav12'))
                    .width(28).margin({ bottom: 8 })
                  Text('基金')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav13'))
                    .width(28).margin({ bottom: 8 })
                  Text('直播广场')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav14'))
                    .width(28).margin({ bottom: 8 })
                  Text('医疗健康')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)

                Column() {
                  Image($r('app.media.zfb_nav15_more'))
                    .width(28).margin({ bottom: 8 })
                  Text('更多')
                    .fontSize(12).fontColor('#666')
                }
                .width('20%').height(70).justifyContent(FlexAlign.Center)
              }

              // 产品区
              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)
              }
              .padding(10)
              Column({ space: 10 }) {
                Image($r('app.media.zfb_pro_list1'))
                  .width('100%')
                Image($r('app.media.zfb_pro_list2'))
                  .width('100%')
              }
              .padding(10)
            }.height(1000).width('100%').backgroundColor('#fff').borderRadius({topLeft:20,topRight:20})
          }.width('100%')
          .padding({ top: 60, bottom: 60 })
        }
      }.width('100%').height('100%').backgroundColor('#5b73de')
      Row(){
        Column(){
          Image($r('app.media.zfb_tab_home'))
            .width(35)
        }.layoutWeight(1)
        Column() {
          Image($r('app.media.zfb_tab_money'))
            .width(28).margin({ bottom: 2 })
          Text('理财')
            .fontSize(12)
        }.layoutWeight(1)
        Column() {
          Image($r('app.media.zfb_tab_life'))
            .width(28).margin({ bottom: 2 })
          Text('生活')
            .fontSize(12)
        }.layoutWeight(1)

        Column() {
          Image($r('app.media.zfb_tab_chat'))
            .width(28).margin({ bottom: 2 })
          Text('消息')
            .fontSize(12)
        }
        .layoutWeight(1)
        Column() {
          Image($r('app.media.zfb_tab_me'))
            .width(28).margin({ bottom: 2 })
          Text('我的')
            .fontSize(12)
        }
        .layoutWeight(1)
      }.width('100%').height(60)
      .backgroundColor('#fbfcfe')
    }.width('100%')
    .height('100%')
    .backgroundColor('#5b73de')
  }
}
四、字符串拼接和模版字符串

let name:string = "可可"
let age :number = 18
console.log('简介信息' , '姓名',name)
console.log(`名称：${name},年龄：${age}`)
@Entry
@Component
  //
struct Index {
  build() {

  }
}
五、类型转化（数字和字符串）

在这里插入图片描述


let goods_1:string = '190'
let goods_2:string = '1.90'
let goods_3:string = '1.90a'
let goods_4:string = 'a'


//Number(变量)原样转数字
//parseInt(变量)去掉小数部分
//parseFloat(变量)保留小数部分
console.log('数字是' ,parseFloat(goods_1))
console.log('数字是' ,parseFloat(goods_2))
console.log('数字是' ,parseFloat(goods_3))
console.log('数字是' ,parseInt(goods_4))

console.log('数字是' ,parseInt(goods_1))
console.log('数字是' ,parseInt(goods_2))
console.log('数字是' ,parseInt(goods_3))
console.log('数字是' ,parseFloat(goods_4))
@Entry
@Component
  //
struct Index {
  build() {

  }
}

在这里插入图片描述

let goods_5:number = 150
let goods_6:number = 1590.233
console.log('数字是' ,goods_5.toString())
console.log('数字是' ,goods_6.toFixed())
console.log('数字是' ,goods_6.toFixed(1))
console.log('数字是' ,goods_6.toFixed(2))

在这里插入图片描述


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

相关文章：

  • vue项目配置多语言
  • HBase实训：纸币冠字号查询任务
  • 【Python】深入探讨Python中的单例模式：元类与装饰器实现方式分析与代码示例
  • CIA-Access V2.5_9_2_10G EPON技术原理_关键技术
  • 深入了解卷积神经网络（CNN）：图像处理与深度学习的革命性技术
  • 基于Java的百度AOI数据解析与转换的实现方法
  • Jenkins下载安装
  • 利用 LNMP 实现 WordPress 站点搭建
  • qt自定义加载字体库ttf
  • Android 项目依赖冲突问题：Duplicate class found in modules
  • 阿里云 Serverless 助力盟主直播：高并发下的稳定性和成本优化
  • 窥探QCC518x/308x系列与手机之间的蓝牙HCI记录与分析 - 手机篇
  • 深度学习原理与Pytorch实战
  • 2025最新版IntelliJ IDEA for Mac安装使用指南
  • YOLOv10改进，YOLOv10检测头融合RFAConv卷积，添加小目标检测层（四头检测）+CA注意机制，全网首发
  • docker 部署confluence
  • 使用 Ansys Motor-CAD 的自适应模板加速创新
  • 慧集通（DataLinkX）iPaaS集成平台-系统管理之用户及权限
  • Red Hat8：搭建DHCP服务器
  • Windows 通过 openssh 连接 Ubuntu
  • Spring Boot与Spring的区别
  • Kubernetes集群架构-垃圾回收
  • 不同的检索方法效果评价
  • Java学习，List移动元素
  • 解决leetcode第3418题机器人可以获得的最大金币数
  • openwrt下oaf插件编译安装，实现上网行为监控