一.@Extend:抽取特定组件样式、事件可以传递参数
@Extend(Image)
function setImageStyle(){
.size({width:100,height:100 } )
.backgroundColor(Color.Red)
}
Image($r("app.media.layered_image")).setImageStyle()
二.@Styles: 抽取公共样式、事件不可以传递参数
@Styles function setCommonStyle(){
.width(100)
.height(100)
.onClick(()=>{
AlertDialog.show({message:"点击了"})
})
}
Text("设备介绍")
.fontColor("#8fbce7")
.fontSize(20)
.textOverflow({ overflow: TextOverflow.Ellipsis })//需要配合maxLines使用
.maxLines(2)
.lineHeight(30).setCommonStyle()
Image('https://www.itheima.com/images/logo.png').setCommonStyle()
三.@Builder:抽取结构、样式、事件可以传递参数
@Builder
function buildSwiper(){
Stack(){
Swiper() {
Image($r("app.media.layered_image")).setImageStyle()
Image($r("app.media.icon_tip")).setImageStyle()
Image($r("app.media.ic_back")).setImageStyle()
Image($r("app.media.foreground")).setImageStyle()
}
.width("100%")
.height(200)
.indicator(
Indicator.dot()// 小圆点
.itemWidth(20)// 默认的宽
.itemHeight(20)// 默认的高
.color(Color.Black)// 默认的颜色
.selectedItemWidth(30)// 选中的宽
.selectedItemHeight(30)// 选中的高
.selectedColor(Color.White) // 选中的颜色
)
.autoPlay(true)
.loop(true)
.interval(3000)
.vertical(false)
Text("Builder")
}
}
