ArkTs基础入门

ArkTs基础入门

文章目录

  • 一、 (方舟开发框架)ArkUI介绍
  • 二、自定义组件
  • 三、组件事件及使用
      • 弹出框
      • 分割线
      • Text文本
      • TextInput文本输入框
      • Image图片
      • Column列
      • Row行
      • Button按钮


一、 (方舟开发框架)ArkUI介绍

方舟开发框架(简称:ArkUI),是一套 构建 HarmonyOS 应用 界面 的框架。构建页面的最小单位就
是 "组件"。

二、自定义组件

自定义组件的构成: 
ArkTs通过装饰器:@Comonent和@Entry装饰struct关键字声明数据结构,构成一个自定义组件。
自定义组件中提供了一个build(){} 函数,须在该函数内进行链式调用的方式进行基本的UI描述@Entry:@Entry模拟页面不会被加载,一个自定义组件只能被一个@Entry进行修饰,也是UI页面的入口
@Component :  表示自定义组件,只能修饰struct关键字声明结构,被修饰后剧本组件渲染能力
自定义组件格式: @Entry@Componentstruct Index {build(){}}
在同一个文件中:定义一个组件可以被实现调用 
@Component
struct Index2 {build(){}
}
调用方式:@Entry@Componentstruct Index {build(){column(){Index2()}}}

三、组件事件及使用

弹出框

AlertDialog.show({ message: '输出信息' })

分割线

Divider() // 分割线

Text文本

