1.自定义组件抽离 @commpont
/**
* 组件外部引入
*/
@Component
export struct NavigationBar {
private title: ResourceStr
build() {
Row() {
Image($r('app.media.returns'))
.width(30)
.height(30)
.margin({ right: 10 })
Text(this.title)
.fontSize(30)
.fontWeight(FontWeight.Bold)
// Black组件可以暂满剩余的盒子的宽度
Blank()
Image($r('app.media.Refreshs'))
.width(30)
.height(30)
}
.height(30)
.justifyContent(FlexAlign.Start)
// .backgroundColor('#f7f7')
.width('100%')
}
}
2.自定义全局构建函数 @Builder
将列表中的每一项抽离成一个方法
@Builder function itemGrilCard(iterm: iterm){
Row(){
Image(iterm.image)
.width(120)
.height(120)
// 消除锯齿效果
.interpolation(ImageInterpolation.High)
Column({space:4}){
if(iterm.changeGril){
Text(iterm.name)
.TextIStyle()
}else{
Text(iterm.name)
.TextIStyle()
Text(iterm.price)
.TextIStyle()
}
}
.height(100)
.margin(10)
.alignItems(HorizontalAlign.Start)
}
.fillScreen()
}
3.自定义style全局构建函数@style
@Styles function fillScreen(){
.width('100%')
.backgroundColor('#f6f6f6')
.padding(10)
.borderRadius(10)
}
4.组件特有全局构建函数@Extend(Text)
@Extend(Text) function TextIStyle(){
.fontWeight(FontWeight.Bold)
.fontSize(20)
}