HarmonyOS ArkUI(基于ArkTS) 常用组件

一 Button 按钮

Button是按钮组件,通常用于响应用户的点击操作,可以加子组件

Button('我是button')Button(){Text('我是button')}

 type 按钮类型

Button有三种可选类型,分别为胶囊类型(Capsule)、圆形按钮(Circle)和普通按钮(Normal),通过type进行设置。

 Button({type:ButtonType.Normal}).backgroundColor('#ff6700')Button({type:ButtonType.Capsule}).backgroundColor('#ff6700')Button({type:ButtonType.Circle}).backgroundColor('#ff6700')

二 Radio 单选框

Radio是单选框组件,通常用于提供相应的用户交互选择项,同组的Radio中只有一个可以被中。

Radio({ value: 'Radio1', group: 'radioGroup' }).checked(false)
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(true)

三 Toggle 切换按钮

如下,type为开关类型,包括Button、Checkbox和Switch,isOn为切换按钮的状态

Toggle({ type: ToggleType.Checkbox, isOn: false })

四 Progress 进度条

Progress是进度条显示组件,显示内容通常为目标操作的当前进度。具体用法请参考Progress。

设置进度条样式

Progress有5种可选类型,通过ProgressType可以设置进度条样式,ProgressType类型包括:ProgressType.Linear(线性样式)、 ProgressType.Ring(环形无刻度样式)、ProgressType.ScaleRing(环形有刻度样式)、ProgressType.Eclipse(圆形样式)和ProgressType.Capsule(胶囊样式)。

五 Image 图片

加载方式

  • 本地资源
Image('images/view.jpg')
.width(200)
  • 网络资源 
Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址
  • Resource资源

使用资源格式可以跨包/跨模块引入图片,resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。

Image($r('app.media.icon'))
  • rawfile
Image($rawfile('example1.png'))

设置缩放属性

Image().objectFit(ImageFit.属性)

重复样式

.objectRepeat(ImageRepeat.XY)  XY还可以是 X  ,  Y

设置图片渲染模式

.renderMode(ImageRenderMode.Template)  将图片设置为黑白

.syncLoad(true) 同步加载

一般情况下,图片加载流程会异步进行,以避免阻塞主线程,影响UI交互。但是特定情况下,图片刷新时会出现闪烁,这时可以使用syncLoad属性,使图片同步加载,从而避免出现闪烁。不建议图片加载较长时间时使用,会导致页面无法响应。

六  Video 视频

