＃放码来战．端云一体化开发＃HarmonyOS 5 【农民叔叔】16.【端侧工程】病虫害AI诊断页面布局build实现原创

鸿花粉H

发布于 2025-6-4 01:36

浏览

0收藏

页面布局结构包括三个colum列布局容器组件，分别是红、黄、绿色框，如下图所示：

cke_3226.png	cke_6250.png

打开我们前面新建的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});
    }
  }
}

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

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签