鸿蒙HarmonyOS应用 - ArkUI组件

2024-04-25 16:44
文章标签 应用 组件 鸿蒙 harmonyos arkui

本文主要是介绍鸿蒙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。

相关文章

Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
PHP应用中处理限流和API节流的最佳实践

PHP应用中处理限流和API节流的最佳实践

《PHP应用中处理限流和API节流的最佳实践》限流和API节流对于确保Web应用程序的可靠性、安全性和可扩展性至关重要,本文将详细介绍PHP应用中处理限流和API节流的最佳实践,下面就来和小编一起学习... 目录限流的重要性在 php 中实施限流的最佳实践使用集中式存储进行状态管理（如 Redis）采用滑动
阅读更多...
深入浅出Spring中的@Autowired自动注入的工作原理及实践应用

深入浅出Spring中的@Autowired自动注入的工作原理及实践应用

《深入浅出Spring中的@Autowired自动注入的工作原理及实践应用》在Spring框架的学习旅程中,@Autowired无疑是一个高频出现却又让初学者头疼的注解,它看似简单,却蕴含着Sprin... 目录深入浅出Spring中的@Autowired：自动注入的奥秘什么是依赖注入？@Autowired
阅读更多...
PostgreSQL简介及实战应用

PostgreSQL简介及实战应用

《PostgreSQL简介及实战应用》PostgreSQL是一种功能强大的开源关系型数据库管理系统,以其稳定性、高性能、扩展性和复杂查询能力在众多项目中得到广泛应用,本文将从基础概念讲起,逐步深入到高... 目录前言1. PostgreSQL基础1.1 PostgreSQL简介1.2 基础语法1.3 数据库
阅读更多...
Python中的filter() 函数的工作原理及应用技巧

Python中的filter() 函数的工作原理及应用技巧

《Python中的filter()函数的工作原理及应用技巧》Python的filter()函数用于筛选序列元素,返回迭代器,适合函数式编程,相比列表推导式,内存更优,尤其适用于大数据集,结合lamb... 目录前言一、基本概念基本语法二、使用方式1. 使用 lambda 函数2. 使用普通函数3. 使用 N
阅读更多...
Python中yield的用法和实际应用示例

Python中yield的用法和实际应用示例

《Python中yield的用法和实际应用示例》在Python中,yield关键字主要用于生成器函数（generatorfunctions）中,其目的是使函数能够像迭代器一样工作,即可以被遍历,但不会... 目录python中yield的用法详解一、引言二、yield的基本用法1、yield与生成器2、yi
阅读更多...
Python多线程应用中的卡死问题优化方案指南

Python多线程应用中的卡死问题优化方案指南

《Python多线程应用中的卡死问题优化方案指南》在利用Python语言开发某查询软件时,遇到了点击搜索按钮后软件卡死的问题,本文将简单分析一下出现的原因以及对应的优化方案,希望对大家有所帮助... 目录问题描述优化方案1. 网络请求优化2. 多线程架构优化3. 全局异常处理4. 配置管理优化优化效果1.
阅读更多...
从基础到高阶详解Python多态实战应用指南

从基础到高阶详解Python多态实战应用指南

《从基础到高阶详解Python多态实战应用指南》这篇文章主要从基础到高阶为大家详细介绍Python中多态的相关应用与技巧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、多态的本质：python的“鸭子类型”哲学二、多态的三大实战场景场景1：数据处理管道——统一处理不同数据格式
阅读更多...
Java Stream 的 Collectors.toMap高级应用与最佳实践

Java Stream 的 Collectors.toMap高级应用与最佳实践

《JavaStream的Collectors.toMap高级应用与最佳实践》文章讲解JavaStreamAPI中Collectors.toMap的使用,涵盖基础语法、键冲突处理、自定义Map... 目录一、基础用法回顾二、处理键冲突三、自定义 Map 实现类型四、处理 null 值五、复杂值类型转换六、处理
阅读更多...
分布式锁在Spring Boot应用中的实现过程

分布式锁在Spring Boot应用中的实现过程

《分布式锁在SpringBoot应用中的实现过程》文章介绍在SpringBoot中通过自定义Lock注解、LockAspect切面和RedisLockUtils工具类实现分布式锁,确保多实例并发操作... 目录Lock注解LockASPect切面RedisLockUtils工具类总结在现代微服务架构中，分布
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2