HarmonyOS鸿蒙NEXT中病虫害AI诊断页面布局build实现

HarmonyOS鸿蒙NEXT中病虫害AI诊断页面布局build实现 页面布局结构包括三个colum列布局容器组件，分别是红、黄、绿色框，如下图所示：

打开我们前面新建的PestInfoPage.ets文件，自定义一个AI诊断页面组件PestDiagnosisView，接收2个参数：病虫害实体对象和图片占满屏幕宽度。代码如下：

@Component
struct PestDiagnosisView{
  private pestObj?:PestModel;
  private imgWidth?:number;

  build(){
    Column(){
      // 病害图片
      Column(){
        Image(this.pestObj?.Img)
          .width(this.imgWidth)
          .objectFit(ImageFit.Contain)
          .onClick(() => {
            router.back();
          })
      }
      .layoutWeight(1)
      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))

      Column(){
        // 提示文字
        Text('通过病虫害小模型AI能力' + '\n' +'帮助您诊断病情，并提供防治办法。')
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
          .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
          .fontSize($r('sys.float.ohos_id_text_size_body3'))
          .fontWeight(FontWeight.Regular)
          .lineHeight(20)
          .opacity(0.8)
          .margin({bottom:24})

        // 诊断按钮
        Button('AI诊断预测')
          .width('100%')
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007DFF')
          .margin({bottom:48})
          .onClick(() => {
            // TODO:  调用云端AI图像识别能力接口
            // /
          })
      }
      .height('30%')
      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
      .padding({left:12,right:12})
      .align(Alignment.Bottom)
      .justifyContent(FlexAlign.End)
    }
  }
}

PestInfoPage页面中加载自定义的组件，定义手机设备宽度变量和图片宽度变量，并在aboutToAppear()方法内获取设备宽度及赋值。代码如下：

import PestModel from '../models/PestModel'
import { display, router } from '@kit.ArkUI';
import Constants from '../utils/Constants'

@Entry
@Component
struct PestInfoPage {
  pestObj:PestModel =router.getParams() as PestModel;
  @State deviceWidth:number =Constants.DEVICE_DEFAULT_WIDTH;
  @State imgWidth:number =this.deviceWidth;

  aboutToAppear(): void {
    let displayClass:display.Display=display.getDefaultDisplaySync();
    let width=displayClass?.width/displayClass.densityPixels ?? Constants.DEVICE_DEFAULT_WIDTH;
    this.deviceWidth=width;
    this.imgWidth =this.deviceWidth;
  }

  build(){
    Column(){
      PestDiagnosisView({pestObj:this.pestObj,imgWidth:this.imgWidth});
    }
  }
}

下一篇：自定义病虫害信息页面组件。