Image組件的創(chuàng)建
截屏2024-05-08 14.36.24.png
網(wǎng)絡(luò)權(quán)限配置
截屏2024-05-08 14.57.01.png
Text組件的創(chuàng)建
截屏2024-05-08 15.21.10.png
TextInput組件的創(chuàng)建
截屏2024-05-08 16.03.46.png
Image($r('app.media.test'))
.width(this.imageWidth)
Text($r('app.string.inputWidth'))
.fontSize(30)
.fontColor('#000')
.fontWeight(FontWeight.Medium)
TextInput({
text: this.imageWidth.toFixed(0) //數(shù)據(jù)類型轉(zhuǎn)字符串, 保留0位小數(shù)
}).width(300)
.type(InputType.Number)
.onChange(value => {
this.imageWidth = parseInt(value)
})
Button組件的創(chuàng)建
截屏2024-05-08 16.20.57.png
Image($r('app.media.test'))
.width(this.imageWidth)
Text($r('app.string.inputWidth'))
.fontSize(30)
.fontColor('#000')
.fontWeight(FontWeight.Medium)
TextInput({
text: this.imageWidth.toFixed(0) //數(shù)據(jù)類型轉(zhuǎn)字符串, 保留0位小數(shù)
}).width(300)
.type(InputType.Number)
.onChange(value => {
this.imageWidth = parseInt(value)
})
Button("放大")
.width(100)
.height(50)
.fontSize(30)
.onClick(()=>{
if (this.imageWidth <= 300) {
this.imageWidth += 10
}
})
Button("縮小")
.width(100)
.height(50)
.fontSize(30)
.onClick(()=>{
if (this.imageWidth > 10) {
this.imageWidth -= 10
}
})
Silder組件的創(chuàng)建
截屏2024-05-08 16.29.11.png
Image($r('app.media.test'))
.width(this.imageWidth)
Text($r('app.string.inputWidth'))
.fontSize(30)
.fontColor('#000')
.fontWeight(FontWeight.Medium)
TextInput({
text: this.imageWidth.toFixed(0) //數(shù)據(jù)類型轉(zhuǎn)字符串, 保留0位小數(shù)
}).width(300)
.type(InputType.Number)
.onChange(value => {
this.imageWidth = parseInt(value)
})
Button("放大")
.width(100)
.height(50)
.fontSize(30)
.onClick(()=>{
if (this.imageWidth <= 300) {
this.imageWidth += 10
}
})
Button("縮小")
.width(100)
.height(50)
.fontSize(30)
.onClick(()=>{
if (this.imageWidth > 10) {
this.imageWidth -= 10
}
})
Slider({
min: 10,
max: 300
})
.width('90%')
.blockColor('#36D')
.trackThickness(8)
.showTips(true)
.onChange(value => {
this.imageWidth = value
})
Progress組件的創(chuàng)建 (圓環(huán)組件)
截屏2024-05-11 15.50.23.png
Progress({
value: 10,
total: 30,
type: ProgressType.Ring, //圓環(huán)的類型
})
Checkbox組件的創(chuàng)建 (多選框組件)
截屏2024-05-11 16.14.23.png
Checkbox()
.select(false)
.onChange((value)=> {
})
布局組件的創(chuàng)建
截屏2024-05-08 16.40.53.png
截屏2024-05-08 16.42.38.png
Column容器
截屏2024-05-08 16.44.22.png
Column容器主軸方向?qū)R方式
截屏2024-05-08 16.50.37.png
Column容器交叉軸方向?qū)R方式
截屏2024-05-08 16.53.12.png
Row容器
Row容器主軸方向?qū)R方式
截屏2024-05-08 16.51.57.png
Row容器交叉軸方向?qū)R方式, 下圖有誤, 應(yīng)該是VerticalAlign.Top, VerticalAlign.Bottom
截屏2024-05-08 16.54.09.png
Row容器和Column容器小結(jié)
截屏2024-05-08 17.19.44.png
主軸justifyContent 設(shè)置值都是 FlexAlign枚舉
Row組件 交叉軸 alignItems 設(shè)置值是 VerticalAlign 枚舉, 例如 VerticalAlign.Top, VerticalAlign.Bottom
Column組件alignItems設(shè)置值是HorizontailAlign枚舉, 例如 HorizontailAlign.Start
循環(huán)控制
截屏2024-05-08 17.25.48.png
ForEach(this.itmts, (item, index)=>{
Row({space: 10}){
Image($r('app.media.test'))
.width(50)
Column({space: 10}){
Text(item.name)
.fontSize(20)
.fontColor('#36D')
Text('￥' + item.price)
}.alignItems(HorizontalAlign.Start)
}.justifyContent(FlexAlign.Start)
.width('90%')
.backgroundColor('#DDD')
.height(100)
.padding({left: 10, top: 10})
.alignItems(VerticalAlign.Top)
})
Stack容器, 當(dāng)組件需要疊加顯示時(shí)用Stack
截屏2024-05-11 15.53.05.png
//stack 容器, 將容器入棧, 相互疊加的組件用stack 容器
Stack(){
//Progress 圓環(huán)組件
Progress({
value: 10,
total: 30,
type: ProgressType.Ring,
})
Row(){
Text(`10`)
.fontColor('#36D')
.fontSize(20)
Text(`/ 30`)
.fontColor('#000')
.fontSize(20)
}
}
List組件 (支持滾動(dòng), 縱向和橫向排列)
截屏2024-05-11 10.32.35.png
使用list實(shí)現(xiàn)上面功能
.layoutWeight(1) 權(quán)重屬性,可以用來動(dòng)態(tài)設(shè)置高度, 此處表示List組件的高度是除了標(biāo)題以外的所有高度
使用List組件, 可以設(shè)置alignListItem屬性, 讓list里面的行元素水平方向居中
給ListItem組件設(shè)置swipeAction屬性, 可以設(shè)置左滑刪除效果
ListItem(){
Row({space: 10}){
Image($r('app.media.test'))
.width(50)
Column({space: 10}){
Text(item.name)
.fontSize(20)
.fontColor('#36D')
Text('￥' + item.price)
}.alignItems(HorizontalAlign.Start)
}.justifyContent(FlexAlign.Start)
.width('90%')
.backgroundColor('#DDD')
.height(100)
.padding({left: 10, top: 10})
.alignItems(VerticalAlign.Top)
}swipeAction({end: this.DeleteButton(index)})
})
}.width('100%')
.padding({left: 20})
.alignListItem(ListItemAlign.Center) //讓list里面的組件水平方向居中
.layoutWeight(1) // 權(quán)重屬性,可以用來動(dòng)態(tài)設(shè)置高度, 此處表示List組件的高度是除了標(biāo)題以外的所有高度
@Builder DeleteButton(index: number) {
Button(){
Image($r('app.media.deleteWhite'))
.fillColor(Color.White)
.width(20)
}.width(40)
.height(40)
.margin(5)
.type(ButtonType.Capsule)
.onClick((e)=> {
this.tasks.splice(index, 1)
this.totalTask = this.tasks.length
this.finishTask = this.tasks.filter(item => item.finish).length
})
}
自定義組件
截屏2024-05-11 10.56.51.png
全局函數(shù), 寫在組件外面
截屏2024-05-11 11.37.59.png
全局函數(shù), 調(diào)用方式
createItem(item)
組件內(nèi)的局部函數(shù), 寫在組件內(nèi)部
截屏2024-05-11 11.46.17.png
局部函數(shù), 調(diào)用方式
this.createItem(item)
全局樣式函數(shù)
截屏2024-05-11 11.49.43.png
全局樣式函數(shù)調(diào)用
List({space: 10}) {
ForEach(this.itmts, item => {
ListItem(){
this.createItem(item)
}
})
}.commomStyle()
局部樣式函數(shù)
截屏2024-05-11 13.59.59.png
調(diào)用方式同全局樣式函數(shù)一致
如果封裝的樣式屬性是某個(gè)組件特有的屬性, 不是通用屬性, 則需要用到繼承
- 封裝全局Text樣式函數(shù),
@Extend只能寫在全局模式
截屏2024-05-11 14.07.09.png
