HarmonyOS-ArkTS-UIAbility常用基础组件-总篇——【坚果派-红目香薰】

​

 摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 

HarmonyOS——UIAbility常用基础组件

组件：Component是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。

组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等，例如下面这个常用的登录界面就是由这些基础组件组合而成。

Text

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

@State message: string = 'Index Page 测试'

        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

​

编辑

Image

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

Image($r("app.media.2")).width(100).height(200) //这里的app.media的路径是【src/main/resources/base/media】

​

编辑

TextInput

TextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如应用登录账号密码、发送消息等。和Text组件一样，TextInput组件也支持文本样式设置。

        TextInput()
          .fontColor(Color.Blue)
          .fontSize(50)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .height(100)

​

编辑

Button

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

        Button('获取Input参数').onClick(() => {
          this.message = "我更改了测试文字"
        }).fontSize(50).width('100%').height('70')

​

编辑

LoadingProgress

LoadingProgress组件用于显示加载进展，比如应用的登录界面，当我们点击登录的时候，显示的“正在登录”的进度条状态。LoadingProgress的使用非常简单，只需要设置颜色和宽高就可以了。

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

​

编辑

这都是基本本地使用的方法，还有网络加载数据的方法等操作，我们会在后续的博客内容中学习到。

使用资源引用类型

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

例如下面的这段代码，直接在代码中写入了字符串和数字这样的硬编码。

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

我们可以将这些硬编码写到entry/src/main/resources下的资源文件中。

​