HarmonyOS开发(五)：常用基础组件

xiaoxie_advent2023-11-24 19:15

1、组件介绍

组件（Component）,是界面搭建及显示的最小单元。

组件根据功能可以分为五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件

2、基础组件

基础组件是视图层的基本组成单元，它包含：Text、Image、TextInput、Button、LoadingProgress......

2.1、Text

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

对于包含文本文本元素的组件（如：Text,Span,Button,TextInput......）可以使用fontSize()，fontColor()，fontWeight()，fontFamily()，fontStyle()这些文本样式设置文本的大小、颜色、粗细、字体等信息。

|------------|-------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 名称 | 参数类型 | 描述 |
| fontColor | ResourceColor | 设置文本颜色 |
| fontSize | Length | Resource | 设置文本尺寸，Length为number类型时，使用fp单位 |
| fontStyle | FontStyle | 设置文本的字体样式、默认值：FontStyle.Normal |
| fontWeight | number | FontWeight| string | 设置文本字体的粗细 number取值是[400,900],间隔是100，值越大越粗 string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。 默认值：FontWeight.Normal |
| fontFamily | string | Resource | 设置文本的字体列表。使用多个字体，使用"，"进行分割，优先级按顺序生效。例如："Arial，sans-serif |

2.1.1、通用属性与文本样式设置

TypeScript 复制代码 
@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('Harmony OS')
          .margin({bottom:15})
        Text('鸿蒙系统')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

2.1.2、文本对齐方式设置

TypeScript 复制代码 
@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('Harmony OS')
          .margin({bottom:15})
          .width(200)
          .height(50)
          .textAlign(TextAlign.Start)    // 对齐方式
          .backgroundColor(0xE6F2FD)
        Text('鸿蒙系统')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

textAlign参数类型为TextAlign,定义了几种类型

  • Start：默认值，水平对齐首部
  • Center：水平居中对齐
  • End：水平对齐尾部

2.1.3、设置文本超长显示

当文本的内容过多超出了Text组件范围时，可以使用textOverflow设置文本截取方式，配合maxLines使用，单独设置不生效

maxLines用来设置文本显示的最大行数

如果把textOverflow设置为Ellipsis，那么它会把显示不下的文本使用"..."表示

TypeScript 复制代码 
@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('Harmony OS')
          .margin({bottom:15})
          .width(200)
          .height(50)
          .textAlign(TextAlign.Start)
          .backgroundColor(0xE6F2FD)
        Text('鸿蒙系统')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom:15})
        Text('滨海昌正企业管理有限公司成立于2011年，主要从事母婴行业品牌开发与销售，是集产品研发、品牌运营、销售服务及物流供应链为一体的公司。现有团队人数800人，其中管理人员100+人。')
          .fontSize(18)
          // 文本超长显示设置使用textOverflow配合maxLines一起使用
          .maxLines(1)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .backgroundColor(0xE6F2FD)
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

2.1.4、设置文本装饰线

使用decoration设置文本的装饰线样式及其颜色

它包含两个参数：type用来指定装饰线的样式，其参数类型是TextDecorationType；color用来指定装饰线的颜色，其参数类型是Color，它是一个可选参数。

TypeScript 复制代码 
@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('Harmony OS')
          .margin({bottom:15})
          .width(200)
          .height(50)
          .textAlign(TextAlign.Start) // 设置文本对齐方式
          .backgroundColor(0xE6F2FD)
          .fontSize(20)
          .decoration({type: TextDecorationType.Underline, color: Color.Black}) // 设置文本装饰线
        Text('鸿蒙系统')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom:15})
        Text('滨海昌正企业管理有限公司成立于2011年，主要从事母婴行业品牌开发与销售，是集产品研发、品牌运营、销售服务及物流供应链为一体的公司。现有团队人数800人，其中管理人员100+人。')
          .fontSize(18)
          // 超长文本使用textOverflow与maxLines配合设置
          .maxLines(1)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .backgroundColor(0xE6F2FD)
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

