关于harmonyos:鸿蒙应用开发之基础组件

28次阅读

共计 6200 个字符，预计需要花费 16 分钟才能阅读完成。

组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI 申明式开发范式为开发者提供了丰盛多样的 UI 组件，咱们能够应用这些组件轻松的编写出更加丰盛、丑陋的界面。

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

上面咱们将别离介绍这些罕用根底组件的应用。

Text 组件用于在界面上展现一段文本信息，能够蕴含子组件 Span。

针对蕴含文本元素的组件，例如 Text、Span、Button、TextInput 等，可应用 fontColor、fontSize、fontStyle、fontWeight、fontFamily 这些文本款式，别离设置文本的色彩、大小、款式、粗细以及字体，文本款式的属性如下表：

上面示例代码中蕴含两个 Text 组件，第一个应用的是默认款式，第二个给文本设置了一些文本款式。

@Entry
@Component
struct TextDemo {build() {Row() {Column() {Text('HarmonyOS')
        Text('HarmonyOS')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

最终的成果如下：

除了通用属性和文本款式设置，上面列举了一些 Text 组件的罕用属性的应用。

应用 textAlign 属性能够设置文本的对齐形式，示例代码如下：

Text('HarmonyOS')
  .width(200)
  .textAlign(TextAlign.Start)
  .backgroundColor(0xE6F2FD)

textAlign 参数类型为 TextAlign，定义了以下几种类型：

Start（默认值）：程度对齐首部。
Center：程度居中对齐。
End：程度对齐尾部。

当文本内容较多超出了 Text 组件范畴的时候，您能够应用 textOverflow 设置文本截取形式，需配合 maxLines 应用，独自设置不失效，maxLines 用于设置文本显示最大行数。上面的示例代码将 textOverflow 设置为 Ellipsis，它将显示不下的文本用“…”示意。

Text('This is the text content of Text Component This is the text content of Text Component')
  .fontSize(16)
  .maxLines(1)
  .textOverflow({overflow:TextOverflow.Ellipsis})
  .backgroundColor(0xE6F2FD)

成果如下：

应用 decoration 设置文本装璜线款式及其色彩，大家在浏览网页的时候常常能够看到装璜线，例如带有下划线超链接文本。decoration 蕴含 type 和 color 两个参数，其中 type 用于设置装璜线款式，参数类型为 TextDecorationTyp，color 为可选参数。

上面的示例代码给文本设置了下划线，下划线色彩为彩色：

Text('HarmonyOS')
  .fontSize(20)
  .decoration({type: TextDecorationType.Underline, color: Color.Black})
  .backgroundColor(0xE6F2FD)

成果如下：

TextDecorationTyp 蕴含以下几种类型：

None：不应用文本装璜线。
Overline：文字上划线润饰。
LineThrough：穿过文本的润饰线。
Underline：文字下划线润饰。

Image 组件用来渲染展现图片，它能够让界面变得更加丰富多彩。只须要给 Image 组件设置图片地址、宽和高，图片就能加载进去，示例如下：

Image($r("app.media.icon"))
  .width(100)
  .height(100)

成果如下：

为了使图片在页面中有更好的显示成果，有时候须要对图片进行缩放解决。您能够应用 objectFit 属性设置图片的缩放类型，objectFit 的参数类型为 ImageFit。如果现有原始图片如下：

当初将图片加载到 Image 组件，设置宽高各 100，设置 objectFit 为 Cover（默认值），设置图片背景色为灰色 0xCCCCCC。示例代码如下：

Image($r("app.media.image2"))
  .objectFit(ImageFit.Cover)
  .backgroundColor(0xCCCCCC)
  .width(100)
  .height(100)

成果如下：

ImageFit 蕴含以下几种类型：

Contain：放弃宽高比进行放大或者放大，使得图片齐全显示在显示边界内。
Cover（默认值）：放弃宽高比进行放大或者放大，使得图片两边都大于或等于显示边界。
Auto：自适应显示。
Fill：不放弃宽高比进行放大放大，使得图片充斥显示边界。
ScaleDown：放弃宽高比显示，图片放大或者放弃不变。
None：放弃原有尺寸显示。

比方浏览新闻的时候，图片个别从网络加载而来，Image 组件反对加载网络图片，将图片地址换成网络图片地址进行加载。

Image('https://www.example.com/xxx.png')

为了胜利加载网络图片，您须要在 module.json5 文件中申明网络拜访权限。

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

利用拜访网络须要申请 ohos.permission.INTERNET 权限，因为 HarmonyOS 提供了一种访问控制机制即利用权限，用来保障这些数据或性能不会被不当或歹意应用。

TextInput 组件用于输出单行文本，响应输出事件。TextInput 的应用也十分宽泛，例如利用登录账号密码、发送音讯等。和 Text 组件一样，TextInput 组件也反对文本款式设置，上面的示例代码实现了一个简略的输入框：

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

成果如下：

当咱们平时应用输入框的时候，往往会有一些提醒文字。例如登录账号的时候会有“请输出账号”这样的文本提醒，当用户输出内容之后，提醒文本就会隐没，这种提醒性能应用 placeholder 属性就能够轻松的实现。您还能够应用 placeholderColor 和 placeholderFont 别离设置提醒文本的色彩和款式，示例代码如下：

TextInput({placeholder: '请输出帐号'})
  .placeholderColor(0x999999)
  .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})

成果如下：

能够应用 type 属性来设置输入框类型。例如明码输入框，个别输出明码的时候，为了用户明码平安，内容会显示为“……”，针对这种场景，将 type 属性设置为 InputType.Password 就能够实现。示例代码如下：

TextInput({placeholder: '请输出明码'})
  .type(InputType.Password)

成果如下：

type 的参数类型为 InputType，蕴含以下几种输出类型：

Normal：根本输出模式。反对输出数字、字母、下划线、空格、特殊字符。
Password：明码输出模式。
Email：e-mail 地址输出模式。
Number：纯数字输出模式。

能够应用 TextInputController 动静设置光地位，上面的示例代码应用 TextInputController 的 caretPosition 办法，将光标挪动到了第二个字符后。

@Entry
@Component
struct TextInputDemo {controller: TextInputController = new TextInputController()
 
