【HarmonyOS】鸿蒙开发（二）：基础组件与布局实践

<HarmonyOS>鸿蒙开发（二）：基础组件与布局实践本次实验目标是完成校园二手交易平台“河你交易”的登录页面开发，核心要求如下：1. 页面整体背景色设为#f3f3f32. 账号和密码输入区域使用TextInput组件，并通过属性设置圆角样式3. 登录按钮使用Button组件，需设置特定尺寸和样式4. 协议部分需包含Radio（单选按钮），默认状态为未选中5. 整合图片资源（如平台logo、箭头

JJJJ_iii

1134人浏览 · 2025-07-31 14:13:16

JJJJ_iii · 2025-07-31 14:13:16 发布

一、实验内容

本次实验目标是完成校园二手交易平台“河你交易”的登录页面开发，核心要求如下：

页面整体背景色设为#f3f3f3
账号和密码输入区域使用TextInput组件，并通过属性设置圆角样式
登录按钮使用Button组件，需设置特定尺寸和样式
协议部分需包含Radio（单选按钮），默认状态为未选中
整合图片资源（如平台logo、箭头图标、第三方登录图标等）完成完整布局

二、开发过程与知识点解析

1. 开发步骤拆解

（1）页面结构规划

首先分析登录页的视觉层级，将页面拆分为10个核心模块，确定以Column容器作为整体布局框架（纵向排列各模块），内部通过Row容器实现横向元素的排列（如顶部操作区、第三方登录图标区等）。

（2）组件与资源引入

依次添加文本、输入框、按钮、图片等组件，同时引入项目中的图片资源（通过$r('app.media.资源名')的方式引用，如$r('app.media.HenuLogo')表示河大logo）。

（3）样式与交互配置

根据设计要求细化每个组件的属性，包括尺寸、颜色、边距、圆角等，最终完成页面美化。

2. 核心知识点解析

（1）布局容器的使用

Column容器：作为页面根容器，用于纵向排列子组件，通过width('100%')设置占满屏幕宽度，backgroundColor("#f3f3f3")定义页面背景色。
Row容器：用于横向排列子组件，如顶部的“左箭头+更多”区域、协议勾选区域、第三方登录图标区等，通过justifyContent(FlexAlign.SpaceBetween)（两端对齐）或justifyContent(FlexAlign.Center)（居中对齐）控制子组件的排列方式。

（2）基础组件的属性配置

Text组件：用于展示文本内容，可通过fontSize()设置字体大小、fontWeight(FontWeight.Bold)设置粗体、fontColor()设置颜色（如fontColor('#999999')用于协议文本的灰色显示）。
TextInput组件：用于账号和密码输入，账号框使用默认类型，密码框通过type(InputType.Password)设置为密码输入模式（输入内容显示为圆点）；通过width("90%")和height(55)设置尺寸，backgroundColor('#ffffff')设置白色背景，border({radius: 10})设置圆角边框。
Button组件：登录按钮通过width('85%')和height(55)设置尺寸，backgroundColor("#353a88")定义按钮颜色，borderRadius(25)设置圆角，margin({top: 25})设置顶部外边距（与上方密码框拉开距离）。
Radio组件：用于协议勾选，通过Radio({value:'Radio1',group:'radioGroup'})创建单选按钮，checked(false)设置默认未选中状态，width(20)调整大小。
Image组件：用于展示图片，通过width()设置显示尺寸（如width(140)用于河大logo），margin({left: 5})调整内部边距以居中显示。

（3）间距控制方法

padding：用于设置组件内部边距（如padding({ top: 18, bottom: 30 })为“欢迎来到河你交易”文本的上下内边距，增加与相邻组件的距离）。
margin：用于设置组件外部边距（如margin({ left: 15, right: 15 })为顶部操作区设置左右外边距，避免内容贴边）。