Text("字符串"或者在element中拿取对应值)
方式一 Text("字符串")
方式二 Text($r("app.string.json文件名.对应name") // 可以或者到对应的value 主要方便国际化
Text("值")属性:.fontSize()  字体大小.fontColor() 字体颜色,建议使用十六进制和枚举.border()  边框 如:.border({ width: 2 }).TextAlign(TextAlign.___)   文本Center居中  Start左边  End右边.MaxLines(number)  设置最大行数 ,多出的不会显示,若想看是否存在溢出需要结合 textOverflow,但不会显示溢出多少信息只是有个表示。。。.textOverflow({overflow:TextOverflow.Ellipsis})   Clip溢出不显示,Ellipsis:超出最大行数才会生效,才体现一处效果.lineHeight()  行高 :行与行的高度.width() 宽度.height() 高度当Text中写Span后,text是不生效的,样式也是一样
如:
Text(`sssvfvfv`) {Span("米好") // 业务span内容会覆盖Text内容,若样式都有则文本样式不生效}

TextInput文本输入框

TextInput({ placeholder: '提示信息',text:'默认值' }).width()宽度.height() 高度.onChange((val)=>{})  触发事件:当写箭头函数时val位置,可以获取输入变量,用于改变定义变量信息.type(InputType.___)  设置是普通文本、密码、邮箱格式

Image图片

图片的引用存在2个方式:
当文件在media下时,调用方式为: Image($r("app.media.图片名"))
当文件在rawfile下时,调用方式为:Image($rawfile("图片名"))

Column列

格式:Column(){ }// 在上级为build() 时  每个自定义组件中,统计的只能存在一个 ,因为只能存在一个节点

Row行

格式:Row(){}  // 在上级为build() 时    每个自定义组件中,统计的只能存在一个 ,因为只能存在一个节点

Button按钮

Button(“值”)
.onClick(()=>{处理业务})点击事件使用
.enabled(boolean)  :按钮判断合适禁用启用
	Button("登录").width("80%").onClick(() => {if (true) {AlertDialog.show({ message: '登录成功' })} else {AlertDialog.show({ message: '登录失败' })}}).enabled(true) // true启用 false 禁用

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

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

相关文章

Java | Leetcode Java题解之第224题基本计算器

题目&#xff1a; 题解&#xff1a; class Solution {public int calculate(String s) {Deque<Integer> ops new LinkedList<Integer>();ops.push(1);int sign 1;int ret 0;int n s.length();int i 0;while (i < n) {if (s.charAt(i) ) {i;} else if (s…

实施OPC UA网关以加速设备与MES系统之间的连接

在现代工业自动化中&#xff0c;信息化和智能化已成为企业提升竞争力的关键因素&#xff0c;为了实现生产过程的自动化和管理的高效化&#xff0c;工业自动化系统&#xff08;如OPC UA&#xff09;与制造执行系统&#xff08;MES&#xff09;的集成变得尤为重要。OPC UA&#x…

Pycharm 出现sdk is not defined for run configuration解决办法

第一步&#xff1a;运行->编辑配置 第二部&#xff1a;重新选择一下脚本路径和Python解释器 第三步&#xff1a;保存。重新运行

WebKit简介及其神秘的工作流程

在信息时代的巨浪中&#xff0c;互联网已经深深地渗透到了我们生活的每一个角落。作为连接我们与这个庞大网络世界的桥梁&#xff0c;网页浏览器无疑成为了我们生活中不可或缺的一部分。而在这些浏览器的背后&#xff0c;往往隐藏着一些强大而神秘的引擎&#xff0c;它们为浏览…

Openresty+lua 定时函数 ngx.timer.every

ngx.timer.every 是 OpenResty 中的一个函数&#xff0c;用于创建定时器&#xff0c;以便定期执行某个函数或代码块。它的用法如下&#xff1a; local delay 5 -- 定时器间隔时间&#xff0c;单位为秒ngx.timer.every(delay, function(premature)-- 这里是定时执行的代码块i…

鸿蒙系统:未来智能生态的引领者

在当今这个日新月异的互联网领域&#xff0c;操作系统作为连接硬件与软件的桥梁&#xff0c;其重要性不言而喻。随着华为鸿蒙系统&#xff08;HarmonyOS&#xff09;的崛起&#xff0c;一场关于操作系统未来的讨论再次被推向高潮。 鸿蒙OS&#xff0c;华为的全新力作&#xff…

LLM生成nvidia-h100-tensor-core-hopper-whitepaper.pdf摘要

LLM生成nvidia-h100-tensor-core-hopper-whitepaper.pdf摘要 代码 LLM生成nvidia-h100-tensor-core-hopper-whitepaper.pdf摘要 代码 import pdfplumber import timedef split_text_to_chunks(text, max_chunk_size8192, delimiter####):"""将长文本分割成多块…

网络模型介绍

网络模型在网络领域中主要指的是用于描述计算机网络系统功能的各种框架&#xff0c;其中最具代表性的两种模型是OSI七层参考模型和TCP/IP四层参考模型。以下是对这两种网络模型的详细解析&#xff1a; 一、OSI七层参考模型 OSI&#xff08;Open System Interconnection&#…

Python变量·二

# 变量 : 可变的量 # 1. 作用是用来存储数据, 为了方便以后使用它做别的运算 # 2. 定义变量时,不需要固定类型(弱类型: 动态数据类型) # 定义一个变量: # 将10这个值 赋值 给变量a (a是我们自己取的变量名) a 10 # 重点掌握 print(a, type(a)) # 10 <class int>…

K8S篇之Ingress详解以及用法说明

一、Ingress简介 Ingress 是 Kubernetes 中用于管理和配置从集群外部访问集群内部服务的资源对象。它通过定义路由规则来控制外部流量的访问方式&#xff0c;支持基于 HTTP 和 HTTPS 的高级路由功能和安全性配置。 Ingress是一种HTTP方式的路由转发机制&#xff0c;为K8S服务配…

AGAST (角点检测)

AGAST检测原理 AGAST(Adaptive and Generic Accelerated Segment Test)算法是Elmar于2010年提出的特征检测算法,改进了FAST(Features from Accelerated Segment Test)特征检测方法,使其具有更快的速度和更好的鲁棒性。AGAST算法提供了比FAST算法更详细的特征标记方式和判断依…

【Python_GUI】tkinter模块、创建空白窗口

tkinter是使用Python进行窗口视觉设计的模块&#xff0c;它是Python的标准Tk GUI工具包的接口&#xff0c;在安装Python时&#xff0c;就自动安装了该模块。 使用tkinter模块开发时&#xff0c;最核心的就是各种组件的使用。生活中玩积木时&#xff0c;通过将不同形状的木板进…

在安卓中使用FFmpeg录制摄像头的视频

在移动应用开发中&#xff0c;有时需要利用设备的摄像头录制视频&#xff0c;并且希望在录制过程中能够精确控制视频的质量、格式和时长。FFmpeg作为一个强大的多媒体处理工具&#xff0c;提供了广泛的功能和选项&#xff0c;能够帮助我们实现这样的需求。 添加依赖 在安卓平台…

Knife4j的原理及应用详解(一)

本系列文章简介&#xff1a; 在当今快速发展的软件开发领域&#xff0c;API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;作为不同软件应用之间通信的桥梁&#xff0c;其重要性日益凸显。随着微服务架构的兴起&#xff0c;API的数量…

ARM/Linux嵌入式面经(十):极氪

开篇强调两个事情: pdf文件都在百度网盘群:911289806一定要把超链接里面的文章看了,那都是为了你们写的。老板!!!现在多学点,涨个2k工资,真的很值得。要不吃学习的苦,要不吃生活的苦。 1. 自我介绍 专开新篇,等我! 2. 项目介绍,提问 专开新篇,等我! 3. SPI通信和…

A股本周在3000点以下继续筑底,本周依然继续探底?

夜已深&#xff0c;市场传来了3个浓烈的消息&#xff0c;炸锅了&#xff0c;恐有大事发生&#xff0c;马上告诉所有人&#xff1a; 消息面&#xff1a; 1、中国经济周刊首席评论员钮文新称&#xff1a;不要等中小投资者都彻底希望&#xff0c;销户离场了&#xff0c;才发现该…

【APK】Unity出android包,报错 Gradle build failed.See the Console for details

参考大佬的博客&#xff1a;报错&#xff1a;Gradle build failed.See the Console for details.&#xff08;已解决&#xff09;_starting a gradle daemon, 1 incompatible daemon co-CSDN博客 本地出Android包&#xff0c;Build失败 解决办法&#xff1a; 1.下载一个低版本…

python怎么定义全局变量?如何使用全局变量?

许多小伙伴们在学习 python 的函数的时候会遇到这两个问题&#xff0c;那就是变量的作用域与全局变量的使用。那么什么是全局变量呢&#xff1f;python 怎么定义全局变量&#xff1f;通过本篇文章小编讲给你听。 首先得知道&#xff0c;什么是全局变量&#xff0c;什么是局部…

C/C++服务器基础(网络、协议、数据库)

Socket Socket是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。它可以看成是两个网络应用程序进行通信时&#xff0c;各自通信连接中的端点。Socket上联应用进程&#xff0c;下联网络协议栈&#xff0c;是应用程序通过网络协议进行通信的接口&#xff0c;是应用…

c++语法之缺省参数

缺省参数通俗来说就是一个函数里面有初值的参数。有初值那么就可以不传参。 基础语法 缺省分为全缺省和半缺省 全缺省 我们来看它的基础语法&#xff0c;我们以add函数为例: 语法基础就是在给要规定成缺省参数的变量后面一个值 我们可以看到给add传参就会使用默认的数据。…