TexDecorationType包含以下几种类型：

  • None：表示不使用装饰线
  • Overline：表示使用上划线装饰
  • LineThrough：表示使用删除线来装饰
  • Underline：表示使用下划线装饰

2.2、Image

Image组件用来渲染展示图片，只需要给定图片地址、宽和高，图片就可以加载出来

TypeScript 复制代码 
@Entry
@Component
struct Test {

  build() {
    Row() {
      Column() {
       Image($r("app.media.icon"))
         .width(100)
         .height(100)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.2.1、设置图片的缩放类型

图片资源放在项目的：src/main/resources/base/media 目录

为了使用图片在页面中有更好的显示效果，有时候需要对图片进行缩放处理。

可以使用objectFit属性来设置图片的缩放类型，其参数的类型是ImageFit。

TypeScript 复制代码 
@Entry
@Component
struct Test {

  build() {
    Row() {
      Column() {
       Image($r("app.media.image"))
         .objectFit(ImageFit.Cover) // 默认的缩放方式
         .width(200)
         .height(300)
         .backgroundColor(0xCCCCCC)
      }
      .width('100%')
    }
    .height('100%')
  }
}

ImageFit包含如下几种类型：

  • Contain：保持宽高比进行缩小或放大，使用得图片完全显示在显示边界中
  • Cover：默认值，保持宽高比进行缩小或放大，使得图边两边都大于或等于显示边界
  • Auto：自适应显示
  • Fill：不保持宽高比进行放大或缩小，使用图片充满显示边界
  • ScaleDown：保持宽高比显示，图片缩小或者保持不变
  • None：保持原极尺寸显示

2.2.2、加载网络图片

如果需要加载网络图片需要在module.json5中申请网络访问权限

TypeScript 复制代码 
{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}
TypeScript 复制代码 
@Entry
@Component
struct Test {

  build() {
    Row() {
      Column() {
       Image($r("app.media.image"))
         .objectFit(ImageFit.Contain) // 默认的缩放方式
         .width(200)
         .height(300)
         .backgroundColor(0xCCCCCC)
         .margin({bottom:15})
        // 加载网图图片
        Image('https://p1.itc.cn/q_70/images03/20210217/d74ec9f0a1dc431a87c5cb4742ee17b1.jpeg')
          .width(200)
          .height(200)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.3、TextInput

TextInput组件用来输入单行文本，响应输入事件。

TypeScript 复制代码 
@Entry
@Component
struct TextInputTest {


  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
      .width('100%')
    }
    .height('100%')
  }
}

与Text组件一样，也支持文本样式的设置。

2.3.1、设置输入提示语

要在输入框中添加提示语可以使用placeholder属性来实现，同时还可以使用placeholderColor和placeholderFont来分别设置提示文本的颜色和样式。

TypeScript 复制代码 
@Entry
@Component
struct TextInputTest {


  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom: 15})
        TextInput({placeholder: '请输入账号'})
          .placeholderColor(0x999999)
          .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.3.2、设置输入类型

可以使用type属性来设置输入框类型。其类型是InputType

TypeScript 复制代码 
@Entry
@Component
struct TextInputTest {


  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom: 15})
        TextInput({placeholder: '请输入账号'})
          .placeholderColor(0x999999)
          .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})
          .margin({bottom: 15})
        TextInput({placeholder: '请输入密码'})
          .type(InputType.Password) // 指定输入的类型
      }
      .width('100%')
    }
    .height('100%')
  }
}

InputType包含以下几种输入类型：

  • Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符
  • Password：密码输入模式
  • Email：e-mail地址输入模式
  • Number：纯数字输入模式

2.3.3、设置光标的位置

TypeScript 复制代码 
@Entry
@Component
struct TextInputTest {

