学习ArkTS -- 常用组件使用

学习ArkTS

  • 使用Deveco studio写ArkTS
  • Image: 图片显示组件
    • 1.声明Image组件并设置图片源
    • 2. 添加图片属性
  • Text: 文本显示组件
    • 1. 声明Text组件并设置文本内容
    • 2. 添加文本属性
  • TextInput:文本输入框
    • 1. 声明TextInput
    • 2. 添加属性和事件
  • Button 组件
    • 1. 声明Button组件,label是按钮文字:
    • 2. 添加属性和事件
  • Slider 滑动条组件
  • 页面布局
    • 线性布局组件
      • Column 容器 按列排序
      • Row 容器 按行排序
    • 常见布局属性
  • 渲染控制
    • ForEach 循环渲染
    • 使用if添加折扣信息
  • List
  • 自定义组件
    • 全局自定义构建函数
    • 自定义公共样式全局/局部都可以

使用Deveco studio写ArkTS

鸿蒙开发指南
新建一个ArkTs的项目一些默认代码的意思。

@Entry   // 装饰器: 用来装饰类结构,方法,变量  // 标记当前组件是入口组件
@Component // 标记自定义组件
struct Index { // 自定义组件: 可复用的UI单元@State message: string = 'Hello World' // 标记一个变量是一个状态变量,一旦变量变了,就会更改build() { // UI描述: 其内部以声明方式描述UI构建Row() {   // 内置组件:ArkUI提供的组件Column() {    // 容器组件:用来完成页面布局,例如Row,ColumnText(this.message)  // 基础组件,自带样式和功能的页面元素,例如Text.fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{    // 事件方法:设置组件的事件回调// 处理事件this.message = 'hello ArkTS!'}).fontColor('#36D')}.width('100%')  // 属性方法: 设置组件的UI样式}.height('100%')}
}

Image: 图片显示组件

1.声明Image组件并设置图片源

Image(src: string|PixelMap|Resource)
  1. string 格式,通常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNET
Image('https://xxx/org')
  1. PixelMap格式,可以加载像素图,常用在图片编辑中
Image(pixelMapObject)
  1. Resource格式,加载本地图片,
Image($r('app.media.xxx')) //加载目录media目录下的,项目工程目录下的文件夹
Image($rawfile('xxx.png')) //加载目录在rawfile目录下的

在这里插入图片描述

2. 添加图片属性

Image($r('app.media.icon')).width(100)	// 宽度.height(120)		// 高度.borderRadius(10)		//边框圆角.interpolation(IamgeInterpolation.High)	// 图片差值

Text: 文本显示组件

1. 声明Text组件并设置文本内容

Text(content?: string| Resource)
1. string格式,直接填写文本内容
Text('图片宽度')
2. Resource格式,读取本地资源文件
3. Text($r('app.string.width_label')) //写在string.json 用来实现国际化的

在这里插入图片描述

2. 添加文本属性

Text('注册账号').lineHeight(20)		//行高.fontSize(20)		// 字体大小.fontColor('#ff1876f8')		// 自己颜色.fontWeight(FontWeight.Medium) // 字体粗细

TextInput:文本输入框

1. 声明TextInput

TextInput({placeholder?: ResourceStr, Text?;ResourceStr})
placeholder:  输入框无输入时的提示文本
TextInput({placeholder:'请输入账号或者手机号'})
Text:输入框当前的文本内容
TextInput({text:'itcast'})

2. 添加属性和事件

TextInput({text:'当前输入的文本'}).width(150)		// 宽.height(30)		// 高.backgroundColor('#FFF')		// 背景色.type(InputType.Password)		// 输入框类型 .onChange(value=>{// value是用户输入的文本内容
})除了Password还有以下常用的类型名称						描述Normal 				基本输入模式,支持输入数字,字母,下划线,空格,特殊字符。Password			密码输入模式,支持输入数字,字母,下划线,空格,特殊字符。Email				邮箱地址输入模式,支持数字,字母,下划线,以及@字符。Number				纯数字输入模式。PhoneNumber			电话号码输入模式,支持输入数字,+ - # * 长度不限

