鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二

一、鸿蒙应用界面开发

弹性布局-Flex

  1. 语法
/*
弹性容器组件 Flex()
位置：
Flex默认主轴水平往右，交叉轴垂直向下（类似Row）
语法：
Flex(参数对象){子组件1,子组件2,子组件3
}
属性方法：
direction：：主轴方向
justifyContent：主轴对齐方式
alignItems：交叉轴对齐方式
wrap:布局换行
*/
  1. 使用场景
// 如果是单行单列的建议使用线性布局
// 如果组件设计多行列的或者是不规则的布局建议使用弹性布局
  1. 主轴方向示例
/*
direction参数：
row：主轴水平往右
column：主轴垂直向下
RowReverse：主轴水平往左
*/
// 示例：FlexDirection.ColumnReverse
import { Filter } from '@ohos.arkui.advanced.Filter';@Entry
@Component
struct Index {@State message: string = 'varin';build() {Flex({direction:FlexDirection.ColumnReverse}){Text().width(50).height(50).backgroundColor("green")Text().width(50).height(50).backgroundColor("green").margin({top:2,bottom:2})Text().width(50).height(50).backgroundColor("green")}.padding(10)}
}

image.png

  1. 主轴方向对齐
/*justifyContent参数：FlexAlign.Start（默认）FlexAlign.Center（居中）FlexAlign.End（右对齐）FlexAlign.SpaceBetween (贴边对齐)FlexAlign.SpaceAround  (间隙对齐)FlexAlign.SpaceEvenly  (均匀对齐)
*/ 
// 示例 FlexAlign.SpaceEvenly
@Entry
@Component
struct Index {@State message: string = 'varin';build() {Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceEvenly}){Text().width(50).height(50).backgroundColor("green")Text().width(50).height(50).backgroundColor("green")Text().width(50).height(50).backgroundColor("green")}.padding(10)}
}

image.png

  1. 交叉轴对齐方式
/*
alignItems枚举参数：
ItemAlign.Auto
ItemAlign.Start
ItemAlign.Center
ItemAlign.End
ItemAlign.Baseline
ItemAlign.Stretch （拉伸功能，类似于100%宽/高）
*/
// 示例 ItemAlign.Stretch
import { Filter } from '@ohos.arkui.advanced.Filter';@Entry
@Component
struct Index {@State message: string = 'varin';build() {Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.Start,alignItems:ItemAlign.Stretch}){Text().width(50).height(50).backgroundColor("green")Text().width(50).height(50).backgroundColor("green").margin({left:2,right:2})Text().width(50).height(50).backgroundColor("green")}.padding(10).width("100%").height("100%")}
}

image.png

弹性布局-Flex换行（warp）

  1. 语法
/*
单行布局：FlexWrap.NoWrap
多行布局：FlexWrap.Wrap
语法：Flex({wrap:FlexWrap.NoWrap/FlexWrap.Wrap}){}
*/
  1. 实现效果

image.png

import { Filter } from '@ohos.arkui.advanced.Filter';@Entry
@Component
struct Index {@State message: string = 'varin';build() {Column(){Text("阶段选择").fontWeight(700).margin({bottom:20})Flex({wrap:FlexWrap.Wrap}){Text("ArkUI").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)Text("ArkTS").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)Text("界面开发").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)Text("系统能力").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)Text("权限控制").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)Text("元服务").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)}}.width("100%").height("100%").backgroundColor("#F5f5f5").padding(10).alignItems(HorizontalAlign.Start)}
}

image.png

绝对定位

  1. 语法
/*
position
条件：
参照父组件x/y轴(0,0)进行偏移
绝对定位后的组件，不占用自身原有位置
语法：
.position(位置对象)
位置对象：{x:值,y:值}
*/
  1. 实现效果

image.png

/*
扩展：
阴影属性：shadow
层级属性：zIndex
文字倾斜：fontStyle
*/import { Filter } from '@ohos.arkui.advanced.Filter';
@Entry
@Component
struct Index {@State message: string = 'varin';build() {Column(){Column(){Text("HOS").backgroundColor("#ff06eaea").position({}).zIndex(999).fontColor(Color.White).fontWeight(500).width(50).textAlign(TextAlign.Center).borderRadius({topLeft:10,bottomRight:10}).border({width:3,style:BorderStyle.Solid,color:"#ffa4d6d6"}).fontStyle(FontStyle.Italic)Image($r("app.media.hw")).width("100%").height(200).borderRadius({topLeft:10}).margin({bottom:10})Row(){Image($r("app.media.user")).width(24).borderRadius(12).margin({left:10,right:10})Text("HarmonyOS").fontWeight(700)}.width("100%")}.width(200).padding({bottom:10}).backgroundColor(Color.White).borderRadius({topLeft:10}).shadow({color:Color.Black,offsetX:2,offsetY:2,radius:100})}.width("100%").height("100%").backgroundColor("#F5f5f5").padding(10).alignItems(HorizontalAlign.Center)}
}

