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

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

news 2025/7/29 12:19:52
一、层叠布局

在这里插入图片描述


//   图片 本地图片和在线图片   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.lryc.cn/news/523149.html

相关文章：

  • python-leetcode-存在重复元素 II
  • P6周：VGG-16算法-Pytorch实现人脸识别
  • BeanFactory 是什么？它与 ApplicationContext 有什么区别？
  • 虚幻基础-1：cpu挑选(14600kf)
  • 多种vue前端框架介绍
  • jenkins-node节点配置
  • 计算机网络 （50）两类密码体制
  • 基于SpringBoot+Vue旅游管理系统的设计和实现(源码+文档+部署讲解）
  • 计算机网络-概述
  • Jenkins-基于Role的鉴权机制
  • 计算机网络介质访问控制全攻略：从信道划分到协议详解！！！
  • 5.若依 Configuration ConfigurationProperties 使用
  • 使用docker部署mysql和tomcat服务器发现的问题整理
  • 数据库开发支持服务
  • 通过学习更多样化的生成数据进行更广泛的数据分发来改进实例分割
  • NVIDIA视频编解码
  • GCC支持Objective C的故事？Objective-C?GCC只能编译C语言吗?Objective-C 1.0和2.0有什么区别？
  • 详解深度学习中的Dropout
  • SQL-杂记1
  • Python(十七)excel指定列自动翻译成英文
  • Ubuntu20.04取消root账号自动登录的方法，触觉智能RK3568开发板演示
  • 诡异的Spring @RequestBody驼峰命名字段映射失败为null问题记录
  • YOLOv10改进，YOLOv10检测头融合RFAConv卷积，添加小目标检测层（四头检测）+CA注意机制，全网首发
  • 周末总结(2024/01/18)
  • LLM - 大模型 ScallingLaws 的迁移学习与混合训练(PLM) 教程(3)
  • 【软件开发过程管理规范】需求管理，需求分析，设计开发管理，测试管理（Word）
  • 计算机网络 （49）网络安全问题概述
  • RPA编程实践：Electron实践开始
  • ORB-SLAM2源码学习：MapPoint.cc④: 新增地图点总结
  • 2025西湖论剑-babytrace