第三讲_ArkTS的初识

news2024/12/23 5:01:39

ArkTS的初识

  • 1. ArkTS的基本组成
  • 2. ArkTS自定义组件

1. ArkTS的基本组成

在这里插入图片描述

  • 装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。
  • 自定义组件:可复用的UI单元,可组合其他组件,图示中@Component装饰的struct Hello就是一个自定义组件。
  • UI描述:以声明式的方式来描述UI的结构,图示中build()方法中的代码块。
  • 系统组件:ArkUI框架中内置的容器组件和基础组件,开发者可直接使用。图示中的ColumnTextDividerButton都是系统组件。
  • 属性方法:组件可以通过链式调用配置多项属性,图示中的fontSize()width()height()等。
  • 事件方法:组件可以通过链式调用设置多个事件的响应逻辑,图示中Button后面的onClick()就是给按钮设置点击事件。

2. ArkTS自定义组件

  1. 打开DevEco Studio新建一个ets文件,ArkTS File 的后缀名就是ets

在这里插入图片描述

  1. 编写自定义组件
    一个组件的基本结构:
    • @Component标记为一个组件
    • struct 定义组件结构
    • FirstComponent组件名
    • build():描绘组件UI
@Component
struct FirstComponent {
  build() {

  }
}
  1. 描绘组件UI
    添加一个系统组件Text(),它用来显示文本的,然后给文本字体设置大小。
@Component
struct FirstComponent {
  build() {
    Text("我是第一个组件")
      .fontSize(30)
  }
}
  1. 预览组件
    在DevEco Studio的Previewer中,只能预览被@Entry修饰的组件。所以这里先给组件加上@Entry修饰符,然后点开Previewer页签,进行组件的效果预览。
@Entry
@Component
struct FirstComponent {
  build() {
    Text("我是第一个组件")
      .fontSize(30)
  }
}

在这里插入图片描述

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

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

相关文章

gitgud.io+Sapphire注册账号教程

gitgud.io是一个仓库,地址 https://gitgud.io/,点进去之后会看到注册页面。 意思是需要通过注册这个Sapphire账户来登录。点击右边的Sapphire,就跳转到Sapphire的登陆页面,点击创建新账号,就进入注册页面。&#xff0…

阿里云地域和可用区分布表,2024更新

2024年阿里云服务器地域分布表,地域指数据中心所在的地理区域,通常按照数据中心所在的城市划分,例如华北2(北京)地域表示数据中心所在的城市是北京。阿里云地域分为四部分即中国、亚太其他国家、欧洲与美洲和中东&…

【.NET Core】 多线程之(Thread)详解

【.NET Core】 多线程之(Thread)详解 文章目录 【.NET Core】 多线程之(Thread)详解一、概述二、线程的创建和使用2.1 ThreadStart用于无返回值,无参数的方法2.2 ParameterizedThreadStart:用于带参数的方法 三、线程的…

【Redis】Redis基础

Redis基础 初识Redis 认识NoSQL SQL:结构化查询语言 > 关系型数据库 NoSQL:非关系型数据库 SQL与NoSQL的差异: 数据结构 SQL结构化:表的信息依赖于表的结构NoSQL非结构化:存储的信息为KV形式 数据关联 SQL关联…

OpenCV-Python(47):支持向量机

原理 线性数据分割 如下图所示,其中含有两类数据,红的和蓝的。如果是使用kNN算法,对于一个测试数据我们要测量它到每一个样本的距离,从而根据最近的邻居分类。测量所有的距离需要足够的时间,并且需要大量的内存存储训…

最新ChatGPT/GPT4科研应用与AI绘图及论文高效写作

详情点击链接:最新ChatGPT/GPT4科研应用与AI绘图及论文高效写作 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析,AI画图,图像识别,文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Clau…

给零基础朋友的编程课11 - 代码

给零基础朋友的编程课11 上 - 布尔值、判断式、while循环_哔哩哔哩_bilibili 给零基础朋友的编程课11 中 - 算术运算符、间隔与索引_哔哩哔哩_bilibili 给零基础朋友的编程课11 下 - 一点透视、比例、仿制品VI的讲解_哔哩哔哩_bilibili 源代码: // // 仿制品VI…

