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.mzph.cn/news/886342.shtml

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

相关文章

Jenkins + gitee 自动触发项目拉取部署(Webhook配置)

目录 前言 Generic Webhook Trigger 插件 下载插件 ​编辑 配置WebHook 生成tocken 总结 前言 前文简单介绍了Jenkins环境搭建,本文主要来介绍一下如何使用 WebHook 触发自动拉取构建项目; Generic Webhook Trigger 插件 实现代码推送后,触…

React Native 全栈开发实战班 - 网络与数据之网络请求基础

在移动应用中,网络请求 是实现与服务器进行数据交互的核心功能。React Native 基于 JavaScript 的特性,提供了多种方式进行网络请求,包括使用 fetch API、axios 库以及 WebSocket 等。本章节将详细介绍如何在 React Native 中进行网络请求&am…

【插件】重复执行 pytest-repeat

安装 pip3 install pytest-repeat 用法 1.命令行 pytest --count num pytest --count 32.装饰器 pytest.mark.repeat(num) #num运行次数 pytest.mark.repeat(5)#执行结果如下:

软件测试 —— 自动化基础

目录 前言 一、Web 自动化测试 1.什么是 Web 自动化测试 2.驱动 3.安装驱动管理 二、Selenium 1.简单 web 自动化测试示例 2.工作原理 三、元素定位 1.cssSelector 2.XPath 四、操作测试对象 1.点击/提交对象 2.模拟按键输入 3.清除文本内容 4.获取文本信息 5.…

Java中 LinkedList<>,ArrayDeque<>的区别 || Queue和Deque的区别

我是你爹 LinkedList<> 和 ArrayDeque<> 的区别Queue接口 和 Deque接口区别Queue 的用法Deque 的用法 LinkedList<> 和 ArrayDeque<> 的区别 1. 数据结构实现方式&#xff1a; LinkedList&#xff1a; 基于链表结构&#xff0c;是一个双向链表。每个…

HVV蓝队基础

免责声明 学习视频来自B 站up主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 企业网络架构 企业技术和信…

Docker+Django项目部署-从Linux+Windows实战

一、概述 1. 什么是Docker Docker 是一个开源的应用容器引擎&#xff0c;支持在win、mac、Linux系统上进行安装。可以帮助我们在一台电脑上创建出多个隔离的环境&#xff0c;比传统的虚拟机极大的节省资源 。 为什么要创建隔离的环境&#xff1f; 假设你先在有一个centos7.…

分布式,微服务,SpringCloudAlibaba,nacos,gateway,openFeign

想学习微服务SpringCloudAlibaba的小伙伴&#xff0c;可以观看视频 地址&#xff1a; https://www.bilibili.com/video/BV1cFDEYWEkY/?vd_source14d27ec13a4737c281b7c79463687112分布式架构和微服务是两个密切相关但又有所区别的概念。它们在现代软件工程中经常被提及&#…

【jvm】如何破坏双亲委派机制

目录 1.说明2.重写ClassLoader的loadClass方法2.1 原理2.2 实现步骤2.3 注意事项 3.使用线程上下文类加载器3.1 原理3.2 实现步骤3.3 应用场景 4.利用SPI机制4.1 原理4.2 实现步骤4.3 应用场景 5.Tomcat等容器的自定义类加载器5.1 原理5.2 实现方式5.3 应用场景 1.说明 1.双亲委…

深度学习工具和框架详细指南:PyTorch、TensorFlow、Keras

引言 在深度学习的世界中&#xff0c;PyTorch、TensorFlow和Keras是最受欢迎的工具和框架&#xff0c;它们为研究者和开发者提供了强大且易于使用的接口。在本文中&#xff0c;我们将深入探索这三个框架&#xff0c;涵盖如何用它们实现经典深度学习模型&#xff0c;并通过代码…

蓝桥杯-洛谷刷题-day3(C++)

目录 1.忽略回车的字符串输入 i.getline() ii.逐个字符的识别再输入 2.获取绝对值abs() 3.做题时的误区 4.多个变量的某一个到达判断条件 i.max() 5.[NOIP2016 提高组] 玩具谜题 i.代码 6.逻辑上的圆圈 i.有限个数n的数组 7.数组的定义 i.动态数组 1.忽略回车的字符串输…

fast-api后端 + fetch 前端流式文字响应

fast-api后端 fetch 前端流式文字响应 fast-api后台接口流式响应 前端fetch 流式文本数据处理 fast-api后台接口 流式响应 from fastapi.responses import StreamingResponse from tqdm import tqdm from pydantic import BaseModelclass ItemDataSingle(BaseModel):data: …

作用域、生命周期和链接性的英文解释

作用域 - Scope Scope refers to the region of a program where a variable, function, or other identifier can be accessed or referenced. 生命周期 - Lifetime (or Duration in some contexts) Lifetime describes the period during which a variable or object exists…

元器件封装

元器件封装类型 为什么越来越多用贴片元件&#xff0c;而不是插件元件 为什么越来越多用贴片元件&#xff0c;而不是插件元件 1.体积小、质量小、容易保存和运输&#xff1b; 2.容易焊接和拆卸。抗震效果好。 贴片元件不用过孔&#xff0c;用锡少。直插元件最麻烦的就是拆卸&a…

【jvm】为什么要用元空间替代永久代

目录 1. 说明2. 永久代的限制与问题2.1 内存管理限制2.2 垃圾收集效率2.3 类的卸载问题 3. 元空间的优势 1. 说明 1.Java使用元空间替代永久代&#xff0c;这一变化主要源于永久代在实现上存在的限制和问题&#xff0c;以及元空间所提供的更优性能和更高灵活性。2.Java使用元空…

基本数据类型:Kotlin、Dart (Flutter)、Java 和 C++ 的比较

文章目录 一、基本数据类型的比较1.1 整数类型1.2 浮点类型1.3 字符类型1.4 布尔类型1.5 小结 二、有符号和无符号整数三、二进制补码表示四、精度丢失问题五、结论 在编程语言中&#xff0c;基本数据类型是构建更复杂数据结构的基础。在本文中&#xff0c;我们将比较 Kotlin、…

C++ 的发展

目录 C 的发展总结&#xff1a;​编辑 1. C 的早期发展&#xff08;1979-1985&#xff09; 2. C 标准化过程&#xff08;1985-1998&#xff09; 3. C 标准演化&#xff08;2003-2011&#xff09; 4. C11&#xff08;2011年&#xff09; 5. C14&#xff08;2014年&#xf…

《Python 网络爬虫》

一、引言 在当今信息时代&#xff0c;互联网上蕴含着大量有价值的数据。网络爬虫作为一种自动获取网页数据的技术手段&#xff0c;在数据挖掘、信息检索、市场分析等领域发挥着重要作用。Python 由于其简洁易学、功能强大的特点&#xff0c;成为了网络爬虫开发的热门语言之一。…

【MySQL】MySQL在Centos环境安装

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a; MySQL 目录 &#x1f308;前言&#x1f525;卸载不要的环境&#x1f525;检查系统安装包&#x1f525;卸载这些默认安装包&#x1f525;获取mysql官方yum源&#x1f525;安装mysql yum源…

【算法】动态规划中01背包问题解析

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…