Ark-TS UI
在 Harmony 應用開發(fā)中，有許多實用的組件，它們是構建豐富多樣用戶界面的基礎。以下是一些常用組件的介紹。
1. Text 組件
- 功能：Text 組件用于在界面上顯示文本信息。它可以設置文本內容、字體大小、顏色、對齊方式等多種屬性。
- 示例代碼：
Text('這是一個示例文本這是一個示例文本這是一個示例文本這是一個示例文本')
.fontSize(20)
.fontWeight(FontWeight.Bold)// 粗體
.fontStyle(FontStyle.Italic)// 斜體
.textAlign(TextAlign.Center)
.fontColor(Color.Red)
.backgroundColor(Color.Yellow)
.width(200)
.height(50)
.textAlign(TextAlign.Center)
.borderRadius(15)
.borderWidth(1)
.borderColor(Color.Red)
.maxLines(1)
.textOverflow({
overflow: TextOverflow.Ellipsis
})
file
2. Button 組件
- 功能：Button 是用戶交互的重要組件，用戶可以點擊按鈕觸發(fā)相應的操作?？梢宰远x按鈕的文本、樣式、點擊事件等。
- 示例代碼：
Button('點擊我')
.width(200)
.height(60)
.fontSize(20)
.backgroundColor(Color.Blue)
.type(ButtonType.Capsule) // 膠囊樣式
.shadow({radius:20}) // 陰影
.onClick(() => {
console.log('按鈕被點擊了');
});
file
3. Image 組件
- 功能：用于在應用中顯示圖片。可以加載本地圖片資源或網(wǎng)絡圖片（如果應用有相應權限），并設置圖片的大小、縮放模式等屬性。
- 示例代碼：
Row({ space: 10 }) {
Image($r('app.media.model1'))
.width(150)
.height(150)
.borderRadius(15)
.syncLoad(true) // 設置為同步加載，默認異步加載
// 加載網(wǎng)絡圖片
Image('https://img1.baidu.com/it/u=3916636701,1432676148&fm=253&fmt=auto&app=138&f=JPEG?w=822&h=500')
.width(150)
.height(120)
.borderRadius(15)
.objectFit(ImageFit.Cover)
}
file
4. TextInput 組件
- 功能：TextInput 允許用戶輸入文本信息。可以設置提示文本、輸入類型（如數(shù)字、密碼等）、最大長度等屬性。
- 示例代碼：
Scroll() { // 嵌套一層滾動容器，可以避讓鍵盤防遮擋
Column({ space: 10 }) {
TextInput({
placeholder: "請輸入郵箱",
text: ""
})
.width(300)
.height(50)
.type(InputType.Email)
.maxLength(50)
TextInput({
placeholder: "請輸入密碼",
text: ""
})
.width(300)
.height(50)
.type(InputType.Password)
}
}
file
5. Progress 組件
- 功能：Progress是進度條顯示組件，顯示內容通常為目標操作的當前進度。
- 示例代碼：
Progress({
value: 24,
total: 100,
type: ProgressType.Linear
}).width('80%')
Row({ space: 10 }) {
Progress({
value: 24,
total: 100,
type: ProgressType.Ring
}).width('25%')
Progress({
value: 24,
total: 100,
type: ProgressType.Ring
}).width('25%')
.color(Color.Grey)
.style({ strokeWidth: 8 })
Progress({
value: 24,
total: 100,
type: ProgressType.ScaleRing
}).width('25%')
}
file
6. Radio 組件
- 功能：Radio是單選框組件，通常用于提供相應的用戶交互選擇項，同一組的Radio中只有一個可以被選中。
- 示例代碼：
Row() {
Radio({ value: "Radio1", group: "group1"})
.checked(true)
.onChange((isChecked: boolean)=>{
console.log(`單選框狀態(tài)改變${isChecked} `)
})
Radio({ value: "Radio2", group: "group1"})
Radio({ value: "Radio3", group: "group1"})
}
file
7. Toggle 組件
- 功能：Toggle組件提供狀態(tài)按鈕樣式、勾選框樣式和開關樣式，一般用于兩種狀態(tài)之間的切換。
- 示例代碼：
Row() {
Toggle({ type: ToggleType.Checkbox, isOn: false })
.selectedColor(Color.Pink)
Toggle({ type: ToggleType.Checkbox, isOn: true })
.selectedColor(Color.Pink)
Blank(20)
Toggle({ type: ToggleType.Switch, isOn: false })
.selectedColor(Color.Pink)
.switchPointColor(Color.Red)
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(Color.Pink)
.switchPointColor(Color.Red).onChange((isOn: boolean)=>{
console.log(`開關狀態(tài)改變${isOn} `)
})
}
file
這些常用組件為 Harmony 應用開發(fā)提供了豐富的功能，開發(fā)者可以根據(jù)應用的需求靈活組合和使用它們，創(chuàng)建出功能強大且美觀的應用界面。還有更多復雜的內置組件，后續(xù)會逐一介紹。