  controller: TextInputController = new TextInputController();

  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom: 15})
        TextInput({placeholder: '请输入账号'})
          .placeholderColor(0x999999)
          .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})
          .margin({bottom: 15})
        TextInput({placeholder: '请输入密码'})
          .type(InputType.Password) // 指定输入的类型
          .margin({bottom: 15})
        TextInput({controller: this.controller})
          .margin({bottom: 15})
        Button('设置光标的位置')
          .onClick(() => {
            this.controller.caretPosition(2)  // 设置光标的位置在第二个字符之后
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

上面使用了TextInputColler的caretPosition方法来设置光标所在的位置。

2.3.4、获取输入文本

可以给TextInput设置onChange事件，输入文本发生变化时触发回调，从而拿到输入框中的文本信息。

TypeScript 复制代码 
@Entry
@Component
struct TextInputTest {

  controller: TextInputController = new TextInputController();
  @State username: string = ''; // 保存用户输入的账号

  build() {
    Row() {
      Column() {
        TextInput()
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
          .margin({bottom: 15})
        TextInput({placeholder: '请输入账号'})
          .placeholderColor(0x999999)
          .placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})
          .margin({bottom: 15})
        TextInput({placeholder: '请输入密码'})
          .type(InputType.Password) // 指定输入的类型
          .margin({bottom: 15})
        TextInput({controller: this.controller})
          .margin({bottom: 15})
        Button('设置光标的位置')
          .onClick(() => {
            this.controller.caretPosition(2)  // 设置光标的位置在第二个字符之后
          })
          .margin({bottom: 15})
        TextInput({placeholder: 'username'})
          .caretColor(Color.Blue) // 光标的颜色
          .onChange((value: string) => {
            this.username = value;
          })
          .margin({bottom: 15})
        Text(this.username)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.4、Button

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

TypeScript 复制代码 
@Entry
@Component
struct ButtonTest {

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

2.4.1、按钮样式

type用来定义按钮的样式，其类型是ButtonType

stateEffect用于设置按钮按下时是否开启切换效果，当状态为false时，点击效果关闭，默认值为true

type的样式可以有如下：

  • Capsule：胶囊型按钮（圆角默认是高度的一半）
  • Circle：圆形按钮
  • Normal：普通按钮（默认，不带圆角）

2.4.2、按钮点击事件

可以给Button绑定onClick事件，当用户点击Button的时候，则会执行onClick方法，调用其中的逻辑代码。

TypeScript 复制代码 
@Entry
@Component
struct ButtonTest {

  @State text: string = '';
  @State isShow: boolean = false;

  build() {
    Row() {
      Column() {
        TextInput({placeholder:'请输入内容'})
          .margin({bottom: 15})
          .onChange((value: string) => {
            this.isShow = false;
            this.text = value;
          })
        Button('登录',{type: ButtonType.Capsule, stateEffect: true})
          .width('90%')
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007DFF')
          .margin({bottom: 15})
          .onClick(() => {  // 绑定按钮点击事件
            this.isShow = !this.isShow;
          })
        if(this.isShow) {
          Text(this.text);
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.4.3、包含子组件按钮

TypeScript 复制代码 
@Entry
@Component
struct ButtonTest {

  @State text: string = '';
  @State isShow: boolean = false;

  build() {
    Row() {
      Column() {
        TextInput({placeholder:'请输入内容'})
          .margin({bottom: 15})
          .onChange((value: string) => {
            this.isShow = false;
            this.text = value;
          })
        Button('登录',{type: ButtonType.Capsule, stateEffect: true})
          .width('90%')
          .height(40)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .backgroundColor('#007DFF')
          .margin({bottom: 15})
          .onClick(() => {  // 绑定按钮点击事件
            this.isShow = !this.isShow;
          })
        if(this.isShow) {
          Text(this.text)
            .margin({bottom: 15})
        }
        Button({type: ButtonType.Circle, stateEffect: true}) {
          // 子组件，在其中放置一个图片
          Image($r('app.media.delete'))
            .width(32)
            .height(32)
        }
        .width(64)
        .height(64)
        .backgroundColor(0x317aff)

      }
      .width('100%')
    }
    .height('100%')
  }
}

2.5、LoadingProgress

这个组件用来显示加载进度。

TypeScript 复制代码 
@Entry
@Component
struct LoadingTest {

  build() {
    Row() {
      Column() {
        LoadingProgress()
          .color(Color.Blue)
          .height(64)
          .width(64)
      }
      .width('100%')
    }
    .height('100%')
  }
}

3、资源引用

Resource是资源引用类型，用于设置组件属性的值。

资源文件（字符串、图片、音频......）统一存放在resources目录下。

开发者可以根据屏幕尺寸呈现不同的局效果，根据语言不同使用不同的字符串。

TypeScript 复制代码 
@Entry
@Component
struct ResourceTest {

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

上面的按钮则是写死的，我们可以把相应的资源存放在对应的资源文件中

资源文件的目录：entry/src/main/resources

string.json用来存放字符串资源

TypeScript 复制代码 
{
    "string": [
        {
            "name": "login_text",
            "value": "登录"
        }
    ]
}

同时对于字符串资源需要在en_US,zh_CN目录下对应加上这个login_text键对应的值

en_US目录下的string.json

TypeScript 复制代码 
{
    "string": [
        {
            "name": "login_text",
            "value": "login"
        }
    ]
}

zh_CN目录下的string.json

TypeScript 复制代码 
{
    "string": [
        {
            "name": "login_text",
            "value": "登录"
        }
    ]
}

在float.json中新增如下键值对

TypeScript 复制代码 
{
  "float": [
    {
      "name": "button_width",
      "value": "300vp"
    },
    {
      "name": "button_height",
      "value": "40vp"
    },
    {
      "name": "login_fontSize",
      "value": "18fp"
    }
  ]
}

在color.json中新增一个键button_color

TypeScript 复制代码 
{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "button_color",
      "value": "#1890ff"
    }
  ]
}

配置了上面这些资源后，在使用时就中以以$r('app.type.name')的形式引用应用资源。

type代表资源的类型（或者是资源的存放位置）可以取值是：color,float,string,plural,media

name代表资源的命名

通过引用资源代码可以修改为如下：

TypeScript 复制代码 
@Entry
@Component
struct ResourceTest {

  build() {
    Row() {
      Column() {
        Button($r('app.string.login_text'), {type: ButtonType.Capsule, stateEffect: true})
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .fontSize($r('app.float.login_fontSize'))
          .fontWeight(FontWeight.Medium)
          .backgroundColor($r('app.color.button_color'))
      }
      .width('100%')
    }
    .height('100%')
  }
}
相关推荐
鲜枣课堂1 小时前
5G-A如何与AI融合发展？华为MBBF2024给出解答
人工智能·5g·华为
似水流年QC1 小时前
初探鸿蒙：从概念到实践
华为·harmonyos
晓源よ1 小时前
huawei初级网络工程师综合实验
华为
申耀的科技观察1 小时前
【观察】华为持续投入开源开放“结硕果”，openEuler走出操作系统“创新路”...
华为·开源
华为云PaaS服务小智1 小时前
华为大咖说 | 浅谈智能运维技术
运维·华为·华为云
悟空码字1 小时前
支付宝与华为终端联手，移动支付即将进入“碰时代”
华为·鸿蒙·支付宝
HMS Core2 小时前
融合虚拟与现实，AR Engine为用户提供沉浸式交互体验
华为·ar·harmonyos
dawn12 小时前
鸿蒙ArkTS中的获取网络数据
华为·harmonyos
桃花键神12 小时前
鸿蒙5.0时代：原生鸿蒙应用市场引领开发者服务新篇章
华为·harmonyos
鸿蒙自习室12 小时前
鸿蒙多线程开发——并发模型对比(Actor与内存共享)
华为·harmonyos
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【TC3xx芯片】TC3xx芯片电源管理系统PMS详解05基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测06【经验分享】Ubuntu22.04安装微信(linux官方版)07文件或文件夹名称中有空格如何批量去除08RAG 实践- Ollama+RagFlow 部署本地知识库09Windows10安装PCL1.14.0及点云配准10Macbook pro M1 安装Ubuntu教程