Button 组件

1. 声明Button组件,label是按钮文字:

Button(label?: ResourceStr)
label:文字
1. 文字按钮Button('点我')
2. 自定义按钮,在button内嵌套其他组件Button(){Image($r('app.media.search')).width(20).margin(10)
}

2. 添加属性和事件

Button(‘点我’).width(100).height(30).type(ButtonType.Normal) // 按钮类型.onClick(() => {// 处理点击事件
})按钮类型:
名称					描述
Capsule			胶囊型按钮(圆角默认认为高度的一半)
Circle			圆形按钮
Normal			普通按钮(默认不带圆角)

Slider 滑动条组件

	silder(options?:SliderOptions)Slider({min: 0,		// 最小值max: 100,	// 最大值value: 30,	// 当前值step: 10,		// 滑动步长style: SliderStyle.OutSet,	direction: Axis.Horizontal,	// 水平方向reverse: false	// 是否反向滑动
})
.width('90%')
.showTips(true)	// 是否显示value百分比提示
.blockColor('#36D')
.onChange( value => {// value 就是当前滑块值
})

页面布局

在这里插入图片描述

属性方法			说明										参数
justifyContent	设置子元素在主轴方向的对齐格式			FlexAlign枚举
alignItems		设置子元素在交叉轴方向的对齐格式			Column容器使用HorizontalAlign枚举

线性布局组件

Column 容器 按列排序

Row 容器 按行排序

在这里插入图片描述

常见布局属性

在这里插入图片描述

@Entry   // 装饰器: 用来装饰类结构,方法,变量  // 标记当前组件是入口组件
@Component // 标记自定义组件
struct Index { // 自定义组件: 可复用的UI单元@State message: string = 'Hello World' // 标记一个变量是一个状态变量,一旦变量变了,就会更改@State ImageWidth: number = 130build() { // UI描述: 其内部以声明方式描述UI构建Row() {   // 内置组件:ArkUI提供的组件Column() {    // 容器组件:用来完成页面布局,例如Row,ColumnRow() // 里面可以设置 Row({space:20}) 设置space{Image($r('app.media.mate60')).width(this.ImageWidth).interpolation(ImageInterpolation.High)}.width('100%').height(400).justifyContent(FlexAlign.Center)Row(){Text($r('app.string.width_label')).fontSize(20).fontWeight(FontWeight.Bold)TextInput({text: this.ImageWidth.toFixed(0)}).width(150).backgroundColor('#FF').type(InputType.Number).onChange(value => {this.ImageWidth = parseInt(value)})}.width('100%').padding({left:14,right:14}) // Row的内边距.justifyContent(FlexAlign.SpaceBetween)Divider() // 加下划线.width('91%')Row(){Button('缩小').width(80).fontSize(20).onClick(() =>{if (this.ImageWidth >= 10) {this.ImageWidth = this.ImageWidth - 10}})Button('放大').width(80).fontSize(20).onClick(() => {if (this.ImageWidth < 300){this.ImageWidth += 10}})}.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:30,bottom:35}) // 外边距Row() {Slider({min: 100,max: 300,value: this.ImageWidth,step: 10}).width('90%').blockColor('#36D').trackThickness(10).showTips(true).onChange(value => {this.ImageWidth = value})}}.width('100%')  // 属性方法: 设置组件的UI样式}.height('100%')}
}

渲染控制

ForEach 循环渲染

在这里插入图片描述
在这里插入图片描述

例子:

class Item{name: stringimage: ResourceStrprice: Numberconstructor(name: string, image: ResourceStr, price: Number) {this.name = namethis.image = imagethis.price = price}
}@Entry
@Component
struct ItemPage {private items: Array<Item> =[new Item('华为mate60',$r('app.media.mate60'),6999),new Item('MateBookProX',$r('app.media.MateBookProX'),13999),new Item('WatchGT4',$r('app.media.WatchGT4'),1438),new Item('FreeBuds Pro3',$r('app.media.FreeBuds'),1499),new Item('Mate X5',$r('app.media.mateX5'),12999)]build(){Column({space: 8}) {Row() {Text('商品列表').fontSize(30).fontWeight(FontWeight.Bold)}.width('100%').margin({ bottom: 20 })ForEach(this.items,(item: Item) => {Row({ space: 10 }) {Image(item.image).width(100)Column({ space: 4 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('¥ ' + item.price).fontColor('#F36').fontSize(18)}.height('100%').alignItems(HorizontalAlign.Start)}.width('100%').height('100%').backgroundColor('#FFF').borderRadius(20).height(120).padding(10)})}.width('100%')}
}

在这里插入图片描述

在这里插入图片描述

使用if添加折扣信息

class Item{name: stringimage: ResourceStrprice: Numberdiscount: Numberconstructor(name: string, image: ResourceStr, price: Number, discount: Number = 0) {this.name = namethis.image = imagethis.price = pricethis.discount = discount}
}@Entry
@Component
struct ItemPage {private items: Array<Item> =[new Item('华为mate60',$r('app.media.mate60'),6999, 500),new Item('MateBookProX',$r('app.media.MateBookProX'),13999),new Item('WatchGT4',$r('app.media.WatchGT4'),1438),new Item('FreeBuds Pro3',$r('app.media.FreeBuds'),1499),new Item('Mate X5',$r('app.media.mateX5'),12999)]build(){Column({space: 8}) {Row() {Text('商品列表').fontSize(30).fontWeight(FontWeight.Bold)}.width('100%').margin({ bottom: 20 })ForEach(this.items,(item: Item) => {Row({ space: 10 }) {Image(item.image).width(100)if (item.discount){Column({ space: 4 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('原价: ¥ ' + item.price).fontColor('#CCC').fontSize(14).decoration({type:TextDecorationType.LineThrough})// @ts-ignoreText('折扣价: ¥ ' + (item.price - item.discount)).fontColor('#F36').fontSize(14)Text('补贴: ¥ ' +  item.discount).fontColor('#F36').fontSize(14)}.height('100%').alignItems(HorizontalAlign.Start)} else {Column({ space: 4 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('¥ ' + item.price).fontColor('#F36').fontSize(18)}.height('100%').alignItems(HorizontalAlign.Start)}}.width('100%').height('100%').backgroundColor('#FFF').borderRadius(20).height(120).padding(10)})}.width('100%')}
}

在这里插入图片描述

List

列表(List)是一种复杂容器,具有以下特点:
1. 列表项(ListItem)数量过多超过屏幕后,会自动提供滚动功能
2. 列表项(ListItem)既可以纵向排列,也可以横向排列

在这里插入图片描述

List({space: 10}){ForEach([1,2,3,4],item =>{ListItem(){// 列表项内容,只能包含一个根组件Text('ListItem')}	})
}
.width('100%')
.listDirection(Axis.Vertical)		// 列表方向,默认纵向(垂直)

自定义组件

@Component
struct Header{private title: ResourceStrbuild(){Row() {Text(this.title).fontSize(30).fontWeight(FontWeight.Bold)}.width('100%').height(30).margin({ bottom: 20 })}
}

这就是自定义组件

全局自定义构建函数

//全局的自定义构建函数
@Builder function ItemCard()
{// 函数内容
}局部的自定义构建函数需要把函数写到@Compont内,不需要写function

自定义公共样式全局/局部都可以

用法直接.fillScreen()

@Styles function fillScreen() // 只能用于公共样式
{.width('100%').height('100%').backgroundColor('#FFF').borderRadius(20).height(120).padding(10)}有些样式是某些组件特有的需要以下操作
@Extend(Text) function priceText()	 // 需要继承组件
{.fontColor('#F36).fontSize(18)
}

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

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

相关文章

Linux命令-dpkg-reconfigure命令(Debian Linux中重新配制一个已经安装的软件包)

说明 dpkg-reconfigure命令 是Debian Linux中重新配置已经安装过的软件包&#xff0c;可以将一个或者多个已 安装的软件包传递给此指令&#xff0c;它将询问软件初次安装后的配置问题。 当用户需要再次对软件包配置的时候&#xff0c;可以使用dpkg-reconfigure命令来对指定的软…

关于“使用java中的二维矩阵方法生成二维码“ 以及 “Java加载外部字体文件时出错的原因“

生成二维码 铁铁们,这两日写了一个导出二维码的接口,要求有一个是在二维码下方生成字体,现在奉上生成二维码的代码: controller层 Operation(summary "导出机构二维码",description "导出机构二维码")GetMapping("/orgCode")public void getO…

scipy beta分布与numpy clip的数值问题

[1] 用到混合 Beta 分布&#xff0c;估计参数的方法见 [2]。由 [3] 可见 Beta 分布在其参数 α , β \alpha,\beta α,β 在不同取值范围时存在几种形态&#xff1a; α , β < 0 \alpha,\beta < 0 α,β<0&#xff1a;不合法&#xff1b; α β 1 \alpha\beta1 α…

2024年华为OD机试真题-最大N个数与最小N个数的和-Java-OD统一考试(C卷)

题目描述: 给定一个数组,编写一个函数来计算它的最大N个数与最小N个数的和。你需要对数组进行去重。 说明: 数组中数字范围[0, 1000] 最大N个数与最小N个数不能有重叠,如有重叠,输入非法返回-1 输入非法返回-1 输入描述: 第一行输入M, M标识数组大小\n第二行输入M个数,标…

Java-Doc

Java-Doc javdoc命令是用来生成自己的API文档的 参数信息&#xff1a;author作者名version版本号since知名需要最早使用的jdk版本param参数名return返回值情况throws异常抛出情况 1.参数信息的使用&#xff1a; 未完待续... ...

PHP 图片裁剪类封装

PHP工具类 图片裁剪类封装 <?php namespace App\Utils;/*** 图片裁剪工具类* author 田小涛* date 2020年7月23日* comment**/ class ImageCropUtils {private $sImage;private $dImage;private $src_file;private $dst_file;private $src_width;private $src_height;priv…

2024山东大健康展会,济南生物医药展,中国医疗健康展

——中国&#xff08;济南&#xff09;国际大健康产业博览会China&#xff08;Jinan&#xff09;International Big Health Industry Expo&#xff08;China-DJK山东健博会&#xff09;&#xff0c;聚焦企业招商和宣传的定位&#xff0c;立足于济南新旧动能转换起步区&#xff…

HashMap部分底层源码解析

哈希表的物理结构 HashMap底层都是哈希表&#xff08;也称散列表&#xff09;&#xff0c;线程不安全&#xff0c;其中维护了一个长度为2的幂次方的Entry类型的数组table&#xff0c;数组的每一个索引位置被称为一个桶(bucket)&#xff0c;你添加的映射关系(key,value)最终都被…

腾讯云向量数据库-RAG介绍

1.说明 RAG结合LLM(通用大预言模型)构件基于私有文档、专业领域知识、实时信息的charbot。 2.RAG的主要步骤 知识切片成chunk向量化chunk入库query检索知识chunk构件prompts调用llm生成回答 3.优势 快速构件demo快速理解rag社区支持 4.痛点 投入大效果差调优难 5.RAG应…

结合SOCKS5代理、代理IP与网络安全促进跨界电商和游戏产业发展

一、引言 在全球化的大背景下&#xff0c;数字技术的应用已成为企业出海战略的重要组成部分。尤其是在跨界电商和游戏行业&#xff0c;通过有效利用SOCKS5代理、代理IP和网络安全技术&#xff0c;不仅可以突破地域限制&#xff0c;还能保障数据的安全和用户的隐私。本文旨在探讨…

一、flask入门和视图

run启动参数 模板渲染 后端给前端页面传参 前端页面设置css from flask import Flask, render_template,jsonify# 创建flask对象 app = Flask(__name__)# 视图函数 + 路由route @app.route("/") def hello_world():# 响应,返回给前端的数据return "hello worl…

多 线 程

1&#xff0e;什么是多线程? 有了多线程&#xff0c;我们就可以让程序同时做多件事情 2.多线程的作用? 提高效率 3&#xff0e;多线程的应用场景? 只要你想让多个事情同时运行就需要用到多线程 比如:软件中的耗时操作、所有的聊天软件、所有的服务器 1.进程和线程【理解】 …

Day36|贪心算法part05:435. 无重叠区间、763.划分字母区间、56. 合并区间

435. 无重叠区间 有了上题射气球的因子&#xff0c;这题也就有思路了&#xff0c;反正无脑排序就行了&#xff1a; 首先将所有区间按照end的大小从小到大排序&#xff1b;选取最早end为起始x_end遍历所有区间&#xff0c;如果该区间的start比end大&#xff08;可重叠&#xf…

活动预告|如何构建云原生现代化数据栈?北京首场 Meetup 来啦!

数字化时代带来了海量的数据涌现&#xff0c;传统的数据架构已然无法满足现代企业的需求&#xff0c;现代化数据栈应运而生。基于云原生的现代化数据栈具备了多云兼容的特性&#xff0c;在不同的云环境下能够保持高性能运作&#xff0c;使企业得以无缝地处理和分析海量的数据集…

vue 不同环境打包指令的配置(vue-cli2、vue-cli3、vite)

一个项目可能会有开发版本、上线版本、测试版本等等多个版本&#xff0c;不同的环境会有不同请求api接口&#xff0c;就需更改一些基本配置&#xff0c;这时候为不同环境配置不同的打包指令就很必要。 一、vue-cli2 1、安装 cross-env&#xff0c;它可以处理 windows 和其他 …

C语言题目:阶乘数列求和(函数)

题目描述 输入一个正数x和一个正整数n&#xff0c;求下列算式的值。要求定义两个调用函数&#xff1a;fact(n)计算n的阶乘&#xff1b;mypow(x,n)计算x的n次幂&#xff08;即xn&#xff09;&#xff0c;两个函数的返回值类型是double。 x - x2/2! x3/3! ... (-1)n-1xn/n! …

利用SARscape对日本填海造陆和天然气开采进行地表形变监测

日本千叶市&#xff0c;是日本南部重要的工业港市。位于西部的浦安市是一个典型的"填海造田"城市&#xff0c;东南部的东金区有一片天然气开采区域&#xff0c;本文利用SARscape&#xff0c;用干涉叠加的方法&#xff0c;即PS和SBAS&#xff0c;对这两个区域进行地表…

倒计时4天!百度Create AI开发者大会“大模型与深度学习技术”论坛亮点抢鲜看!

作为人工智能的核心基础技术&#xff0c;深度学习具有很强的通用性&#xff0c;大模型技术在深度学习的基础上&#xff0c;通过构建更加庞大神经网络模型和应用transformer等更加领先的算法&#xff0c;使模型的处理能力产生质的飞跃。飞桨&#xff08;PaddlePaddle&#xff09…

MySQL分区表(14/16)

分区表 基本概述 分区表是数据库中一种用于优化大型表数据管理和查询性能的技术。它将一个表的数据根据特定的规则或条件分割成多个部分&#xff0c;每个部分称为一个分区。每个分区可以独立于其他分区进行存储、管理和查询&#xff0c;这样可以提高数据处理的效率&#xff0…

VS Code中“@“符号如何自动补全导入路径

一、下载 Path Intellisense 插件 二、打开设置&#xff0c;在扩展中选择该插件&#xff0c;点击setting.json 三、添加配置&#xff1a; "":"${workspaceRoot}/src" 如图&#xff1a; 四、在项目src目录中新建jsconfig.json文件 &#xff08;一定要是src目…