It mainly implements the common effect viewing of UI component text and pictures. Its function itself is very simple, and its purpose is also very clear. It is convenient for everyone to view the relevant code implementation according to the effect. It can be easily copied and used. Of course, these so-called small functions are all It is an appetizer, and the final shape of the scaffolding is bound to amaze everyone, so you can continue to pay attention.
The effect is as follows. The left side shows common effects. After clicking, the effect code is displayed on the right side:
The picture below is a recorded GIF that you can view intuitively.
Still following previous cases, let’s talk about the basic implementation first, and then talk about the implementation of scaffolding.
1. Common text effect codes
2. Common image effect codes
3. Scaffolding implementation analysis
4 , related summary
1. Common text effect codes
1, normal characters
Text("普通文字")
2. Bold text
Text("文字加粗")
.fontWeight(FontWeight.Bold)
3. The text is tilted
Text("文字倾斜")
.fontStyle(FontStyle.Italic)
4. Text color
Text("文字颜色")
.fontColor("#ff0000")
5. Text size
Text("文字大小")
.fontSize(23)
5, text background
Text("文字背景")
.fontColor(Color.White)
.backgroundColor(Color.Red)
6. Rounded text background
Text("圆角文字背景")
.fontColor(Color.White)
.backgroundColor(Color.Red)
.borderRadius(5)
7. Circle background
Text("圆")
.width(30)
.height(30)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.backgroundColor(Color.Red)
.borderRadius(30)
8, abbreviation character
Text("我是一段很长的文字，当超出一行时，就会展示出省略号")
.maxLines(1)
.margin({ left: 20, right: 20 })
.textOverflow({ overflow: TextOverflow.Ellipsis })
9. Text click event
Text("文字点击事件")
.onClick(() => {
promptAction.showToast({
message: '我点击了文字',
duration: 2000,
})
})
10. Rich text effect
Text() {
Span("富文本效果：")
Span("《用户协议》").fontColor(Color.Red)
.decoration({ type: TextDecorationType.Underline, color: Color.Red })
.onClick(() => {
promptAction.showToast({
message: '《用户协议》',
duration: 2000,
})
})
Span(" 和 ")
Span("《隐私政策》").fontColor(Color.Red)
.decoration({ type: TextDecorationType.Underline, color: Color.Red })
.onClick(() => {
promptAction.showToast({
message: '《隐私政策》',
duration: 2000,
})
})
}
11. Have a picture on the left side of the text
Row() {
Text("文字左侧带图片")
Image($r("app.media.app_icon"))
.width(20)
.height(20)
}
12. There is a picture on the right side of the text
Row() {
Image($r("app.media.app_icon"))
.width(20)
.height(20)
Text("文字右侧带图片")
}
13. Pictures above the text
Column() {
Image($r("app.media.app_icon"))
.width(20)
.height(20)
Text("文字上侧带图片")
}
14. Pictures below the text
Column() {
Text("文字下侧带图片")
Image($r("app.media.app_icon"))
.width(20)
.height(20)
}
2. Common picture effect codes
1. Ordinary pictures
Image($r("app.media.hos_logo"))
.height(100)
.margin({ top: 20 })
2. Load the animation
Image("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a35a1eff167c4a6b85455469e2be1dba~tplv-k3u1fbpfcp-jj:135:90:0:0:q75.awebp#?w=470&h=314&s=1171503&e=gif&f=32&b=d0c0a4")
.height(100)
3. Internet pictures
Image("https://www.vipandroid.cn/ming/image/gan.png")
.height(100)
.alt($r("app.media.icon"))
4. Rounded corner pictures
Image($r("app.media.hos_logo"))
.height(100)
.borderRadius(10)
5. Circular picture clip settings
Image($r("app.media.hos_logo"))
.width(100)
.height(100)
.clip(new Circle({ width: 100, height: 100 }))
6. Circular image borderRadius setting
Image($r("app.media.hos_logo"))
.width(100)
.height(100)
.borderRadius(100)
7. Rounded image edge chain call
Image($r("app.media.hos_logo"))
.height(100)
.borderRadius(10)
.borderWidth(1)
.borderColor(Color.Red)
8. Rounded image edge border call
Image($r("app.media.hos_logo"))
.height(100)
.border({ width: 1, color: Color.Red, radius: 10 })
9. Circular image border call
Image($r("app.media.hos_logo"))
.width(100)
.height(100)
.border({ width: 1, color: Color.Red, radius: 100 })
10. Circular image edge chain call
Image($r("app.media.hos_logo"))
.width(100)
.height(100)
.borderRadius(100)
.borderWidth(1)
.borderColor(Color.Red)
11. Placeholder picture settings
Image($r("app.media.hos_logo"))
.height(100)
.alt($r("app.media.icon"))
.margin({ top: 20 })
12. Image loading error settings
Image(this.errorImage)
.height(100)
.alt($r("app.media.icon"))
.margin({ top: 20 })
.onError(() => {
//图片加载错误,重新赋值
this.errorImage = "https://www.vipandroid.cn/ming/image/zao.png"
})
13. Get the width and height of the image
Image($r("app.media.hos_logo"))
.height(100)
.margin({ top: 20 })
.onComplete((msg: {
width: number,
height: number
}) => {
this.widthValue = msg.width
this.heightValue = msg.height
})
14. Black and white rendering mode pictures
Image($r("app.media.hos_logo"))
.height(100)
.margin({ top: 20 })
.renderMode(ImageRenderMode.Template)
15. Image filling effect Cover
Image($r("app.media.hos_logo"))
.width(100)
.height(100)
.margin({ top: 20 })
.objectFit(ImageFit.Cover)
16. Picture filling effect Fill
Image($r("app.media.hos_logo"))
.width(100)
.height(100)
.margin({ top: 20 })
.objectFit(ImageFit.Fill)
17. Image filling effect Contain
Image($r("app.media.hos_logo"))
.width(100)
.height(100)
.margin({ top: 20 })
.objectFit(ImageFit.Contain)
3. Scaffolding implementation analysis
The first two articles have already explained the scaffolding. It is currently developed in web language, so when writing the scaffolding, I will write a set of actual effects using ArkUI, and the corresponding effects will also be written in js on the scaffolding. , it is indeed a bit more complicated than the previous Flutter scaffolding. We can only hope that Hongmeng will support PC development in the future, I believe it will be soon.
On the left are related effects drawn with html. Each effect corresponds to a piece of ArkUI code. It’s that simple [cover your face and cry]
4. Relevant summary
At present, only the effects and code display of text and pictures have been completed, and there is no technical content in itself. The related UI will be continuously expanded and enriched in the future.
In order to allow everyone to better learn the development technology of Harmony OS, we have specially compiled the "Harmony OS Development Learning Manual" (890 pages in total). I hope it will be helpful to everyone:https://qr21.cn/FV7h05
"Harmony OS Development Learning Manual"
Must-see for getting started:https://qr21.cn/FV7h05
- Application Development Guide (ArkTS)
- Introduction to Application Development (Java)
HarmonyOS concept:https://qr21.cn/FV7h05
- system definition
- Technology Architecture
- Technical characteristics
- system security
How to get started quickly:https://qr21.cn/FV7h05
- basic concept
- Building your first ArkTS application
- Build your first JS application
- ……
Development basics:https://qr21.cn/FV7h05
- Application basics
- Configuration file
- Application data management
- Application security management
- App privacy protection
- Third-party application call control mechanism
- Resource classification and access
- Learn the ArkTS language
- ……
Developed based on ArkTS:https://qr21.cn/FV7h05
- Ability development
- UI opening
- Public events and notifications
- window management
- media
- Safety
- Networks and Links
- phone service
- Data management
- Background Task Management
- Device management
- Equipment usage information statistics
- DFX
- international development
- Folding screen series
- ……
