Harmony 使用开发常用组件介绍

在 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
        })

2. Button 组件

• 功用：Button 是用户交互的重要组件，用户能够点击按钮触发相应的操作。能够自定义按钮的文本、款式、点击事情等。
• 示例代码：

      Button('点击我')
        .width(200)
        .height(60)
        .fontSize(20)
        .backgroundColor(Color.Blue)
        .type(ButtonType.Capsule) // 胶囊款式
        .shadow({radius:20}) // 暗影
        .onClick(() => {
          console.log('按钮被点击了');
        });

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)
      }

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)
        }
      }

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%')
      }

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"})
      }

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} `)
        })
      }

这些常用组件为 Harmony 运用开发供给了丰厚的功用，开发者能够依据运用的需求灵敏组合和运用它们，创建出功用强大且漂亮的运用界面。还有更多杂乱的内置组件，后续会逐个介绍。

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

本文由博客一文多发渠道 OpenWrite 发布！