＃放码来战．端云一体化开发＃HarmonyOS 5 【农民叔叔】13.【端侧工程】首页HomePage界面布局结构分析

关键容器组件：Scroll、Swiper、Grid、List。

从上至下、外向内的容器层级分别是：

红色：上下滚动组件scroll

黄色：列组件column

蓝色：轮播组件swiper

绿色：表格组件grid

黑色：列表组件list

红色：列表项组件listitem+层叠组件stack

如下图所示：

1.农民叔叔标题

// 标题
        Text('农民叔叔')
          .fontWeight(FontWeight.Medium)
          .fontSize(24)
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .margin({top:12,left:12})
          .alignSelf(ItemAlign.Start)

2.轮播图

// 轮播图
        Swiper(){
          Image($r('app.media.icon_second_card'))
            .borderRadius(16)
            .syncLoad(true)
        }
        .autoPlay(true)
        .width('95%')
        .margin(12)
        .displayCount(1)

3.相机/相册

// 表格布局：相机、相册
        Grid(){
          GridItem(){
            // 相机
            Column(){
              Image($r('app.media.icon_camera'))
                .width(64)
                .height(64)
                .syncLoad(true)
              Text('打开摄像头拍摄')
                .fontSize(12)
                .fontColor($r('sys.color.ohos_id_color_text_primary'))
                .margin({top:4})
            }
            .onClick(() => {
              // 拉取手机摄像头
              // TODO:

            })
          }
          GridItem(){
            // 相册
            Column(){
              Image($r('app.media.icon_photo'))
                .width(64)
                .height(64)
                .syncLoad(true)
              Text('从相册选择')
                .fontSize(12)
                .fontColor($r('sys.color.ohos_id_color_text_primary'))
                .margin({top:4})
            }
            .onClick(() => {
              // 打开手机相册
              // TODO:

            })
          }
        }
        .columnsTemplate('1fr 1fr')
        .rowsTemplate('1fr')
        .borderRadius(24)
        .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
        .margin(12)
        .padding({top:12,bottom:12})
        .width('95%')
        .height('17%')

4.病虫害图集

// 病虫害图片集列表
        Column(){
          Text('病虫害图集')
            .fontSize(16)
            .fontColor($r('sys.color.ohos_id_color_text_primary'))
            .fontWeight(FontWeight.Medium)
            .alignSelf(ItemAlign.Start)
            .margin({left:12,top:12})
          List(){
            ListItem(){
              Stack({alignContent:Alignment.TopStart}){
                // 背景图
                Image($r('app.media.p_putao_heidou'))
                  .objectFit(ImageFit.Cover)
                  .aspectRatio(1.32)
                  .syncLoad(true)
                  .borderRadius(12)
                Column(){
                  // 农作物品名
                  Text('葡萄')
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                    .alignSelf(ItemAlign.Start)
                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
                  // 病虫害名称
                  Text('黑豆病')
                    .fontSize(12)
                    .fontColor($r('sys.color.ohos_id_color_text_secondary'))
                    .margin({top:4})
                }
                .margin({left:8,top:8})
                .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
                .borderRadius(8)
                .padding(4)
              }
              .margin({right:6,top:12})
              .borderRadius(12)
              .onClick(() => {
                // TODO:跳转病害详情页面

              })
            }
          }
          .width('95%')
          .margin({left:12,top:6,right:6,bottom:12})
          .lanes(2)
        }

5.首页build()完整代码

build() {
    Scroll(){
      Column(){
        // 标题
        Text('农民叔叔')
          .fontWeight(FontWeight.Medium)
          .fontSize(24)
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .margin({top:12,left:12})
          .alignSelf(ItemAlign.Start)

        // 轮播图
        Swiper(){
          Image($r('app.media.icon_second_card'))
            .borderRadius(16)
            .syncLoad(true)
        }
        .autoPlay(true)
        .width('95%')
        .margin(12)
        .displayCount(1)

        // 表格布局：相机、相册
        Grid(){
          GridItem(){
            // 相机
            Column(){
              Image($r('app.media.icon_camera'))
                .width(64)
                .height(64)
                .syncLoad(true)
              Text('打开摄像头拍摄')
                .fontSize(12)
                .fontColor($r('sys.color.ohos_id_color_text_primary'))
                .margin({top:4})
            }
            .onClick(() => {
              // 拉取手机摄像头
              // TODO:

            })
          }
          GridItem(){
            // 相册
            Column(){
              Image($r('app.media.icon_photo'))
                .width(64)
                .height(64)
                .syncLoad(true)
              Text('从相册选择')
                .fontSize(12)
                .fontColor($r('sys.color.ohos_id_color_text_primary'))
                .margin({top:4})
            }
            .onClick(() => {
              // 打开手机相册
              // TODO:

            })
          }
        }
        .columnsTemplate('1fr 1fr')
        .rowsTemplate('1fr')
        .borderRadius(24)
        .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
        .margin(12)
        .padding({top:12,bottom:12})
        .width('95%')
        .height('17%')

        // 病虫害图片集列表
        Column(){
          Text('病虫害图集')
            .fontSize(16)
            .fontColor($r('sys.color.ohos_id_color_text_primary'))
            .fontWeight(FontWeight.Medium)
            .alignSelf(ItemAlign.Start)
            .margin({left:12,top:12})
          List(){
            ListItem(){
              Stack({alignContent:Alignment.TopStart}){
                // 背景图
                Image($r('app.media.p_putao_heidou'))
                  .objectFit(ImageFit.Cover)
                  .aspectRatio(1.32)
                  .syncLoad(true)
                  .borderRadius(12)
                Column(){
                  // 农作物品名
                  Text('葡萄')
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                    .alignSelf(ItemAlign.Start)
                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
                  // 病虫害名称
                  Text('黑豆病')
                    .fontSize(12)
                    .fontColor($r('sys.color.ohos_id_color_text_secondary'))
                    .margin({top:4})
                }
                .margin({left:8,top:8})
                .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
                .borderRadius(8)
                .padding(4)
              }
              .margin({right:6,top:12})
              .borderRadius(12)
              .onClick(() => {
                // TODO:跳转病害详情页面

              })
            }
          }
          .width('95%')
          .margin({left:12,top:6,right:6,bottom:12})
          .lanes(2)
        }

      }
      .width('100%')
      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
    }
    .scrollBar(BarState.Off)
  }

下一篇：优化ListItem，避免重复代码，需自定义组件PestListView。