image.png

层叠布局

  1. 简介：层叠布局具有较强的组件层叠能力
  2. 使用场景：卡片层叠效果
  3. 语法
Stack(){组件1组件2组件3
}
// 对齐 alignContent:Alignment枚举类型（9种方位）
// zindex(可以调层叠的关系)
  1. 实现效果

image.png

案例-B站视频卡片

实现效果
image.png

@Entry
@Component
struct Index {@State message: string = 'varin';build() {Column(){Column(){Stack({alignContent:Alignment.BottomEnd}){Image($r("app.media.bz_img")).borderRadius({topLeft:15,topRight:15})Row(){Image($r("app.media.bz_play")).width(20).fillColor(Color.White).margin({left:10,right:10})Text("288万").fontColor(Color.White)Image($r("app.media.bz_msg")).width(20).fillColor(Color.White).margin({left:10,right:10})Text("8655").fontColor(Color.White).layoutWeight(1)Text("4:33").fontColor(Color.White).margin({right:10})}.width("100%").height(40)}.height(200)Text("【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣》燃爆登场！").fontSize(18).textIndent(10).margin(10).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})Row(){Text("19万点赞").backgroundColor("#fffaf0eb").borderRadius(5).fontColor("#ffefbda5").padding(3)Image($r("app.media.bz_more")).width(20).fillColor("#999")}.width("100%").padding(10).justifyContent(FlexAlign.SpaceBetween)}.width(320).backgroundColor(Color.White).borderRadius(15).shadow({color:"#666",offsetX:1,offsetY:1,radius:80})}.width("100%").height("100%").backgroundColor("#f5f5f5").padding(10)}
}

image.png

案例-支付宝首页

实现效果
image.png