Video({src: '',  // 视频地址previewUri: '' //视频未播放图片}).muted(false) //设置是否静音.controls(false) //设置是否显示默认控制条.autoPlay(false) //设置是否自动播放.loop(false) //设置是否循环播放.objectFit(ImageFit.Contain) //设置视频适配模式

七 Popup 气泡提示 

文本提示气泡常用于只展示带有文本的信息提示,不带有任何交互的场景。Popup属性需绑定组件,当bindPopup属性中参数show为true时会弹出气泡提示。

@Entry
@Component
struct PopupExample {@State handlePopup: boolean = falsebuild() {Column() {Button('PopupOptions').onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {message: 'This is a popup with PopupOptions',})}.width('100%').padding({ top: 5 })}
}

八 菜单

创建默认菜单

Button('click for Menu').bindMenu([{value: 'Menu1',action: () => {console.info('handle Menu1 select')}}])

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot学习笔记(一)

一、Spring Boot概述 (一)微服务概述 1、微服务 微服务(英语:Microservices)是一种软件架构风格,它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础,利用模块化的方式…

C++初阶(十三)--STL--vector的使用

目录 ​编辑 一、vector的基本介绍 二、vector的使用 1.构造函数的介绍 2.容量操作 size和capacity reserve和resize empty 3.vector的遍历 operator[ ](size_t n) 迭代器使用 begin和end rbegin和rend 4.vector的增删查改 push_back和pop_back insert和erase fi…

用Python爬虫“偷窥”1688商品详情:一场数据的奇妙冒险

引言:数据的宝藏 在这个信息爆炸的时代,数据就像是一座座等待挖掘的宝藏。而对于我们这些电商界的探险家来说,1688上的商品详情就是那些闪闪发光的金子。今天,我们将化身为数据的海盗,用Python这把锋利的剑&#xff0…

matlab的函数名和函数文件名的关系(编程注意事项)

在MATLAB中,函数名和函数文件名之间有着重要的关系。以下是它们之间的关系以及在编程时需要注意的事项 文章目录 函数名与函数文件名的关系编程时的注意事项结论 函数名与函数文件名的关系 一致性要求: 在MATLAB中,函数文件的文件名必须与函数…

【Redis】持久化机制RDB与AOF

一、RDB RDB模式是就是将内存中的数据存储到磁盘中,等到连接断开的时候会进行持久化操作。但是如果服务器宕机,会导致这个持久化机制不会执行,但是内存中的文件会直接丢失。所以可以设置一个触发机制,save 60 1000 就是代表60秒 执…

基于Lora通讯加STM32空气质量检测WIFI通讯-分享

目录 目录 前言 一、本设计主要实现哪些很“开门”功能? 二、电路设计原理图 1.电路图采用Altium Designer进行设计: 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 随着环境污染问题的日益严重,空气质量的监测与管理已经…

【MySQL】ubantu 系统 MySQL的安装与免密码登录的配置

🍑个人主页:Jupiter. 🚀 所属专栏:MySQL初阶探索:构建数据库基础 欢迎大家点赞收藏评论😊 目录 📚mysql的安装📕MySQL的登录🌏MySQL配置免密码登录 📚mysql的…

【STK学习】part2-星座-目标可见性与覆盖性分析

【Satellite Tool Kit】学习并深入了解卫星/星座生成、可见性分析、覆盖性分析等知识,并基于STK软件实现对应数据的导出,以用于算法的约束输入。 文章目录 一、学习目标二、学习内容2.1 星地可见性分析2.1.1 单星单地2.1.2 单星多地2.1.3 多星单地 2.2 星…

框架实战:SSM整合原理和实战

1. SSM整合理解 1.1. IOC两个容器对应组件 容器名盛放组件web容器web相关组件(controller,springmvc核心组件)root容器业务和持久层相关组件(service,aop,tx,dataSource,mybatis,mapper等) 配置文件 配置名对应内容对应容器Web…

自然语言处理:第六十三章 阿里Qwen2 2.5系列

本人项目地址大全:Victor94-king/NLP__ManVictor: CSDN of ManVictor 项目地址: QwenLM/Qwen2.5: Qwen2.5 is the large language model series developed by Qwen team, Alibaba Cloud. 官网地址: 你好,Qwen2 | Qwen & Qwen2.5: 基础模型大派对&a…

i春秋-登陆(sql盲注爆字段,.git缓存利用)

练习平台地址 竞赛中心 题目描述 先登陆再说 题目内容 就是一个登录框 测试登录 用户名:admin or 11# 密码:随便输 返回密码错误 用户名:随便输 密码:随便输 返回用户名不存在 这里就可以确定时一个bool盲注了 这里提供一个lik…

新华三H3CNE网络工程师认证—子接口技术

子接口(subinterface)是通过协议和技术将一个物理接口(interface)虚拟出来的多个逻辑接口。在VLAN虚拟局域网中,通常是一个物理接口对应一个 VLAN。在多个 VLAN 的网络上,无法使用单台路由器的一个物理接口…

C# - 无法加载 DLL“libmupdf.dll”: 找不到指定的模块。

1.本机环境 windows 11 64位Visual Studio 2015 2.报错如下 用户代码未处理 System.DllNotFoundException HResult-2146233052 Message无法加载 DLL“libmupdf.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。 SourceMoonPdfLib TypeName"" StackTrac…

23.UE5删除存档

2-25 删除存档制作_哔哩哔哩_bilibili 按照自己的风格制作删除按钮 这样该行的存档就被从存档列表中删除了,并且实际存档(我的存档蓝图)中也被删除了 但是存在一个问题,如果存档数据中存在索引为: 0 1 2 3的存档,当索…

VSCode DeBug时无法进入自定义工具库

最近遇到一个问题,将自己的写的工具包放到conda里site-packagse下,并配置了__init__.py文件,当我debug时,想进入工具包函数调试,但是总是进入不了工具包函数。找了许多博客方法,尝试了将launch.json中的jus…

单元测试框架gtest学习(三)—— 事件机制

前言 上节我们学习了gtest的各种宏断言 单元测试框架gtest学习(二)—— 认识断言-CSDN博客 本节我们介绍gtets的事件机制 虽然 Google Test 的核心是用来编写单元测试和断言的,但它也允许在测试执行过程中进行事件的钩取和自定义&#xf…

在k8s上部署Crunchy Postgres for Kubernetes

目录 一、前言二、安装Crunchy Postgres for Kubernetes三、部署一个简单的postgres集群四、增加pgbouncer五、数据备份六、备份恢复七、postgres配置参数八、数据导入九、权限管理 一、前言 Crunchy Postgres可以帮助我们在k8s上快速部署一个高可用、具有自动备份和恢复功能的…

python中Pandas操作excel补全内容

补全ID、InStore、Date import random from datetime import datetime, timedeltaimport pandas as pdfile_path r"C:\Users\xb\Desktop\Books_1.xlsx" books pd.read_excel(iofile_path, skiprows3, usecols"C:F", dtype{"ID": str, "I…

高级 SQL 技巧讲解

​ 大家好,我是程序员小羊! 前言: SQL(结构化查询语言)是管理和操作数据库的核心工具。从基本的查询语句到复杂的数据处理,掌握高级 SQL 技巧不仅能显著提高数据分析的效率,还能解决业务中的复…

Android okhttp 网络链接各阶段监控

步骤 1: 添加依赖 在项目的 build.gradle 文件中,添加 OkHttp 依赖: implementation com.squareup.okhttp3:okhttp:4.11.0 步骤 2: 创建自定义的 EventListener 创建一个自定义的 EventListener 类: import android.util.Log import okht…