鸿蒙学习构建视图的基本语法（二）
一、层叠布局
// 图片 本地图片和在线图片 Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png')
//自适应伸缩 设置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))
原文地址：https://blog.csdn.net/qq_43547255/article/details/145207919
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！