// 自定义构建函数，将重复利用的UI元素抽象成一个方法。此处样式为：上方图标下方文字
@Builder
IconAndDescription(icon: Resource, description: string | Resource, iconSize?: Size, radius?: number) {
Column() {
Image(icon)
.size(iconSize === undefined ? { height: $r(‘app.integer.icon_default_height’),
width: $r(‘app.integer.icon_default_height’) } : iconSize)
.borderRadius(radius)
Text(description)
.margin({ top: $r(‘app.integer.margin_between_icon_and_description’) })
}
}
// 自定义构建函数。此处样式为：在Row组件中横向排列IconAndDescription
@Builder
CustomRow(iconsAndDescriptions: IconAndDescription[]) {
Row() {
ForEach(iconsAndDescriptions, (item: IconAndDescription) => {
this.IconAndDescription(item.icon, item.description)
})
}
.width( r ( ′ a p p . s t r i n g . s i z e f u l l ′ ) ) . j u s t i f y C o n t e n t ( F l e x A l i g n . S p a c e A r o u n d ) . p a d d i n g ( r('app.string.size_full')) .justifyContent(FlexAlign.SpaceAround) .padding( r(′app.string.sizefull′)).justifyContent(FlexAlign.SpaceAround).padding(r(‘app.integer.padding_small’))
.margin({ top: KaTeX parse error: Expected 'EOF', got '}' at position 31: …margin_small') }̲) .backgroundCo…r(‘app.color.color_transparent_aa’))
.borderRadius($r(‘app.integer.border_radius’))
}
高性能知识点