  build() {Column() {TextInput({ controller: this.controller})
      Button('设置光标地位')
        .onClick(() => {this.controller.caretPosition(2)
        })
    }
    .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)
  }
}

成果如下：

Button 组件次要用来响应点击操作，能够蕴含子组件。上面的示例代码实现了一个“登录按钮”：

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

成果如下：

type 用于定义按钮款式，示例代码中 ButtonType.Capsule 示意胶囊形按钮；stateEffect 用于设置按钮按下时是否开启切换成果，当状态置为 false 时，点击成果敞开，默认值为 true。咱们能够设置多种款式的 Button，除了 Capsule 能够以设置 Normal 和 Circle：

Capsule：胶囊型按钮（圆角默认为高度的一半）。
Circle：圆形按钮。
Normal：一般按钮（默认不带圆角）。

能够给 Button 绑定 onClick 事件，每当用户点击 Button 的时候，就会回调执行 onClick 办法，调用外面的逻辑代码。

Button('登录', { type: ButtonType.Capsule, stateEffect: true})
  ...
  .onClick(() => {// 解决点击事件逻辑})

Button 组件能够蕴含子组件，让您能够开发出更丰盛多样的 Button，上面的示例代码中 Button 组件蕴含了一个 Image 组件：

Button({type: ButtonType.Circle, stateEffect: true}) {Image($r('app.media.icon_delete'))
    .width(30)
    .height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff)

成果如下：

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 下的资源文件中。

在 string.json 中定义 Button 显示的文本。

{
  "string": [
    {
      "name": "login_text",
      "value": "登录"
    }
  ]
}

在 float.json 中定义 Button 的宽高和字体大小。

{
  "float": [
    {
      "name": "button_width",
      "value": "300vp"
    },
    {
      "name": "button_height",
      "value": "40vp"
    },
    {
      "name": "login_fontSize",
      "value": "18fp"
    }
  ]
}

在 color.json 中定义 Button 的背景色彩。

{
  "color": [
    {
      "name": "button_color",
      "value": "#1890ff"
    }
  ]
}

而后在 Button 组件通过“$r(‘app.type.name’)”的模式援用利用资源。app 代表利用内 resources 目录中定义的资源；type 代表资源类型（或资源的寄存地位），能够取“color”、“float”、“string”、“plural”、“media”；name 代表资源命名，由开发者定义资源时确定。

Button($r('app.string.login_text'), {type: ButtonType.Capsule})
  .width($r('app.float.button_width'))
  .height($r('app.float.button_height'))
  .fontSize($r('app.float.login_fontSize'))
  .backgroundColor($r('app.color.button_color'))

正文完

harmonyos

发表至： harmonyos

2023-08-22

0

关于harmonyos:OpenHarmonyFlutter以及安卓的技术架构

关于harmonyos:课程汇总OpenHarmony全场景Demo数字管家系列课附链接

关于harmonyos:HDC2021技术分论坛组件通信硬件池化这些创新技术你get了吗

关于harmonyos:支持API-9的Sample已上新速来拿走

关于mysql:何时使用Elasticsearch而不是MySql

关于harmonyos:鸿蒙应用开发之基础组件

一、组件简介

二、Text

文本款式

文本对齐形式

文本超长显示

文本装璜线

三、Image

缩放类型

加载网络图片

四、TextInput

输出提醒文本

输出类型

光标地位

获取输出文本

五、Button

按钮款式

按钮点击事件

蕴含子组件

六、LoadingProgress

七、资源援用类型

Just My Socks（注册教程内含优惠码）

关于harmonyos:鸿蒙应用开发之基础组件

一、 组件简介

二、Text

文本款式

文本对齐形式

文本超长显示

文本装璜线

三、Image

缩放类型

加载网络图片

四、TextInput

输出提醒文本

输出类型

光标地位

获取输出文本

五、Button

按钮款式

按钮点击事件

蕴含子组件

六、LoadingProgress

七、资源援用类型

Just My Socks（注册教程 内含优惠码）

一、组件简介

Just My Socks（注册教程内含优惠码）