程序员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%")}
}
好了,夜已深,本篇就到这里吧,关注我,跟着我搞鸿蒙,搞钱!