Dev.to

HarmonyOS NEXT开发实战：从图标库到布局属性全解析

作者：Feri（12年+资深程序员，鸿蒙开发/Java技术专家）一、HarmonyOS图标库深度应用 1.1 图标库核心优势 HarmonyOS官方图标库专为开发者设计，具备三大核心能力：多场景覆盖：包含系统组件、设备控制、生活服务等18+分类图标灵活定制：支持颜色（fillColor）、尺寸（width/height）、格式（SVG/PNG）实时调整工程化适配：默认遵循ic_命名规范，与ArkUI框架无缝集成 1.2 图标下载与工程集成操作步骤：访问官方图标库：HarmonyOS图标库选择SVG格式下载（推荐，支持无损缩放）存储路径规范：resources/base/media/ 命名优化示例：原文件：material-account.svg → 重命名：ic_user_account.svg 1.3 ArkUI图标组件实战通过Image组件加载图标，并通过fillColor实现主题色适配： @Entry @Component struct IconDemo { @State themeColor: ResourceColor = Color.Primary build() { Column() { // 标题栏 Text("鸿蒙图标应用案例") .fontSize(28) .fontWeight(FontWeight.Bold) .margin({ bottom: 20 }) // 图标展示区 Row() { // 系统图标 Image($r('app.media.ic_system_settings')) .width(48) .height(48) .fillColor(this.themeColor) .margin({ right: 30 }) // 自定义业务图标 Image($r('app.media.ic_user_avatar')) .width(60) .height(60) .fillColor(Color.Gray) } .padding(15) .backgroundColor(Color.White) .shadow({ radius: 5, color: '#1A000000' }) } .width("100%") .padding(20) } } 效果预览：二、ArkUI布局属性权威指南 2.1 常用布局属性速查表属性分类核心属性作用场景典型值示例容器布局 Column/Row/Stack 页面结构搭建 Column() { ... } 尺寸控制 width/height 组件大小定义 width("90%") 间距控制 padding/margin 内外边距调节 padding(10) 对齐方式 justifyContent/alignItems 子组件排列规则 justifyContent.FlexEnd 2.2 内边距padding深度解析核心作用：控制组件内容与边框的距离，提升视觉呼吸感三种配置方式：单值配置（等距内边距）： .padding(20) // 上下左右各20px 双向配置（水平/垂直分离）： .padding({ horizontal: 15, vertical: 10 }) // 水平15px，垂直10px 四向精准配置： .padding({ top: 8, right: 16, bottom: 8, left: 16 }) // 典型按钮内边距实战案例： @Entry @Component struct PaddingDemo { build() { Column() { // 基础文本框 Text("标准内边距") .backgroundColor('#FF9500') .fontColor(Color.White) .padding(12) // 自定义内边距 Text("上10/右20/下10/左20") .backgroundColor('#34C759') .fontColor(Color.White) .padding({ top: 10, right: 20, bottom: 10, left: 20 }) } .width("100%") .padding(20) } } 效果对比： 2.3 外边距margin高级应用核心作用：控制组件与外部元素的间距，实现布局分层实战技巧：组件水平排列：通过margin({ right: 15 })设置元素间隔卡片阴影效果：利用margin留出阴影显示空间响应式布局：使用marginPercent适配不同屏幕 @Entry @Component struct MarginDemo { build() { Column() { // 卡片容器 Row() { // 左侧组件 Text("Feri编程") .backgroundColor('#FF3B30') .fontColor(Color.White) .padding(12) .margin({ right: 20 }) // 右侧边距20px // 右侧组件 Text("鸿蒙开发") .backgroundColor('#007AFF') .fontColor(Color.White) .padding(12) .margin({ left: 20 }) // 左侧边距20px } .backgroundColor(Color.White) .padding(15) .margin(15) // 卡片整体边距 .shadow({ radius: 8, color: '#1A000000' }) } .width("100%") .padding(10) } } 布局效果：

Jun 27, 2025 - 03:20

作者：Feri（12年+资深程序员，鸿蒙开发/Java技术专家）

一、HarmonyOS图标库深度应用

1.1 图标库核心优势

HarmonyOS官方图标库专为开发者设计，具备三大核心能力：

多场景覆盖：包含系统组件、设备控制、生活服务等18+分类图标
灵活定制：支持颜色（fillColor）、尺寸（width/height）、格式（SVG/PNG）实时调整
工程化适配：默认遵循ic_命名规范，与ArkUI框架无缝集成

1.2 图标下载与工程集成

操作步骤：

访问官方图标库：HarmonyOS图标库
选择SVG格式下载（推荐，支持无损缩放）
存储路径规范：resources/base/media/
命名优化示例：

   原文件：material-account.svg → 重命名：ic_user_account.svg

1.3 ArkUI图标组件实战

通过Image组件加载图标，并通过fillColor实现主题色适配：

@Entry
@Component
struct IconDemo {
  @State themeColor: ResourceColor = Color.Primary

  build() {
    Column() {
      // 标题栏
      Text("鸿蒙图标应用案例")
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      // 图标展示区
      Row() {
        // 系统图标
        Image($r('app.media.ic_system_settings'))
          .width(48)
          .height(48)
          .fillColor(this.themeColor)
        .margin({ right: 30 })

        // 自定义业务图标
        Image($r('app.media.ic_user_avatar'))
          .width(60)
          .height(60)
          .fillColor(Color.Gray)
      }
      .padding(15)
      .backgroundColor(Color.White)
      .shadow({ radius: 5, color: '#1A000000' })
    }
    .width("100%")
    .padding(20)
  }
}

效果预览：

二、ArkUI布局属性权威指南

2.1 常用布局属性速查表

属性分类	核心属性	作用场景	典型值示例
容器布局	Column/Row/Stack	页面结构搭建	`Column() { ... }`
尺寸控制	width/height	组件大小定义	`width("90%")`
间距控制	padding/margin	内外边距调节	`padding(10)`
对齐方式	justifyContent/alignItems	子组件排列规则	`justifyContent.FlexEnd`

2.2 内边距padding深度解析

核心作用： 控制组件内容与边框的距离，提升视觉呼吸感

三种配置方式：

单值配置（等距内边距）：

   .padding(20)  // 上下左右各20px

双向配置（水平/垂直分离）：

   .padding({ horizontal: 15, vertical: 10 })  // 水平15px，垂直10px

四向精准配置：

   .padding({ top: 8, right: 16, bottom: 8, left: 16 })  // 典型按钮内边距

实战案例：

@Entry
@Component
struct PaddingDemo {
  build() {
    Column() {
      // 基础文本框
      Text("标准内边距")
        .backgroundColor('#FF9500')
        .fontColor(Color.White)
        .padding(12)

      // 自定义内边距
      Text("上10/右20/下10/左20")
        .backgroundColor('#34C759')
        .fontColor(Color.White)
        .padding({ top: 10, right: 20, bottom: 10, left: 20 })
    }
    .width("100%")
    .padding(20)
  }
}

效果对比：

2.3 外边距margin高级应用

核心作用： 控制组件与外部元素的间距，实现布局分层

实战技巧：

组件水平排列：通过margin({ right: 15 })设置元素间隔
卡片阴影效果：利用margin留出阴影显示空间
响应式布局：使用marginPercent适配不同屏幕

@Entry
@Component
struct MarginDemo {
  build() {
    Column() {
      // 卡片容器
      Row() {
        // 左侧组件
        Text("Feri编程")
          .backgroundColor('#FF3B30')
          .fontColor(Color.White)
          .padding(12)
          .margin({ right: 20 })  // 右侧边距20px

        // 右侧组件
        Text("鸿蒙开发")
          .backgroundColor('#007AFF')
          .fontColor(Color.White)
          .padding(12)
          .margin({ left: 20 })  // 左侧边距20px
      }
      .backgroundColor(Color.White)
      .padding(15)
      .margin(15)  // 卡片整体边距
      .shadow({ radius: 8, color: '#1A000000' })
    }
    .width("100%")
    .padding(10)
  }
}

布局效果：