鸿蒙(HarmonyOS)应用开发——基础组件

news/2024/4/17 16:11:16

组件

组件化是一种将复杂的前端应用程序分解成小的、独立的部分的方法。这些部分被称为组件,它们可以重复使用,可以与其他组件组合使用以创建更复杂的组件,并且它们有自己的生命周期和状态。

组件化的目的是提高开发效率和代码重用率,使开发人员更专注于组件自身的实现,而不是整个应用程序。这样可以提高代码的可维护性和可扩展性,并且减少了程序出错的机会。

组件是界面搭建与显示的最小单位;

根据功能分类
基础组件
容器组件
媒体组件
绘制组件
画布组件
Text
Image
TextInput
Button
LoadingProgress
....

Image 组件

Image 用来渲染展示图片的组件,支持加载本地和网络图片

语法

Image(src: string|PixelMap|Resourece)
  • string
    访问网络图片、本地图片

访问网络图片时,需要在module.json5文件中添加网络访问权限
‘module’:{ 'reqPermissinos':[ {"name":"ohos.permission.INTERNET"} ] }

  • PixelMap
    PixelMap 为图像像素类,用于读取或写入图像数据以及获取图像信息。
  • Resource 类型
    使用时,需要先将图片放在resource 的 media或 rawfile目录下

属性

width()| height()支持number、string和resource

Text组件

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

语法

Text(content?:string|resouce)

属性

  • 文本样式
    可使用fontColor、fontSize、fontStyle、fontWeight、fontFamily文本样式
名称参数类型描述
fontColorResouceColor设置文本颜色
fontSizeLength /Resource设置文本尺寸,Length为number类型时,使用fp单位。
fontStyleFontStyle设置文本的字体样式。默认值:FontStyle.Normal。
fontWeightnumber / FontWeigh /string设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。string类型仅支持number类型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular”、“medium”,分别对应FontWeight中相应的枚举值。默认值:FontWeight.Normal。
fontFamilystring /Resource设置文本的字体列表。使用多个字体,使用“,”进行分割,优先级按顺序生效。例如:“Arial,sans-serif”。
 Text('HarmonyOS').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')
  • 文本对其方式
    可以使用textAlign属性设置文本的对齐方式
名称描述
Start水平对齐首部。
Center水平居中对齐。
End水平对齐尾部。
Text('HarmonyOS').width(200).textAlign(TextAlign.Start)
  • 设置文本超长显示
    当文本内容较多超出了Text组件范围的时候,您可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数
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})
  • 设置文本装饰线
    使用decoration设置文本装饰线样式及其颜色
decoration({ type: TextDecorationType.Underline, color: Color.Black })
TextDecorationType类型描述
None不使用文本装饰线
Overline文字上划线修饰。
LineThrough穿过文本的修饰线。
Underline文字下划线修饰。

TextInput

用来输入但行文本并支持响应输入事件

属性

  • 设置提示文本
    当我们平时使用输入框的时候,往往会有一些提示文字
TextInput({ placeholder: '请输入帐号' })
  • 设置最大输入字符数
maxLength()
  • 设置文本框输入类型
    可以使用type属性来设置输入框类型
TextInput({ placeholder: '请输入密码' }).type(InputType.Password)
InputType类型描述
Normal基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password密码输入模式。
Emaile-mail地址输入模式
Number纯数字输入模式。
PhoneNumber9+电话号码输入模式。
  • 设置光标位置
    可以使用TextInputController动态设置光位置
 controller: TextInputController = new TextInputController()this.controller.caretPosition(2)
  • 获取输入文本
    可以给TextInput 设置onChange 获取文本信息
 @State text: string = ''TextInput({ placeholder: '请输入账号' }).caretColor(Color.Blue).onChange((value: string) => {this.text = value})

Button

主要用来响应点击事件,可以包含子组件。

属性

  • 设置按钮样式
    type用于定义按钮样式,示例代码中ButtonType.Capsule表示胶囊形按钮;stateEffect用于设置按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭,默认值为true。
ButtonType类型描述
Capsule胶囊型按钮(圆角默认为高度的一半)
Circle圆形按钮。
Normal普通按钮(默认不带圆角
  • 设置按钮点击事件
    可以给Button绑定onClick事件,每当用户点击Button的时候,就会回调执行onClick方法
Button('登录', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 处理点击事件逻辑})
  • 包含子组件
    Button组件可以包含子组件,让您可以开发出更丰富多样的Button

https://www.xjx100.cn/news/3118858.html

相关文章

iOS NSDate的常用API

目录 一、创建日期 1.获取当前时间 2.当前时间指定秒数之后/前的时间 3.指定日期之后/后的时间 4.2001年之后/前指定秒数的时间 5.1970年之后/后指定秒数的时间 二、初始化日期 1.init 2.时间间指定秒数的时间 3.指定时间指定秒数之前/后的时间 4.2001年指定秒数之后…

面试篇之微服务(一)

目录 概览 1.什么是微服务? 2.微服务带来了哪些挑战? 3.现在有哪些流行的微服务解决方案? 这三种方案有什么区别吗? 4.说下微服务有哪些组件? 注册中心 5.注册中心是用来干什么的? 6.SpringCloud可…

管理Android12系统的WLAN热点

大家好!我是编码小哥,欢迎关注,持续分享更多实用的编程经验和开发技巧,共同进步。 要创建一个APK管理Android 12系统的WLAN热点,你需要遵循以下步骤: 1. 获取必要的权限和API访问权限。在AndroidManifest.xml文件中添加以下权限: ```xml <uses-permission android:…

WPF制作雷达扫描效果

前言 要实现该功能,我们就不得不先了解一下WPF里面的RenderTransform RenderTransform(渲染变换) <Border Height="100" Width="100" Background="Red"

wvp如果确认音频udp端口开放成功

用到工具 在服务器上开启端口监听 选中udp server&#xff0c;点击创建按钮 设置服务器监听端口 在客户端连接服务器端口 选中udp客户端&#xff0c;点击创建 输入服务器地址 远程端口和本地端口&#xff0c;本地端口只要没被占用都可以使用 &#xff0c;点击确认 发送数据 …

蓝桥杯第199题 扫地机器人 暴力优化 二分法 简单题 C++

题目 扫地机器人 - 蓝桥云课 (lanqiao.cn)https://www.lanqiao.cn/problems/199/learning/?page1&first_category_id1&name%E6%89%AB%E5%9C%B0%E6%9C%BA%E5%99%A8%E4%BA%BA 思路和解题方法 首先&#xff0c;通过cin语句输入了终点位置n和障碍物数量k。使用一个数组a来…

mac安装homebrew/brew遇到443

文章目录 问题描述解决方法方法一方法二 参考文献 问题描述 brew 全称Homebrew 是Mac OSX上的软件包管理工具 想在mac终端安装&#xff0c;运行网上提供的指令 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)&quo…

智能AI系统ChatGPT网站系统源码+Midjourney绘画+支持DALL-E3文生图,支持最新GPT-4-Turbo模型

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…