/*
扩展： 滚动组件：Scroll
*/@Entry
@Component
struct Index {@State message: string = 'varin';build() {Stack({alignContent:Alignment.Bottom}){Stack({alignContent:Alignment.Top}){// header_searchRow(){Column(){Text("北京").fontColor(Color.White)Text("晴2℃").fontColor(Color.White).fontSize(12)Image($r("app.media.zfb_head_down")).width(12).fillColor(Color.White).position({x:35,y:0})}Row(){Image($r("app.media.zfb_head_search")).width(20).fillColor("#999")Text("北京交通一卡通").margin({left:5}).layoutWeight(1).fontColor("#666")Text("搜索").margin({left:5}).fontColor("#5b73de").border({width:{left:1},color:"#999"}).padding({left:10}).fontWeight(700)}.height(32).layoutWeight(1).backgroundColor(Color.White).borderRadius(5).margin({right:12,left:25}).padding({left:5,right:5})Image($r("app.media.zfb_head_plus")).width(30).fillColor(Color.White)}.width("100%").height(60).zIndex(999).padding({left:10,right:10}).backgroundColor("#5b73de")// bodyScroll(){Column(){Row(){Column(){Image($r("app.media.zfb_top_scan")).width(36).fillColor(Color.White)Text("扫一扫").fontColor(Color.White)}.layoutWeight(1)Column(){Image($r("app.media.zfb_top_pay")).width(36).fillColor(Color.White)Text("收付款").fontColor(Color.White)}.layoutWeight(1)Column(){Image($r("app.media.zfb_top_travel")).width(36).fillColor(Color.White)Text("出行").fontColor(Color.White)}.layoutWeight(1)Column(){Image($r("app.media.zfb_top_card")).width(36).fillColor(Color.White)Text("卡包").fontColor(Color.White)}.layoutWeight(1)}.width("100%").padding({top:5,bottom:15})Column(){Row(){Column(){Image($r("app.media.zfb_nav1")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#fff8873d")Text("滴滴出行").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav2")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff13adc1")Text("生活缴费").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav3")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#fff12745")Text("股票").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav4")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff069134")Text("蚂蚁森林").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav5")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#fff8873d")Text("手机充值").fontColor("#999").fontSize(12)}.layoutWeight(1)}.width("100%").padding(10)Row(){Column(){Image($r("app.media.zfb_nav6")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#fffa6401")Text("余额宝").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav7")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff13adc1")Text("花呗").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav8")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#fff1ae27")Text("飞猪旅行").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav9")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ffde1443")Text("淘票票").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav10")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff44e2f1")Text("饿了么").fontColor("#999").fontSize(12)}.layoutWeight(1)}.width("100%").padding(10)Row(){Column(){Image($r("app.media.zfb_nav11")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff0c89ba")Text("读书听书").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav12")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff058798")Text("基金").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav13")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff429fef")Text("直播广场").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav14")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff2a7adb")Text("医疗健康").fontColor("#999").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_nav15_more")).width(28).fillColor(Color.White).margin({bottom:8}).fillColor("#ff010809")Text("更多").fontColor("#999").fontSize(12)}.layoutWeight(1)}.width("100%").padding(10)Row({space:2}){Image($r("app.media.zfb_pro_pic1")).height(200).layoutWeight(1)Image($r("app.media.zfb_pro_pic2")).height(200).layoutWeight(1)Image($r("app.media.zfb_pro_pic3")).height(200).layoutWeight(1)}.width("100%").padding({left:2,right:2,top:5,bottom:20})Image($r("app.media.zfb_pro_list1")).width("100%").padding({left:2,right:2,top:0,bottom:10})Image($r("app.media.zfb_pro_list2")).width("100%").padding({left:2,right:2,top:0,bottom:10})}.backgroundColor("#f6f6f6").width("100%").borderRadius({topLeft:20,topRight:20})}.width("100%").margin({top:60,bottom:60})}}.width("100%").height("100%")// Tab_navRow(){Column(){Image($r("app.media.zfb_tab_home")).width(35)}.layoutWeight(1)Column(){Image($r("app.media.zfb_tab_money")).width(28)Text("理财").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_tab_life")).width(28)Text("生活").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_tab_chat")).width(28)Text("消息").fontSize(12)}.layoutWeight(1)Column(){Image($r("app.media.zfb_tab_me")).width(28)Text("我的").fontSize(12)}.layoutWeight(1)}.width("100%").height(60).backgroundColor("#fbfcfe")}.backgroundColor("#5b73de").width("100%").height("100%")}
}

image.png
image.png

二、ArkTs语法进阶

字符串拼接

/*
加号可以将两个字符串拼接在一起，成为一个字符串
*/
let name:string = "varin"
console.log("Hello,"+name)

image.png

模板字符串

  • 作用：拼接字符串和变量
  • 优势：更适合多个变量的拼接
// 示例 （反引号）
let name:string = "varin"
let date:string = "6月23日"
console.log(`hello:${name},今天是${date}`)

image.png

类型转换（数字和字符串）

  • 字符串转数字
// Number() :直接转数字，不能存在非数字部分
// parseInt():去除小数部分，转数字
// parseFloat() 保留小数部分，转数字
/*
注意点：在使用console.log()函数时，第一个参数的数据类型需要是字符串
*/ 
let num:string="1.2"
console.log(`${Number(num)}`)
console.log(`${parseInt(num)}`)
console.log(`${parseFloat(num)}`)

image.png

  • 数字转字符串
/*
方法一：加双引号
方法二：toString()
方法三：toFixed() ：四舍五入转字符串，并可设置保留几位小数
*/
let num=1.11
let str1:string = num+""
let str2:string=num.toString()
let str3:string =num.toFixed(1)
console.log(str1)
console.log(typeof str1)
console.log(str2)
console.log(typeof str2)
console.log(str3)
console.log(typeof str3)

image.png

运算符

  • 算术运算符
// 包括加减乘除、取余(求模)等
/*
+
-
*
/ 
%
*/
console.log("result>>>",1+1)
console.log("result>>>",1-1)
console.log("result>>>",1*1)
console.log("result>>>",2/1)
console.log("result>>>",3%2)

image.png

  • 赋值运算符

image.png

  • 一元运算符
/*
符号：++ --
前置：先自增/减再赋值
后缀：先赋值在自增/减*/
let num1:number =1
console.log("result>>>>>>",num1++) // 1
console.log("result>>>>>>",++num1) // 3

image.png

  • 比较运算符
/*
大于：>
大于等于：>=
小于：<
小于等于：<=
等于：==
不等：!=
*/
  • 逻辑运算符
/*
与：&&
或：||
非：！
*/
console.log("result>>>>>",1==1 && true)
console.log("result>>>>>",true || 1)
console.log("result>>>>>",!1)

image.png

数组

  • 数组定义
let names:string[]  =['小明',"小红",'小兰']
  • 数组查找
/*
查找
*/ 
console.log("result>>>>",names)
console.log("result>>>",names[0])
console.log("result>>>",names.length)

image.png

  • 数组修改
names[0]="笑笑"
console.log("result>>>>",names)

image.png

  • 数组增加
console.log("result>>>>",names.unshift("小明","大明")) // 前加，添加完成后会返回数组的长度
console.log("result>>>>",names)
console.log("result>>>>",names.push("小豆")) // 后加,添加完成后会返回数组的长度
console.log("result>>>>",names)

image.png

  • 数组删除
console.log("result>>>>",names.shift() )// 前删，返回删除的项
console.log("result>>>>",names)
console.log("result>>>>",names.pop() )// 后删，返回删除的项
console.log("result>>>>",names)

image.png

  • 任意位置增加或删除
/*
语法：数组名.splice(起始位置，删除个数，新增元素1...)
*/ 
names.splice(0,1) ///删除第一个元素
console.log("result>>>>",names)
names.splice(0,0,"a")// 从下标0新增元素，不删除元素，
console.log("result>>>>",names)
names.splice(0,1,"b")// 替换下标为0的元素
console.log("result>>>>",names)

image.png

单分支-if

let num1:number = 1
if(num1==1){ // 条件为真执行以下语句console.log("true")
}

image.png

多分支-(if-else)

// 
let num1:number = 2
if(num1==1){ // 满足条件执行console.log("true")
}else{// 不满足条件执行console.log("false")
}

image.png

多分支-（if-else-else if）

// 满足什么条件执行什么语句let num1:number = 2
if(num1==1){console.log("1")
}
else if(num1==2){console.log("2")
}
else{console.log("3")
}

多分支-switch

// 匹配条件
let num1:number = 333
switch(num1){case 1:console.log("1")breakcase 2:console.log("2")breakdefault:console.log("error")
}

image.png

三元条件表达式

/*
语法：条件?true:false
*/
1==1?console.log("true"):console.log("false")

image.png

循环语句-while

/*
条件循环:while
语法：
while(true/false){语句
}
*/
let num:number = 1
while (num<=3){console.log("result>>>",num)num++
}
console.log("while循环结束")

image.png

循环语句-for

/*
语法：
for(初始值;条件;变化量){执行语句
}
*/
let num:number = 5
for(let i:number=0;num>=0;num--){console.log("result>>>",num)
}

image.png

退出循环-(break/continue)

  • break 退出循环
let num:number = 5
for(let i:number=0;num>=0;num--){if(num==1){break}console.log("result>>>",num)
}
console.log("for循环结束")

image.png

  • continue 跳出循环
let num:number = 5
for(let i:number=0;num>=0;num--){if(num==1){continue}console.log("result>>>",num)
}
console.log("for循环结束")

image.png

遍历数组

  • 方法一：for
let names:string[] = ["小明","小红","小美","小东"]
for (let i = 0; i < names.length; i++) {console.log("result=>>",names[i])
}

image.png

  • 方法二：for of
let names:string[] = ["小明","小红","小美","小东"]
for (let name of names) {console.log("result>>>>>",name)
}

image.png

对象数组

// 打印对象使用JSON.stringify()//构建对象接口
interface  Person{name:string,age:number
}
let persons:Person[]=[{name:"小明",age:12},{name:"小红",age:13},{name:"小美",age:14},{name:"小东",age:22},
]
// 打印下标为1的对象
console.log(JSON.stringify(persons[0]))

image.png

  • 例：for of 打印所有对象
//构建对象接口
interface  Person{name:string,age:number
}
let persons:Person[]=[{name:"小明",age:12},{name:"小红",age:13},{name:"小美",age:14},{name:"小东",age:22},
]
// 打印下标为1的对象
for (let person of persons) {console.log(JSON.stringify(person))
}

image.png

三、界面交互功能

点击事件

  • 说明：组件被点击时触发的行为
  • 作用：监听组件点击，从而反应对应操作
  • 语法
onClick((参数)=>{})
  • 示例 :点击按钮，弹框信息
@Entry
@Component
struct Index {@State message: string = 'varin';build() {Column(){Button("点击一下").onClick((event: ClickEvent) => {AlertDialog.show({message:'hello',})console.log("点击一下")})}.width("100%").height("100%").padding(10)}
}

image.png

状态管理

  • 介绍：如果希望构建一个动态的、有交互的页面，就需要引入状态的概念。
  • 状态变量：@State
  • 普通变量和状态变量对比
/*
普通变量：在初始化时渲染，后续不会变化
状态变量：需要装饰器装饰，改变会引起UI的渲染刷新（需要设置类型和初始值）
*/

示例：点击按钮修改文本值

/*
结果：
虽然两个文本的值都得到了修改，但是在UI界面并不会重新渲染普通变量的值
注意点：在组件内说明的变量，调用时需要使用this,且定义变量时不需要let关键字修饰
*/ 
@Entry
@Component
struct Index {@State text1:string ='varin1'text2:string = "varin2"build() {Column(){Text(this.text1)Text(this.text2)Button("点击一下").onClick((event: ClickEvent) => {this.text1= "hello,varin1"this.text2= "hello,varin2"console.log(this.text1)console.log(this.text2)})}.width("100%").height("100%").padding(10)}
}

image.png

运算符优先级

/*
高到低：
括号：()
一元：++,--,!
算术：*,/,%,+,-
比较：>,>=,<,<=
比较：==,!=
逻辑：&&=||
赋值：=
*/

案例-计数器

实现效果：点击加号，数字加1，点击减号，数字减1
image.png

@Entry
@Component
struct Index {@State num:number = 0build() {Column(){Row(){Button("-").onClick(()=>{if (this.num > 0) {this.num-=1}})Text(this.num.toString()).padding({left:10,right:10})Button("+").onClick(()=>{this.num+=1})}.width("100%")}.width("100%").height("100%").padding("10")}
}

image.png

ForEach渲染控制

