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%")}
}

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