3. 完整代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello'

  build() {
    Column() {
      // 1. 顶部操作区：左箭头+更多文本
      Row() {
        Image($r('app.media.ic_public_arrow_left'))
          .width(40)
        Text('更多')
          .fontWeight(FontWeight.Bold)
          .fontSize(16)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .padding({ bottom: 50, right: 10, left: 5 })
      .margin({ left: 15, right: 15 })

      // 2. 河大logo
      Image($r('app.media.HenuLogo'))
        .width(140)

      // 3. 欢迎文本
      Text('欢迎来到河你交易')
        .fontWeight(FontWeight.Bold)
        .fontSize(20)
        .padding({ top: 18, bottom: 30 })

      // 4. 账号输入框
      TextInput({
        placeholder: '请输入账号'
      })
        .width("90%")
        .backgroundColor('#ffffff')
        .height(55)
        .border({
          radius: 10
        })

      // 5. 密码输入框
      TextInput({
        placeholder: '请输入密码'
      })
        .type(InputType.Password)
        .width("90%")
        .backgroundColor('#ffffff')
        .height(55)
        .border({
          radius: 10
        })

      // 6. 登录按钮
      Button('登录')
        .width('85%')
        .backgroundColor("#353a88")
        .height(55)
        .borderRadius(25)
        .fontSize(20)
        .margin({
          top: 25
        })

      // 7. 协议勾选区
      Row() {
        Radio({value:'Radio1',group:'radioGroup'}).checked(false).width(20)
        Text('您已阅读并同意')
          .fontSize(14)
          .fontColor('#999999')
        Text('《用户服务协议》 《隐私权政策》')
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
      }
      .padding({ top: 20, bottom: 40 })

      // 8. 其他登录方式文本
      Text('-其他登录方式-')
        .fontSize(14)
        .fontColor('#999999')
        .margin({
          top: 25
        })

      // 9. 第三方登录图标区
      Row() {
        Row(){
          Image($r('app.media.phone'))
            .width(30)
            .margin({ left: 5 })
        }
          .width(40)
          .height(40)
          .margin({ right: 30 })
          .backgroundColor('#dbdbdb')
          .border({
          radius: 20
        })

        Row(){
          Image($r('app.media.wei_xin'))
            .width(30)
            .margin({ left: 5 })
        }
        .width(40)
        .height(40)
        .backgroundColor('#dbdbdb')
        .border({
          radius: 20
        })

        Row(){
          Image($r('app.media.QQ'))
            .width(25)
            .margin({ left: 6 })
        }
        .width(40)
        .height(40)
        .margin({ left:30 })
        .backgroundColor('#dbdbdb')
        .border({
          radius: 20
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .margin({ top: 20 })

      // 10. 底部图片
      Image($r('app.media.LoginBottom'))
        .width('90%')
        .margin({top:8})
    }
    .width('100%')
    .backgroundColor("#f3f3f3")
    .margin({top:5,bottom:1})
  }
}

三、运行结果

在预览器中可查看完整的登录页面效果：页面整体背景为#f3f3f3，各组件按预期排列，包括顶部的箭头与“更多”文本、河大logo、欢迎语、账号密码输入框（带圆角）、登录按钮、协议勾选区（单选框默认未选中）、其他登录方式提示及对应的图标（带灰色圆形背景），底部图片也正常显示，整体布局与样式符合设计要求。

四、学习总结

掌握的知识点

熟练运用Column和Row容器进行页面布局，理解纵向与横向排列的逻辑。
掌握Text、TextInput、Button、Radio、Image等基础组件的属性配置（如尺寸、颜色、边距、圆角等）。
学会引用项目中的图片资源，通过$r('app.media.资源名')调用本地图片。
理解padding（内边距）和margin（外边距）在页面间距控制中的作用。
掌握TextInput的密码模式设置（type(InputType.Password)）和Radio组件的默认状态配置（checked(false)）。

遇到的问题及解决方法

协议部分单选框设置：初期参考资料未详细说明Radio组件的用法，通过查阅其他视频教程，掌握了group属性（用于分组）和checked属性（设置默认状态）的配置方法。
第三方登录图标圆形背景实现：需要为图标添加灰色圆形背景，通过嵌套Row组件（外层Row设置width(40)、height(40)、backgroundColor('#dbdbdb')和border({radius: 20})），实现了静态圆形背景效果（暂未实现交互，将在后续学习中完善）。

本次实验通过实际开发登录页面，深化了对基础组件和布局逻辑的理解，同时提升了独立解决问题的能力，为后续复杂页面开发打下了基础。