HarmonyOS鸿蒙Next第一课：基础课程-从简单的页面开始第二节《布局你的界面》

HarmonyOS鸿蒙Next第一课：基础课程-从简单的页面开始第二节《布局你的界面》 视频中的第十分十六秒开始，出现的代码，第二十到第二十二行，具体是怎么操作的，需要这么配置这三条代码

this.imageButton($r('app.media.login_method1'))
this.imageButton($r('app.media.login_method2'))
this.imageButton($r('app.media.login_method3'))

在视频中貌似没有具体的教程，所以导致练习的时候代码报错。

如果把这三行代码删除，就会如下图显示


更多关于HarmonyOS鸿蒙Next第一课：基础课程-从简单的页面开始第二节《布局你的界面》的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

图片

破案了，其实这是三个图片，经过5到11行的代码定义后显示在模拟器里。所以这个问题的关键是这三个东西是图片。我一直以为是复用了一串代码，他之前定义好了一个⚪圆圈的大小粗细，然后做成了一个模板。通过这个代码引用这个模板，并对这个模板进行加工 ，如添加文字，最后完整展示。

更多关于HarmonyOS鸿蒙Next第一课：基础课程-从简单的页面开始第二节《布局你的界面》的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next的界面布局基于ArkUI框架，采用声明式UI范式。主要布局容器包括线性布局（Row/Column）、弹性布局（Flex）、相对布局（RelativeContainer）、栅格布局（GridRow/GridCol）和列表（List）。开发者通过组合这些容器组件，使用链式调用设置对齐方式、间距等属性来构建界面。布局尺寸可使用百分比、权重或固定值进行自适应。

这三行代码 this.imageButton($r('app.media.login_method1')) 等，是用于创建并添加三个图像按钮到当前布局中的。

具体操作和配置如下：

  1. 代码作用：imageButton 是一个组件构建函数（在ArkUI中通常通过链式调用或装饰器声明，但此处代码片段显示的是构建器模式）。$r('app.media.login_method1') 是资源引用语法，用于获取放置在工程 resources > base > media 目录下的图片资源（例如 login_method1.png）。

  2. 配置步骤：

    • 第一步：准备图片资源。你需要将三张按钮图片（如 login_method1.png, login_method2.png, login_method3.png）放入项目的 resources > base > media 目录中。
    • 第二步：在布局代码中调用。这段代码应该位于你的页面组件（@Component struct）的 build() 方法内。它通常被包裹在一个容器组件（如 Row、Column 或 Flex）中，以实现水平或垂直排列。例如，要使三个按钮水平排列，代码应类似：
      Row() {
  this.imageButton($r('app.media.login_method1'))
  this.imageButton($r('app.media.login_method2'))
  this.imageButton($r('app.media.login_method3'))
}
.justifyContent(FlexAlign.SpaceAround) // 可选：调整间距
.width('100%')
    • 第三步：定义 imageButton 方法（关键）。视频中可能省略了 imageButton 方法的定义。这是一个自定义的构建方法，用于返回一个设置好样式的 Image 或 Button 组件。你需要在你的组件结构体（struct）中定义它。例如：
      @Builder imageButton(icon: Resource) {
  Image(icon)
    .width(40) // 设置宽度
    .height(40) // 设置高度
    .borderRadius(20) // 设置为圆形按钮
    .onClick(() => {
      // 处理按钮点击事件
    })
}
      @Builder 装饰器用于定义一个自定义构建函数。icon: Resource 参数接收图片资源。

总结：报错很可能是因为缺少 imageButton 这个 @Builder 方法的定义。请检查你的代码，确保在组件结构体内正确定义了该方法。图片资源是否已正确放入 media 目录也需要确认。

回到顶部