鸿蒙开发（七）添加常用控件（上）

相信大家已经对鸿蒙开发的布局有了基本的了解。之前我们提到过，一个好的UI，离不开选择合理的布局。当然，也离不开适当的控件。本篇文章，带着大家一起学习下如何在页面里面添加常用的控件。由于控件较多，我会分为两篇文章来介绍。

一、控件概述

1、控件

2、鸿蒙常用的控件

二、文本显示（Text/Span）

1、Text

2、Span

三、文本输入（TextInput/TextArea）

1、TextInput

2、TextArea

三、按钮（Button）

1、胶囊按钮（Capsule）

2、圆形按钮（Circle）

3、普通按钮（Normal）

四、图片（Image）

1、加载images图片

2、加载网络图片

3、加载Resource图片

（1）通过media加载

（2）通过rawfile加载

4、加载媒体库图片

五、单选框（Radio）

六、切换按钮（Toggle）

1、Checkbox样式

2、Switch样式

3、Button样式

鸿蒙系列上一篇：

鸿蒙开发（六）布局概述-CSDN博客文章浏览阅读846次，点赞25次，收藏24次。迄今为止，我还没有正式提到布局的概念。但其实我之前的demo里面，已经默认使用到了一种布局，那就是线性布局（Row、Column），这也是DevEco创建项目默认页面里面默认采用的布局。那么本篇，带着大家一起学习下鸿蒙开发的布局，该篇仅仅是概述，更多的是说理论，后面会有专门的文章去进行布局开发实战。https://blog.csdn.net/qq_21154101/article/details/135703943?spm=1001.2014.3001.5501

一、控件概述

1、控件

什么是控件呢？控件是指在程序中用于跟人交互的页面元素，是人机交互的重要一环。控件一般有特定的属性和事件，可通过接收用户事件改变自身属性（颜色、大小、内容等），也可以触发相应的逻辑。

不论是PC端的软件，还是移动端的软件，都离不开人机交互，都离不开页面以及页面中的控件。而各端的软件所支持或提供的基本控件其实都差不多。例如：文本框、按钮、输入框、单选框、进度条、列表、弹窗、视频等。

2、鸿蒙常用的控件

那么，接下来我们一起看下鸿蒙给开发者提供的常用系统控件。鸿蒙给开发者提供了如下一些常用控件：

文本显示	Text/Span
文本输入	TextInput/TextArea
按钮	Button
图片	Image
单选框	Radio
切换按钮	Toggle
进度条	Progress
弹窗	CustomDialog
视频	Video
气泡	PopUp
菜单	Menu

二、文本显示（Text/Span）

1、Text

Text是文本组件，通常用于展示用户的视图，如显示文章的文字。创建Text有如下三种方式，其实都是一样的：

        // 1 直接使用string创建
        Text('Hello World')
        // 2 引用字符串变量创建
        Text(this.message)
        // 3 引用资源文件里的string创建
        Text($r('app.string.AddWidget_hello'))

效果如下，其实是一模一样的：

2、Span

Span只能作为Text组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息。使用场景一般是一段信息中的文本其风格不同（例如颜色、粗体、倾斜、下划线等）。

注意：

1、Span组件需要写到Text组件内，单独写Span组件不会显示信息。

2、Text与Span同时配置文本内容时，Span内容覆盖Text内容。

如下示例代码，分别在Text里面实现了两个Span，并分别设置了不同的颜色、风格和点击事件：

        // 创建带Span子组件的Text
        Text('Hello World') {
          Span('This is ')
            .fontColor(Color.Black)
            .onClick(() => {
              this.message = 'Hello Harmony'
            })
          Span('Harmony')
            .fontStyle(FontStyle.Italic)
            .fontColor(Color.Blue)
            .textCase(TextCase.UpperCase)
            .onClick(() => {
              this.message = 'Hello World'
            })
        }.borderWidth(1).padding(5)

开模拟器真的超级卡，所以，录屏我也用预览了，看下效果：

三、文本输入（TextInput/TextArea）

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作。

1、TextInput

TextInput为单行输入框，通常用于例如登录页面的账号和密码输入，使用如下：

        TextInput({ placeholder: '这是TextInput' })
          .width('60%')
          .margin({ top: 10 })

2、TextArea

TextArea为多行输入框，文字超出一行时会自动换行，通常用于例如评论区、发表文章等，使用如下：

        TextArea({ placeholder: '这是TextArea' })
          .width('60%')
          .margin({ top: 10 })

看下两个输入框的效果：

三、按钮（Button）

Button是按钮控件，通常用于响应用户的点击操作。Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆形按钮）和Normal（普通按钮），通过type进行设置。

1、胶囊按钮（Capsule）

按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

        // 胶囊按钮
        Button('胶囊按钮', { type: ButtonType.Capsule})
          .width('25%')

2、圆形按钮（Circle）

不支持通过borderRadius属性重新设置圆角。

        Button('圆形按钮', { type: ButtonType.Circle})
          .width('25%')

3、普通按钮（Normal）

默认圆角为0，支持通过borderRadius属性重新设置圆角。

          // 普通按钮
          Button('普通按钮', { type: ButtonType.Normal })
            .width('20%')
            .borderRadius(10)
            .backgroundColor(Color.Red)

