Harmony OS开发-ArkUI框架速成四

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴！君志所向,一往无前！

---

1.图标库

1.1 图标库概述

HarmonyOS 图标库为 HarmonyOS 开发者提供丰富的在线图标资源，涵盖多种使用场景以及风格分类，提供灵活的颜色、大小和格式定义，满足不同角色的下载需求。

1.2 下载图标库

点击即可打开，HarmonyOS 图标库

进入图标库网站，下载 SVG 格式，存储到工程目录：resources/base/media/

HarmonyOS 图标默认命名以 ic_ 开头，其他图标库下载的图标素材建议修改为与 HarmonyOS 命名规则相同。

1.3 使用图标

使用 Image 组件显示图标，添加 fillColor() 属性修改图标颜色

@Entry
@Component
struct Index {
  @State message: string = '快速拿下ArkUI框架';

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin(10)
      Row(){
        Text("图标使用：")
        Image($r('app.media.ic_celiakeyboard_cangjie'))
          .width(50)
      }
    }.width("100%")
  }
}

2.布局属性

2.1 常用的布局属性

2.2 内边距 padding

作用：在组件内添加间距，拉开内容与组件边缘之间的距离

属性：数字 或 对象{}

● 数字：上下左右内边距相同

● 对象{}：配合 left、right、top、bottom 单独设置某个方向内边距

@Entry
@Component
struct Index {

  build() {
    Column() {
      
      Text('内边距-Feri演示')
        .backgroundColor(Color.Orange)
          // 单值：四个方向padding相同
        .padding(20)
          // 对象：单独设置某个方向
        .padding({
          top: 10,
          right: 20,
          bottom: 40,
          left: 80
        })
    }.width("100%")
  }
}

2.3 外边距 margin

作用：在组件外面添加间距，拉开两个组件之间的距离

属性：margin

属性：数字 或 对象{}

● 数字：上下左右边外距相同

● 对象{}：配合 left、right、top、bottom 单独设置某个方向外边距

@Entry
@Component
struct Index {

  build() {
    Column() {
      Row() {
        Text('程序员Feri')
          .backgroundColor(Color.Red)
          .padding(10)
          .margin(20)
        Text('求关注，求点赞')
          .backgroundColor(Color.Blue)
          .padding(10)
          .margin({
            top: 10,
            right: 20,
            bottom: 40,
            left: 80
          })
      }
    }.width("100%")
  }
}

好了，夜已深，本篇就到这里吧，关注我，跟着我搞鸿蒙，搞钱！