文本显示	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 })

注：通过promptAction.showToast({ message: 'xxx' })来弹Toast

最后，一起看下这三种Toggle的效果：

本篇对控件进行了概述，并且详细介绍了文本显示、文本输入、按钮、图片、单选框、切换按钮这六种常用控件。因为控件种类太多，而且后续的控件比起本篇介绍的这六种相对来说略微复杂一些，所以剩下的控件我们会在下一篇文章继续介绍。

最后，分享一款免费看热门电影和电视剧的app，仅限Android：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/985462

鸿蒙开发（七）添加常用控件（上）_鸿蒙系统中用于显示单行文本的控件

一、控件概述

1、控件

2、鸿蒙常用的控件