注：可以通过不设置label，给按钮设置子组件图片（关于图片控件的使用下一章节会重点讲解，在此处先用下），用作带有某种功能的按钮。

          Button({ type: ButtonType.Circle }) {
            Image($r('app.media.app_icon')).width(40).height(40)
          }.width(60).height(60)

看下几种按钮的效果（继续纵向布局的话，可能demo的控件快要展现不开了，把几个Button横向布局了）：

四、图片（Image）

我们经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。展示图片使用Image实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif。

1、加载images图片

在ets文件夹创建images文件夹，将本地图片放入，完整目录如下：

然后通过如下方式加载：

// 通过images文件夹加载
          Image('images/test.png')
            .width('20%')
            .margin({ left: 5 })

2、加载网络图片

我随便去百度找了一张网络图片，加载网络图片需申请权限ohos.permission.INTERNET（目前看只有真机需要，模拟器暂时不需要），加载方式如下：

// 通过网络url加载
          Image('https://pics6.baidu.com/feed/f703738da977391215b635829560f615347ae2cc.jpeg@f_auto?token=0460b37fd899a8e8e36557cdc2f4153c')
            .width('20%')
            .margin({ left: 5 })

3、加载Resource图片

（1）通过media加载

把图片放在media目录下，例如icon.png：

然后通过如下方式加载：

          // 通过resource加载
          Image($r('app.media.app_icon'))
            .width('20%')
            .margin({ left: 5 })

（2）通过rawfile加载

将图片放在rawfile文件夹下：

通过如下方式加载：

          // 通过rawfile加载
          Image($rawfile('test1.png'))
            .width('20%')
            .margin({ left: 5 })

4、加载媒体库图片

还可以通过访问媒体库提供的图片路径来加载图片。我暂时没有真机，后面不给大家演示了，调用方式如下：

// 通过媒体库加载图片
Image('file://media/Photos/5')
.width(200)

通过以上几种方式加载图片的效果如下（为了防止占用大量布局，我仍然横向加载）：

五、单选框（Radio）

Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。Radio仅支持选中和未选中两种样式，不支持自定义颜色和形状。一般情况下，只有一个Radio被设置为选中，其他的设置为未选中。

     @State radio: string = '选中了单选框1'   
     Row() {
          Text(this.radio){
          }
          Radio({ value: 'Radio1', group: 'radioGroup' })
            .checked(true)
            .onChange(() => {
              this.radio = '选中了单选框1'
            })
          Radio({ value: 'Radio2', group: 'radioGroup' })
            .checked(false)
            .onChange(() => {
              this.radio = '选中了单选框2'
            })
        }.width('100%').justifyContent(FlexAlign.Center)

如上示例代码，我定义了一个@State的string用于展示选中了哪个单选框，通过Radio的onChange事件去更新string，效果如下：

六、切换按钮（Toggle）

切换按钮其实就是复选框，可以选中多个框。Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。

1、Checkbox样式

通过ToogleType.Checkbox来创建Checkbox样式的Toggle，该样式不支持添加子控件，使用方式如下：

          // 类型为Checkbox
          Toggle({ type: ToggleType.Checkbox, isOn: false })
            .onChange((isOn: Boolean) => {
              if (isOn) {
                promptAction.showToast({ message: '选中1' })
              } else {
                promptAction.showToast({ message: '取消选中1' })
              }
            }).margin({ left: 10 })
          Toggle({ type: ToggleType.Checkbox, isOn: false })
            .onChange((isOn: Boolean) => {
              if (isOn) {
                promptAction.showToast({ message: '选中2' })
              } else {
                promptAction.showToast({ message: '取消选中2' })
              }
            }).margin({ left: 10 })

2、Switch样式

通过ToogleType.Switch来创建Switch样式的Toggle，该样式不支持添加子控件，使用方式如下：

          // 类型为Switch
          Toggle({ type: ToggleType.Switch, isOn: false })
            .onChange((isOn: Boolean) => {
              if (isOn) {
                promptAction.showToast({ message: '选中3' })
              } else {
                promptAction.showToast({ message: '取消选中3' })
              }
            }).margin({ left: 30 })
          Toggle({ type: ToggleType.Switch, isOn: false })
            .onChange((isOn: Boolean) => {
              if (isOn) {
                promptAction.showToast({ message: '选中4' })
              } else {
                promptAction.showToast({ message: '取消选中4' })
              }
            }).margin({ left: 10 })

3、Button样式

通过ToogleType.Button来创建Botton样式的Toggle，该样式支持添加子控件，而且只能包含一个子组件。使用方式如下：

          // 类型为Button
          Toggle({ type: ToggleType.Button, isOn: false }) {
            Text('上午')
              .width(50)
              .textAlign(TextAlign.Center)
          }.onChange((isOn: Boolean) => {
            if (isOn) {
              promptAction.showToast({ message: '选中5' })
            } else {
              promptAction.showToast({ message: '取消选中5' })
            }
          }).margin({ left: 30 })
          Toggle({ type: ToggleType.Button, isOn: false }) {
            Text('下午')
              .width(50)
              .textAlign(TextAlign.Center)
          }.onChange((isOn: Boolean) => {
            if (isOn) {
              promptAction.showToast({ message: '选中6' })
            } else {
              promptAction.showToast({ message: '取消选中6' })
            }
          }).margin({ left: 10 })