1、图标库
官网:https://developer.harmonyos.com/cn/design/harmonyos-icon/
可以下载不同类型
2、图片资源
(1)image本地图片
图片放到放置到ets目录下-可创建文件夹:如assets文件
引用: Image(‘/assets/abc.png’).width(80).height(80)
(2)Resource\media下图片
放到resource\media目录下
引用:Image($r(‘app.media.a6’)).width(80).height(80)
(3)Resource\rawfile下图片
引用:Image($rawfile(“a8.jpeg”)).width(80).height(80)
(4)网络图片
Image(“https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png”).width(80).height(80)
重点:网络图片,在preview中时,可以预览
但在模拟器和真实环境中,必须申请网络权限
网络权限:moddule.json5
{
“module”: {
“name”: “entry”,
…
“requestPermissions”: [{
“name”:“ohos.permission.INTERNET”
}]
}
}
3、样式@Styles
@Styles
可以进行样式复用,解决在开发过程中会出现大量代码重复样式设置问题
全局定义:
**@Styles function textStyle () {
.width(100)
.height(150)
.backgroundColor(Color.Yellow)
.borderRadius(25)
}**
@Entry
@Component
struct StyleRepeat {
build() {
Row() {
Column({ space: 15 }) {
Text("测试11")
.textStyle()
.textAlign(TextAlign.Center)
Text("测试22")
.textStyle()
.textAlign(TextAlign.Center)
}
.width('100%')
}
.height('100%')
}
}
局部定义:
@Entry
@Component
struct StyleRepeat {
**@Styles
textStyle () {
.width(200)
.height(50)
.backgroundColor(Color.Pink)
.borderRadius(25)
}**
build() {
Row() {
Column({ space: 15 }) {
Text("测试11")
.textStyle()
.textAlign(TextAlign.Center)
Text("测试22")
.textStyle()
.textAlign(TextAlign.Center)
}
.width('100%')
}
.height('100%')
}
}
4、样式@Extends
使用Extend来修饰一个全局的方法
一般对原生组件进行封装
@Entry
@Component
struct ExtendCase {
build() {
Row() {
Column({ space: 20 }) {
Text("测试")
.textStyle()
Button("按钮")
.btnStyle()
}
.width('100%')
}
.height('100%')
}
}
@Extend(Text) function textStyle () {
.width(120)
.height(160)
.borderRadius(30)
.backgroundColor(Color.Red)
.textAlign(TextAlign.Center)
.fontSize(20)
}
@Extend(Button) function btnStyle () {
.width(120)
.height(60)
.borderRadius(30)
.backgroundColor(Color.Pink)
.fontSize(20)
}