Harmony 應用開發常用元件介紹

年少的风發表於2024-11-19
元件

在 Harmony 應用開發中，有許多實用的元件，它們是構建豐富多樣使用者介面的基礎。以下是一些常用元件的介紹。

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 是使用者互動的重要元件，使用者可以點選按鈕觸發相應的操作。可以自定義按鈕的文字、樣式、點選事件等。
  • 示例程式碼：
      Button('點選我')
        .width(200)
        .height(60)
        .fontSize(20)
        .backgroundColor(Color.Blue)
        .type(ButtonType.Capsule) // 膠囊樣式
        .shadow({radius:20}) // 陰影
        .onClick(() => {
          console.log('按鈕被點選了');
        });

file

3. Image 元件

  • 功能：用於在應用中顯示圖片。可以載入本地圖片資源或網路圖片（如果應用有相應許可權），並設定圖片的大小、縮放模式等屬性。
  • 示例程式碼：
      Row({ space: 10 }) {
        Image($r('app.media.model1'))
          .width(150)
          .height(150)
          .borderRadius(15)
          .syncLoad(true) // 設定為同步載入，預設非同步載入

        // 載入網路圖片
        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 允許使用者輸入文字資訊。可以設定提示文字、輸入型別（如數字、密碼等）、最大長度等屬性。
  • 示例程式碼：
      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(`單選框狀態改變${isChecked} `)
          })
        Radio({ value: "Radio2", group: "group1"})
        Radio({ value: "Radio3", group: "group1"})
      }

file

7. Toggle 元件

  • 功能：Toggle元件提供狀態按鈕樣式、勾選框樣式和開關樣式，一般用於兩種狀態之間的切換。
  • 示例程式碼：
      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(`開關狀態改變${isOn} `)
        })
      }

file

這些常用元件為 Harmony 應用開發提供了豐富的功能，開發者可以根據應用的需求靈活組合和使用它們，建立出功能強大且美觀的應用介面。還有更多複雜的內建元件，後續會逐一介紹。

  • List
  • Swiper
  • Tabs
  • Web
  • Video
  • Popup
  • Menu

本文由部落格一文多發平臺 OpenWrite 釋出！

相關文章