  • 作用：循环渲染重复的组件
/*
语法：
ForEach(数组,(数据中的值：数据类型，索引)=>{
渲染组件并赋值
})
*/

实现效果：
image.png


@Entry
@Component
struct Index {@State titles:string[] = ["电子产品","精品服饰","母婴产品","影音娱乐","海外旅游",]build() {Column(){Column(){ForEach(this.titles,(title:string,index)=>{Text(title).width("100%").height(80).textAlign(TextAlign.Center).fontWeight(700).fontColor(Color.Orange).fontSize(24)})}.width(200).height(80*this.titles.length).backgroundColor(Color.White).borderRadius(10)}.width("100%").height("100%").backgroundColor("#ffe3dfdf").padding(15)}
}

image.png

案例-卡片点赞

实现效果：能点赞和取消点赞
image.png
image.png

@Entry
@Component
struct Index {@State goodNum:number = 8899@State goodColor:string="#999"@State goodState:boolean=falsebuild() {Column(){Column(){Image($r("app.media.hos")).height(280).borderRadius({topLeft:10,topRight:10})Text("华为鸿蒙系统是一款全新的面向全场景的分布式操作系统").lineHeight(30).fontSize(20).margin({left:10,right:10}).fontWeight(700)Row(){Image($r("app.media.user")).width(30).borderRadius(15)Text("Varin").padding({left:10}).layoutWeight(1)Row(){Image($r("app.media.ic_like")).padding({right:5}).width(25).fillColor(this.goodColor)Text(){Span(this.goodNum.toString())}.fontColor(this.goodColor)}.onClick(()=>{if(!this.goodState){this.goodNum+=1this.goodColor="#ffef9898"this.goodState=true}else{this.goodNum-=1this.goodColor="#999"this.goodState=false}})}.padding(10).width("100%")}.width(300).height(400).borderRadius(10).backgroundColor(Color.White)}.width("100%").height("100%").padding("10").backgroundColor("#fff3efef")}
}

案例-美团购物车

实现效果
image.png

@Entry
@Component
struct Index {@State productNum:number=0@State price:number = 40.4@State resultPrice:number =0.0build() {Stack({alignContent:Alignment.Bottom}){Scroll(){Column(){Row(){Image($r("app.media.product1")).width("35%").borderRadius(10)Column(){Text("冲销量100ml缤纷八果水果捞").height(20).width("100%")Text("含1份折扣商品").height(20).width("100%").fontSize(14).fontColor("#999").lineHeight(20)Row(){Text(){Span("￥").fontSize(14)Span("20.2").fontSize(20)Span("￥"+this.price).fontColor("#999").padding({left:5}).decoration({type:TextDecorationType.LineThrough})}.fontColor(Color.Red).layoutWeight(1)Row(){Text("-").layoutWeight(1).height("100%").textAlign(TextAlign.Center).onClick(()=>{if(this.productNum>0){this.productNum--this.resultPrice-=20.2}else{this.resultPrice=0.00}})Text(this.productNum.toString()).height(20).layoutWeight(1).textAlign(TextAlign.Center).height("100%").border({width:{left:1,right:1},color:"#999"})Text("+").layoutWeight(1).textAlign(TextAlign.Center).height("100%").onClick(()=>{this.productNum++this.resultPrice+=20.2})}.border({width:1,color:"#999"}).borderRadius(5).height(25).width(90)}.height(40)}.layoutWeight(1).padding({left:10})}.width("100%").height(80)}.padding({left:10,right:20,top:20}).width("100%").height("100%")}Row(){Column(){Text(){Span("已选 "+this.productNum.toString()+" 件，").fontColor("#999")Span("合计：")Span("￥"+this.resultPrice.toFixed(2)).fontColor(Color.Red)}.width("100%").textAlign(TextAlign.End)Text("共减￥"+this.resultPrice.toFixed(2)).fontColor(Color.Red).width("100%").textAlign(TextAlign.End).fontSize(14).lineHeight(20)}.layoutWeight(1)Button("结算外卖").margin({left:10}).backgroundColor("#fff6ac6b").fontColor(Color.Black)}.width("100%").height(80).backgroundColor(Color.White).padding({left:10,right:20})}.width("100%").height("100%").backgroundColor("#ffeae8e8")}
}

image.png

条件渲染案例-京东加购

实现效果：
image.png


@Entry
@Component
struct Index {@State isStock:boolean=true@State navHeight:number=60build() {Stack({alignContent:Alignment.Bottom}){Scroll(){Column(){Row(){Button("有库存").onClick(()=>{this.isStock=truethis.navHeight=60})Button("无库存").onClick(()=>{this.isStock=falsethis.navHeight=100}).backgroundColor(Color.Red).margin({left:10})}}.width("100%").height("100%").padding(10)}Column(){if(this.isStock!=true){Row(){Image($r("app.media.ic_fly")).width(20).fillColor("#ffee8f37")Text("该商品暂时没有库存，看看类似商品吧").fontSize(10).margin({left:5}).fontColor("#ffee8f37").layoutWeight(1)Row(){Image($r("app.media.ic_arrow_left")).width(15).fillColor("#ff944b06")}.width(16).height(16).borderRadius(8).backgroundColor("#ff777575").opacity(0.3).justifyContent(FlexAlign.Center)}.width("100%").height(40).backgroundColor("#ffffe8d3").padding(15)}Row(){Row(){Column(){Image($r("app.media.ic_more")).width(20)Text("店铺").fontSize(12).lineHeight(20)}.layoutWeight(1)Column(){Image($r("app.media.ic_more")).width(20)Text("客服").fontSize(12).lineHeight(20)}.layoutWeight(1)Column(){Image($r("app.media.ic_more")).width(20)Text("购物车").fontSize(12).lineHeight(20)}.layoutWeight(1)}.layoutWeight(1)if(this.isStock==true){Button("加入购物车").backgroundColor("#fff88940")Button("立即购买").backgroundColor("#ffe90404").margin({left:5})}else{Button("查看类似商品").backgroundColor("#fff88940")}}.width("100%").height(60).padding({left:15,right:15})}.width("100%").height(this.navHeight).backgroundColor(Color.White)}.width("100%").height("100%").backgroundColor("#ffece7e7")}
}

image.png
image.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/360156.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Hi3861 OpenHarmony嵌入式应用入门--轮询按键

Hi3861 OpenHarmony嵌入式应用入门--轮询按键

本篇介绍使用轮询方式读取gpio状态来判断按键状态。 原理图如下 GPIO API API名称 说明 hi_u32 hi_gpio_init(hi_void); GPIO模块初始化 hi_u32 hi_io_set_pull(hi_io_name id, hi_io_pull val); 设置某个IO上下拉功能。 hi_u32 hi_gpio_set_dir(hi_gpio_idx id, hi_gpi…
阅读更多...
达梦数据库（DM8）替换授权dm.key遇到的错误, lic info is different between dm.key and sysinfo.

达梦数据库（DM8）替换授权dm.key遇到的错误, lic info is different between dm.key and sysinfo.

1、报错贴图 2、报错日志提示 version info: security lic info is different between dm.key and sysinfo. 原因说明&#xff1a;dm.key授权与服务器的硬件环境不匹配引起的报错&#xff0c;如&#xff1a;cpu、操作系统版本有关。
阅读更多...
高通安卓12-安卓系统定制2

高通安卓12-安卓系统定制2

将开机动画打包到system.img里面 在目录device->qcom下面 有lito和qssi两个文件夹 现在通过QSSI的方式创建开机动画&#xff0c;LITO方式是一样的 首先加入自己的开机动画&#xff0c;制作过程看前面的部分 打开qssi.mk文件&#xff0c;在文件的最后加入内容 PRODUCT_CO…
阅读更多...
嘀嗒出行项目管理专家和项目管理负责人王禹华受邀为第十三届中国PMO大会演讲嘉宾

嘀嗒出行项目管理专家和项目管理负责人王禹华受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 嘀嗒出行项目管理专家和项目管理负责人王禹华女士受邀为第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“AI时代项目经理挑战机会和个人成长”。大会将于6月29-30日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1a; AI时代对互…
阅读更多...
智能雷达在线编辑名片小程序源码系统 前后端分离 带完整的安装代码包以及搭建教程

智能雷达在线编辑名片小程序源码系统 前后端分离 带完整的安装代码包以及搭建教程

系统概述 智能雷达在线编辑名片小程序源码系统是一款集创新性、实用性和便捷性于一体的工具。它采用前后端分离的架构&#xff0c;为用户提供了一个强大的平台&#xff0c;可用于创建、编辑和管理个性化名片。 该系统旨在满足现代商业和社交需求&#xff0c;提供了一种高效、…
阅读更多...
高校新生如何选择最优手机流量卡?

高校新生如何选择最优手机流量卡?

一年一度的高考已经结束了&#xff0c;愿广大学子金榜题名&#xff0c;家长们都给孩子准备好了手机&#xff0c;那么手机流量卡应该如何选择呢&#xff1f; 高校新生在选择手机流量卡时&#xff0c;需要综合考量流量套餐、费用、网络覆盖、售后服务等多方面因素&#xff0c;以下…
阅读更多...
如何选择和优化谷歌外贸关键词？

如何选择和优化谷歌外贸关键词？

长尾关键词是关键&#xff0c;长尾关键词是指由三个或更多词组成的更具体、更详细的搜索词组。与单个关键词相比&#xff0c;长尾关键词虽然搜索量较低&#xff0c;但往往能带来更高的转化率&#xff0c;因为它们更能精准地反映用户的搜索意图和需求 使用长尾关键词有几个优势…
阅读更多...
全国计算机等级考试WPS如何报名

全国计算机等级考试WPS如何报名

全国计算机等级考试WPS如何报名&#xff1f; 注册并登录 全国计算机等级考试官网选择 考试服务-在线报名选择报考省份-开始报名
阅读更多...
qt经典界面框架

qt经典界面框架

目的 其实就是一个简单的界面显示&#xff0c;是很常用的形式。 说起来简单也是简单&#xff0c;但当初&#xff0c;刚开始做时&#xff0c;感觉非常的复杂&#xff0c;不知如何下手。 现在感觉简单多了。 这个框架利用了QT的现成的MainWindow与QDockWidget&#xff0c;这样就…
阅读更多...
Spring Boot 集成 MinIO 实现文件上传

Spring Boot 集成 MinIO 实现文件上传

Spring Boot 集成 MinIO 实现文件上传 一、 Minio 服务准备 MinIO的搭建过程参考 Docker 搭建 MinIO 对象存储。 登录MinIO控制台&#xff0c;新建一个 Bucket&#xff0c;修改 Bucket 权限为公开。 二、MinIO 集成 添加 MinIO 依赖 <!-- https://mvnrepository.com/ar…
阅读更多...
【算法】数组-基础知识与应用

【算法】数组-基础知识与应用

一.基础理论 数组是存放在连续内存空间上的相同类型数据的集合。数组可以方便的通过下标索引的方式获取到下标对应的数据。 数组下标都是从0开始的。数组内存空间的地址是连续的 因为数组在内存空间的地址是连续的&#xff0c;所以我们在删除或者增添元素的时候&#xff0c…
阅读更多...
STM32 I2C总线锁死原因及解决方法

STM32 I2C总线锁死原因及解决方法

本文介绍STM32 I2C总线锁死原因及解决方法。 在使用STM32 I2C总线操作外设时&#xff0c;有时会遇到I2C总线锁死&#xff08;I2C总线为Busy状态&#xff09;的问题&#xff0c;即便复位MCU也无法解决&#xff0c;本文介绍其锁死的原因和解决方法&#xff0c;并给出相应的参考代…
阅读更多...
干货分享 | TSMaster 中不同总线报文消息过滤的操作方式

干货分享 | TSMaster 中不同总线报文消息过滤的操作方式

TSMaster软件平台支持对不同总线&#xff08;CAN、LIN、FlexRay&#xff09;报文和信号的过滤&#xff0c;包括全局接收过滤、数据流过滤、窗口过滤、字符串过滤、可编程过滤&#xff0c;针对不同的总线信号过滤器的使用方法基本相同。今天重点和大家分享一下关于TSMaster中报文…
阅读更多...
【数据结构】线性表之《队列》超详细实现

【数据结构】线性表之《队列》超详细实现

队列 一.队列的概念及结构二.顺序队列与链队列1.顺序队列2.链队列 三.链队列的实现1.创建队列2.初始化队列3.入队4.出队5.获取队头元素6.获取队尾元素7.队列的大小8.队列的判空9.清空队列10.销毁队列 四.队列的盲区五.模块化源代码1.Queue.h2.Queue.c3.test.c 六.栈和队列必做O…
阅读更多...
FlinkCDC介绍及使用

FlinkCDC介绍及使用

CDC简介 什么是CDC&#xff1f; cdc是Change Data Capture(变更数据获取)的简称。核心思想是&#xff0c;监测并捕获数据库的 变动(包括数据或数据表的插入&#xff0c;更新以及删除等)&#xff0c;将这些变更按发生的顺序完整记录下来&#xff0c;写入到消息中间件以供其它服…
阅读更多...
Flutter 像素编辑器#05 | 缩放与平移

Flutter 像素编辑器#05 | 缩放与平移

theme: cyanosis 本系列&#xff0c;将通过 Flutter 实现一个全平台的像素编辑器应用。源码见开源项目 【pix_editor】。在前三篇中&#xff0c;我们已经完成了一个简易的图像编辑器&#xff0c;并且简单引入了图层的概念&#xff0c;支持切换图层显示不同的像素画面。 《Flutt…
阅读更多...
【工具测评】ONLYOFFICE——你的下一款桌面编辑器

【工具测评】ONLYOFFICE——你的下一款桌面编辑器

文章目录 前言一、安装1.1 跳转官网下载安装包1.2 安装步骤 二、功能介绍2.1 功能全面的 PDF 编辑器2.2 PDF 表单2.3 文本文档编辑器的更新2.4 电子表格编辑器的更新2.5 演示文稿编辑器有哪些更新2.6 所有编辑器中的改进内容2.7 从右至左显示 & 新的本地化选项2.8 可用性提…
阅读更多...
基于Java超市库存管理系统设计和实现(源码+LW+调试文档+讲解等)

基于Java超市库存管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…
阅读更多...
10.2 JavaEE——Spring MVC入门程序

10.2 JavaEE——Spring MVC入门程序

要求在浏览器发起请求&#xff0c;由Spring MVC接收请求并响应&#xff0c;具体实现步骤如下。 一、创建项目 在IDEA中&#xff0c;创建一个名称为chapter10的Maven Web项目。 &#xff08;一&#xff09;手动设置webapp文件夹 1、单击IDEA工具栏中的File→“Project Structu…
阅读更多...
学校校园考场电子钟，同步授时，助力考场公平公正-讯鹏科技

学校校园考场电子钟，同步授时，助力考场公平公正-讯鹏科技

随着教育技术的不断发展&#xff0c;学校对于考场管理的需求也日益提高。传统的考场时钟往往存在时间误差、维护不便等问题&#xff0c;这在一定程度上影响了考试的公平性和公正性。为了解决这些问题&#xff0c;越来越多的学校开始引入考场电子钟&#xff0c;通过同步授时技术…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发