Image组件的创建
截屏2024-05-08 14.36.24.png
网络权限配置
截屏2024-05-08 14.57.01.png
Text组件的创建
截屏2024-05-08 15.21.10.png
TextInput组件的创建
截屏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) //数据类型转字符串, 保留0位小数
}).width(300)
.type(InputType.Number)
.onChange(value => {
this.imageWidth = parseInt(value)
})
Button组件的创建
截屏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) //数据类型转字符串, 保留0位小数
}).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组件的创建
截屏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) //数据类型转字符串, 保留0位小数
}).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组件的创建 (圆环组件)
截屏2024-05-11 15.50.23.png
Progress({
value: 10,
total: 30,
type: ProgressType.Ring, //圆环的类型
})
Checkbox组件的创建 (多选框组件)
截屏2024-05-11 16.14.23.png
Checkbox()
.select(false)
.onChange((value)=> {
})
布局组件的创建
截屏2024-05-08 16.40.53.png
截屏2024-05-08 16.42.38.png
Column容器
截屏2024-05-08 16.44.22.png
Column容器主轴方向对齐方式
截屏2024-05-08 16.50.37.png
Column容器交叉轴方向对齐方式
截屏2024-05-08 16.53.12.png
Row容器
Row容器主轴方向对齐方式
截屏2024-05-08 16.51.57.png
Row容器交叉轴方向对齐方式, 下图有误, 应该是VerticalAlign.Top, VerticalAlign.Bottom
截屏2024-05-08 16.54.09.png
Row容器和Column容器小结
截屏2024-05-08 17.19.44.png
主轴justifyContent 设置值都是 FlexAlign枚举
Row组件 交叉轴 alignItems 设置值是 VerticalAlign 枚举, 例如 VerticalAlign.Top, VerticalAlign.Bottom
Column组件alignItems设置值是HorizontailAlign枚举, 例如 HorizontailAlign.Start
循环控制
截屏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容器, 当组件需要叠加显示时用Stack
截屏2024-05-11 15.53.05.png
//stack 容器, 将容器入栈, 相互叠加的组件用stack 容器
Stack(){
//Progress 圆环组件
Progress({
value: 10,
total: 30,
type: ProgressType.Ring,
})
Row(){
Text(`10`)
.fontColor('#36D')
.fontSize(20)
Text(`/ 30`)
.fontColor('#000')
.fontSize(20)
}
}
List组件 (支持滚动, 纵向和横向排列)
截屏2024-05-11 10.32.35.png
使用list实现上面功能
.layoutWeight(1) 权重属性,可以用来动态设置高度, 此处表示List组件的高度是除了标题以外的所有高度
使用List组件, 可以设置alignListItem属性, 让list里面的行元素水平方向居中
给ListItem组件设置swipeAction属性, 可以设置左滑删除效果
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) // 权重属性,可以用来动态设置高度, 此处表示List组件的高度是除了标题以外的所有高度
@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
全局函数, 写在组件外面
截屏2024-05-11 11.37.59.png
全局函数, 调用方式
createItem(item)
组件内的局部函数, 写在组件内部
截屏2024-05-11 11.46.17.png
局部函数, 调用方式
this.createItem(item)
全局样式函数
截屏2024-05-11 11.49.43.png
全局样式函数调用
List({space: 10}) {
ForEach(this.itmts, item => {
ListItem(){
this.createItem(item)
}
})
}.commomStyle()
局部样式函数
截屏2024-05-11 13.59.59.png
调用方式同全局样式函数一致
如果封装的样式属性是某个组件特有的属性, 不是通用属性, 则需要用到继承
- 封装全局Text样式函数,
@Extend只能写在全局模式
截屏2024-05-11 14.07.09.png
