HarmonyOS 开发之———基础组件的使用

谢谢关注！！

前言：上一篇文章主要HarmonyOS 应用程序入口 UIAbility的使用。如需了解谢谢查阅：http://t.csdnimg.cn/dVWlB

一、组件

1、组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件。

2、组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等。

二、基础组件介绍

1、Text：Text组件用于在界面上展示一段文本信息，可以包含子组件Span。

• 文本样式：针对包含文本元素的组件，例如Text、Span、Button、TextInput等，可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式，分别设置文本的颜色、大小、样式、粗细以及字体。
• textAlign设置对齐方式：Start水平对齐首部、Center水平居中对齐、End水平对齐尾部。
• 设置超长文本：当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ，它将显示不下的文本用 “...” 表示。
• 文本装饰先：使用decoration设置文本装饰线样式及其颜色，大家在浏览网页的时候经常可以看到装饰线，例如带有下划线超链接文本。decoration包含type和color两个参数，其中type用于设置装饰线样式，参数类型为TextDecorationTyp（None：不使用文本装饰线、Overline：文字上划线修饰、LineThrough：穿过文本的修饰线、Underline：文字下划线修饰），color为可选参数。

@Entry
@Component
struct TextDemo {
  build() {
    Row() {
      Column() {
        Text('HarmonyOS')
        Text('HarmonyOS')
          .maxLines(1)
          .textOverflow({overflow:TextOverflow.Ellipsis})
          .textAlign(TextAlign.Start)
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .decoration({ type: TextDecorationType.Underline, color: Color.Black })
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

2、Image：Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高，图片就能加载出来。

• 设置缩放类型：使用objectFit属性设置图片的缩放类型，objectFit的参数类型为ImageFit：Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
  Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。Auto：自适应显示。
  Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。
  ScaleDown：保持宽高比显示，图片缩小或者保持不变。
  None：保持原有尺寸显示。
• 加载网络图片：注意module.json5文件中添加网络权限。

  {
      "module" : {
          "requestPermissions":[
             {
               "name": "ohos.permission.INTERNET"
             }
          ]
      }
  }

//加载本地图片
Image($r("app.media.icon"))
  .width(100)
  .height(100)
  .objectFit(ImageFit.Cover)

//加载网络图片
Image('https://www.example.com/xxx.png')

3、TextInput：TextInput组件用于输入单行文本，响应输入事。

• 输入提示文本：使用 placeholder数学设置提示文字，可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。
• 输入内容的类型设置：使用type属性来设置输入框类型。
  Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
  Password：密码输入模式。
  Email：e-mail地址输入模式。
  Number：纯数字输入模式。

  TextInput({ placeholder: '请输入帐号' })
    .placeholderColor(0x999999)
    .placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })
    .type(InputType.Password)
    .fontColor(Color.Blue)
    .fontSize(20)
    .fontStyle(FontStyle.Italic)
    .fontWeight(FontWeight.Bold)
    .fontFamily('Arial') 

• 使用TextInputController动态设置光位置，下面的示例代码使用TextInputController的caretPosition方法，将光标移动到了第二个字符后：

  @Entry
  @Component
  struct TextInputDemo {
    controller: TextInputController = new TextInputController()
   
    build() {
      Column() {
        TextInput({ controller: this.controller })
        Button('设置光标位置')
          .onClick(() => {
            this.controller.caretPosition(4)
          })
      }
      .height('100%')
      .backgroundColor(0xE6F2FD)
    }
  }

• 获取输入文本：TextInput设置onChange事件，输入文本发生变化时触发回调，下面示例代码中的value为实时获取用户输入的文本信息。

  @Entry
  @Component
  struct TextInputDemo {
    @State text: string = ''
   
    build() {
      Column() {
        TextInput({ placeholder: '请输入账号' })
          .caretColor(Color.Blue)
          .onChange((value: string) => {
            this.text = value
          })
        Text(this.text)
      }
      .alignItems(HorizontalAlign.Center)
      .padding(12)
      .backgroundColor(0xE6F2FD)
    }
  }

4、Button：Button组件主要用来响应点击操作，可以包含子组件。

• 设置按钮样式使用ButtonType属性：
  Capsule：胶囊型按钮（圆角默认为高度的一半）。
  Circle：圆形按钮。
  Normal：普通按钮（默认不带圆角）。
• 按钮点击事件：示例代码中展示
• 包含子组件：示例代码中展示

Button('登录', { type: ButtonType.Capsule, stateEffect: true }) {
  Image($r('app.media.icon_delete'))
    .width(30)
    .height(30)
  }
  .width('90%')
  .height(40)
  .fontSize(16)
  .fontWeight(FontWeight.Medium)
  .backgroundColor('#007DFF')
  .onClick(() => {
  // 处理点击事件逻辑
  })

5、进度条简单使用LoadingProgress：

LoadingProgress()
  .color(Color.Blue)
  .height(60)
  .width(60)

6、使用资源引用类型（可引入 Resource资源，也可直接写入编码）

• Resource是资源引用类型，用于设置组件属性的值。推荐大家优先使用Resource类型，将资源文件（字符串、图片、音频等）统一存放于resources目录下，便于开发者统一维护。同时系统可以根据当前配置加载合适的资源，例如，开发者可以根据屏幕尺寸呈现不同的布局效果，或根据语言设置提供不同的字符串。
• 直接写入编码：

  Button('登录', { type: ButtonType.Capsule, stateEffect: true })
    .width(300)
    .height(40)
    .fontSize(16)
    .fontWeight(FontWeight.Medium)
    .backgroundColor('#007DFF')

如需了解更多请联系博主，本篇完。

下一篇：HarmonyOs开发之———容器组件使用

谢谢阅读，烦请关注：

后续将持续更新！！