鸿蒙HarmonyOS应用 - ArkUI组件

2024-04-25 16:44

本文主要是介绍鸿蒙HarmonyOS应用 - ArkUI组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

ArkUI组件

基础组件

Image

声明Image组件并设置图片源

网络权限:ohos.permission.INTERNET

Image(scr: string | PixelMap | Resource)// 1. string:用于加载网络图片,需要申请网络权限
Image("https://xxx.png")// 2. PixelMap:像素图
Image(PixelMapObj)// 3. Resource:加载本地图片
// $r: resouce/base/media/mate60.png
Image($r('app.media.mate60'))
// $rawfile: resouce/rawfile/mate60.png
Image($rawfile('mate60.png'))

添加图片属性

Image("https://xxx.jpg").width('50%')

在模拟器运行需要申请网络权限

src/main/module.json5 中添加权限申请

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

Text

声明Text组件并设置文本内容

Text(content?: string | Resource)
// string
Text("用户名")// Resource:用于国际化i18n
Text($r('app.string.username_label'))

配置国际化,使用string.json配置标签

image-20240202194734566
// zh_CN
{"string": [// ...{"name": "ImageWidth_label","value": "图片宽度"}]
}// en_US
{"string": [// ...{"name": "ImageWidth_label","value": "Image Width"}]
}
@Entry
@Component
struct Index {build() {// 内置组件:容器组件(Row、Column)、基础组件(Text)Row() {Column() {Image("https://xxx.jpg").width('50%').borderRadius(5)Text($r('app.string.ImageWidth_label')).fontSize(20).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

TextInput

声明TextInput组件

TextInput({placeholder?: Resourcestr, text?: Resourcestr})
  1. placeHoder:输入框无输入时的提示文本
  2. text:输入框当前的文本内容

属性方法和事件

TextInput({text:'当前输入文本'}).width(150)	//宽.height(30)	//高.backgroundColor('#FFF')	//背景色.type(InputType.Password)	//输入框类型.onChange(value => {// 处理value})

修改图片宽度案例:

Image("https://xxx.jpg").width(this.image_width).borderRadius(5)Text($r('app.string.ImageWidth_label')).fontSize(20).fontWeight(FontWeight.Bold)TextInput({ placeholder: "请输入图片宽度", text: this.image_width.toFixed(0) }).width(150).type(InputType.Number).onChange(value => {console.log('image_width', this.image_width.toString())console.log('value', value)if (value != '') {this.image_width = parseInt(value)}
})

Button

声明Button组件,label是按钮文字

Button(label?: ResourceStr)

属性与事件

Button('缩小').width(80).fontSize(20).onClick(() => {if (this.image_width >= 10) {this.image_width -= 10}
})Button('放大').width(80).fontSize(20).onClick(() => {if (this.image_width < 300) {this.image_width += 10}
})

Slider 滑动条

Slider({min: 0, // 最小值max: 300, // 最大值value: this.image_width, // 当前值step: 1, // 滑动步长style: SliderStyle.OutSet, // 样式: Outset/InSetdirection: Axis.Horizontal, // 方向: Horizontal/Verticalreverse: false // 是否反向滑动
}).width('90%').showTips(true).trackThickness(6).onChange(val => {this.image_width = val
})

布局组件

属性方法名说明参数
justifyContent设置子元素在主轴方向的对齐格式FlexAlign枚举
alignItems设置子元素在交叉轴方向的对齐格式Row使用VerticalAlign枚举
Column使用HorizontalAlign枚举

主轴方向

Column容器:

Row容器:

交叉轴方向

Column容器:

image-20240204212642772

Row容器:

盒子模型

渲染控制

ForEach

ForEach类似于Vue的v-for,keyGenerator函数类似于:key,是对象的唯一标识。在修改数据后只会去渲染修改的那部分组件,提高效率。

@Entry
@Component
struct Index {private names: string[] = ['wmh', 'wmh1024', 'rexhao', 'NDS.wmh']build() {Column() {Row() {Text("分数列表").padding(20).fontSize(40)}.width('100%')ForEach(this.names, (item) => {Row() {Image("https://xxx.jpg").width(60).margin({right: 20,left: 20}).borderRadius(5)Column() {Text(item).fontSize(25)Text("Rating: 14300").fontSize(15)}.alignItems(HorizontalAlign.Start)}.width('100%').margin({bottom: 20})})}}
}
image-20240205200331872

if-else

类似于Vue中的v-if

if ( 条件 ) {// 内容A
} else {// 内容B
}

列表组件

列表(List)是一种复杂容器

特点:

  1. 列表项(ListItem)数量过多超出屏幕后,会自动提供滚动功能
  2. 列表项(ListItem)既可以纵向排列,也可以横向排列

image-20240205201822300

高度权重值,默认为0。把高度按照权重分配。

.layoutWeight(1)
@Entry
@Component
struct Index {private names: string[] = ['wmh', 'wmh1024', 'rexhao','wmh1024', 'rexhao', 'NDS.wmh', 'wmh', 'wmh1024', 'rexhao','NDS.wmh', 'wmh1024', 'rexhao', 'NDS.wmh']build() {Column() {Row() {Text("分数列表").padding(20).fontSize(40)}.width('100%')List() {ForEach(this.names, (item) => {ListItem() {Row() {Image("https://xxx.jpg").width(60).margin({right: 20,left: 20}).borderRadius(5)Column() {Text(item).fontSize(25)Text("Rating: 14300").fontSize(15)}.alignItems(HorizontalAlign.Start)}.width('100%').margin({ bottom: 20 })}})}.width('100%').layoutWeight(1)}}
}

自定义组件

创建自定义组件

封装并导出组件

@Component
export struct Header {private title: stringbuild() {Row() {Text(this.title).padding(20).fontSize(40)}.width('100%')}
}

使用组件

import { Header } from './Header'Header({ title: "分数列表" })

构建函数@Builder

  • 定义在struct外部:全局自定义构建函数
  • 定义在struct内部:局部自定义构建函数(不加function、调用需要加this.

构建函数的创建

@Builder function ItemCard(item: string) {Row() {Image("https://xxx.jpg").width(60).margin({right: 20,left: 20}).borderRadius(5)Column() {Text(item).fontSize(25)Text("Rating: 14300").fontSize(15)}.alignItems(HorizontalAlign.Start)}.width('100%').margin({ bottom: 20 })
}

构建函数的使用

List() {ForEach(this.names, (item: string) => {ListItem() {ItemCard(item)}})
}.width('100%').layoutWeight(1)

自定义公共样式

@Styles

自定义公共样式:封装通用样式(属性必须是公共属性

// 定义
@Styles function width_full() {.width('100%')
}// 调用
.width_full()
@Extend()

@Style,用于封装特有属性

@Extend(Text) function DefaultFontSize() {.fontSize(15)
}

这篇关于鸿蒙HarmonyOS应用 - ArkUI组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/935236

相关文章

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上,除了众多新品的发布,还有一个消息也点燃了所有鸿蒙用户的期待,那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上,华为宣布鸿蒙 HarmonyOS 5.1 将于 7

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

Python使用Tkinter打造一个完整的桌面应用

《Python使用Tkinter打造一个完整的桌面应用》在Python生态中,Tkinter就像一把瑞士军刀,它没有花哨的特效,却能快速搭建出实用的图形界面,作为Python自带的标准库,无需安装即可... 目录一、界面搭建:像搭积木一样组合控件二、菜单系统:给应用装上“控制中枢”三、事件驱动:让界面“活”

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的?mac系统中有很多自带的应用,想要看看哪些是系统自带,该怎么查看呢?下面我们就来看看Mac系统内... 在MAC电脑上,可以使用以下方法来确定哪些软件是系统自带的:1.应用程序文件夹打开应用程序文件夹