HarmonyOS鸿蒙学习笔记（22）@Builder实战

@Builder标签是一种更轻量的UI元素复用机制，下面通过一个简单的例子来具体说明：
比如如下布局效果：上面是一个轮播的Swiper,下面是一个Grid
在这里插入图片描述
布局代码如下：

build() {Navigation() {Scroll() {Column({ space: CommonConstants.COMMON_SPACE }) {//构建SwiperSwiper(this.swiperController) {ForEach(WindowViewModel.getSwiperImages(), (img: Resource, index?: number) => {Image(img).borderRadius($r('app.float.home_swiper_border_radius'))}, (img: Resource, index?: number) => index + JSON.stringify(img.id))}.margin({top: $r('app.float.home_swiper_margin')}).autoPlay(true)//构建GridGrid() {ForEach(WindowViewModel.getFirstGridData(), (firstItem: ItemData, index?: number) => {GridItem() {Column() {Image(firstItem.image).width($r('app.float.home_home_cell_size')).height($r('app.float.home_home_cell_size'))Text(firstItem.title).fontSize($r('app.float.little_text_size')).margin({ top: $r('app.float.home_home_cell_margin') })}}}, (firstItem: ItemData, index?: number) => index + JSON.stringify(firstItem))}.columnsTemplate(CommonConstants.GRID_FOUR_COLUMNS).rowsTemplate(CommonConstants.GRID_TWO_ROWS).columnsGap($r('app.float.home_grid_columns_gap')).rowsGap($r('app.float.home_grid_row_gap')).padding({top: $r('app.float.home_grid_padding'),bottom: $r('app.float.home_grid_padding')}).height($r('app.float.home_grid_height')).backgroundColor(Color.White).borderRadius($r('app.float.background_border_radius'))}}.scrollBar(BarState.Off).margin({left: $r('app.float.home_padding'),right: $r('app.float.home_padding')})}.title(this.NavigationTitle()).titleMode(NavigationTitleMode.Mini).hideBackButton(true).backgroundColor($r('app.color.background'))}

可以发现布局代码臃肿不易读，此时可以通过@Builder来讲上面的代码进行精简：修改后的布局，将上面的Swiper和Grid分别使用@Builder组件剥离出两个方法buildSwiper和buildGrid，显得更简洁易读：

 @BuilderbuildSwiper(){Swiper(this.swiperController) {ForEach(WindowViewModel.getSwiperImages(), (img: Resource, index?: number) => {Image(img).borderRadius($r('app.float.home_swiper_border_radius'))}, (img: Resource, index?: number) => index + JSON.stringify(img.id))}.margin({top: $r('app.float.home_swiper_margin')}).autoPlay(true)}@BuilderbuildGrid(){Grid() {ForEach(WindowViewModel.getFirstGridData(), (firstItem: ItemData, index?: number) => {GridItem() {Column() {Image(firstItem.image).width($r('app.float.home_home_cell_size')).height($r('app.float.home_home_cell_size'))Text(firstItem.title).fontSize($r('app.float.little_text_size')).margin({ top: $r('app.float.home_home_cell_margin') })}}}, (firstItem: ItemData, index?: number) => index + JSON.stringify(firstItem))}.columnsTemplate(CommonConstants.GRID_FOUR_COLUMNS).rowsTemplate(CommonConstants.GRID_TWO_ROWS).columnsGap($r('app.float.home_grid_columns_gap')).rowsGap($r('app.float.home_grid_row_gap')).padding({top: $r('app.float.home_grid_padding'),bottom: $r('app.float.home_grid_padding')}).height($r('app.float.home_grid_height')).backgroundColor(Color.White).borderRadius($r('app.float.background_border_radius'))}build() {Navigation() {Scroll() {Column({ space: CommonConstants.COMMON_SPACE }) {this.buildSwiper()this.buildGrid()}}.scrollBar(BarState.Off).margin({left: $r('app.float.home_padding'),right: $r('app.float.home_padding')})}.title(this.NavigationTitle()).titleMode(NavigationTitleMode.Mini).hideBackButton(true).backgroundColor($r('app.color.background'))}