Java JVM 堆、栈、方法区详解

目录 1. 栈 2. 堆 3. 方法区 4. 本地方法栈 5. 程序计数器 首先来看一下JVM运行时数据区有哪些。 1. 栈 在介绍JVM栈之前,先了解一下 栈帧 概念。 栈帧:一个栈帧随着一个方法的调用开始而创建,这个方法调用完成而销毁。栈帧内存放者方…

MetaGPT-打卡-day2,MetaGPT框架组件学习

文章目录 Agent组件实现一个单动作的Agent实现一个多动作的Agent技术文档生成助手其他尝试 今天是第二天的打卡~昨天是关于一些概念的大杂烩,今天的话,就来到了Hello World环节。 从单个Agnet到多个Agent,再到组合更复杂的工作流来解决问题。…

Dubbo-admin监控中心

监控中心 Dubbo-admin监控中心执行操作启动provider和consumer项目进行测试总体流程 Dubbo-admin监控中心 dubbo-admin下载路径 git clone https://github.com/apache/dubbo-admin.git图1-1 dubbo-admin项目文件展示 执行操作 # 启动zookeeper# 前端 cd dubbo-admin-ui npm i…

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05-5+6

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05-56 5. An Example 2D例子6. Extended Kalman Filter扩展卡尔曼滤波器(EKF) 5. An Example 2D例子 6. Extended Kalman Filter扩展卡尔曼…

#vue3 实现前端下载excel文件模板功能

一、需求: 前端无需通过后端接口,即可实现模板下载功能。 通过构造一个 JSON 对象,使用前端常用的第三方库 xlsx,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板 二、效果: 三、源码如下&…

基于网络爬虫的微博热点分析,包括文本分析和主题分析

基于Python的网络爬虫的微博热点分析是一项技术上具有挑战性的任务。我们使用requests库来获取微博热点数据,并使用pandas对数据进行处理和分析。为了更好地理解微博热点话题,我们采用LDA主题分析方法,结合jieba分词工具将文本分割成有意义的…

如何发挥 Sketch在UI和UX设计中的作用

Sketch是一款专业的矢量图形设计软件,主要应用于UI设计、移动应用设计、Web设计等领域。假如你是一个交互设计师或UI设计师,那么你一定知道Sketch这一强大的矢量设计软件;如果你使用了Photoshop,那么在你接触到Sketch之后&#xf…

算法题-爬楼梯-不同思路解法

主要记录个人思考过程,不同方案实现思路的演变 题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 示例 1: 输入:n 2 输出:2 解释:…

IT大侦“碳”:Concept Luna向循环设计持续演进

IT大侦“碳”:Concept Luna向循环设计持续演进

【Docker】Docker镜像结构及自定义镜像,镜像上传仓库使用

一、引言 Docker镜像是一个只读的Docker容器模板,含有启动Docker容器所需的文件系统结构及其内容,因此是启动一个Docker容器的基础。镜像的结构原理图大致分为四层:共享的内核层、基础镜像层、定制镜像层、可写容器层。 共享的内核层&#xf…

【漏洞攻击之文件上传条件竞争】

漏洞攻击之文件上传条件竞争 wzsc_文件上传漏洞现象与分析思路编写攻击脚本和重放措施中国蚁剑拿flag wzsc_文件上传 漏洞现象与分析 只有一个upload前端标签元素,并且上传任意文件都会跳转到upload.php页面,判定是一个apache容器,开始扫描…

龙年-微信定制红包封面,送一波

龙年新年马上就要来临了,我定制两款红包封面,送给大家。这次是借助AI的能力,自己独立完成,这大概就是这波AI浪潮的魅力,人人皆可参与。 另外,微信平台也给我推送了自己的公众号创作回顾,没想到居…

Failed at the node sass@4.14.1 postinstall script.

首先,查看node和 npm版本 #用于列出已安装的 Node.js 版本。 nvm ls #切换node版本 nvm use 12.17.0 #换国内镜像源:(单独设置sass的安装源。) npm config set sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass …