OpenHarmony#深入浅出学习eTs#(六)编写eTs第一个控件
本项目Gitee仓地址:深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)
一、控件基本属性
在使用第一个控件前,我们需要了解一些控件都有哪些基础属性,比如说我们在Super Visual中使用过的长宽和字体大小等等,通用属性有以下这些:
名称 | 参数说明 | 默认值 | 描述 |
---|---|---|---|
width | Length | - | 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。 |
height | Length | - | 设置组件自身的高度,缺省时使用元素自身内容需要的高度。 |
size | { width?: Length, height?: Length } | - | 设置高宽尺寸。 |
padding | { top?: Length, right?: Length, bottom?: Length, left?: Length } | Length | 0 | 设置内边距属性。 参数为Length类型时,四个方向内边距同时生效。 |
margin | { top?: Length, right?: Length, bottom?: Length, left?: Length } | Length | 0 | 设置外边距属性。 参数为Length类型时,四个方向外边距同时生效。 |
constraintSize | { minWidth?: Length, maxWidth?: Length, minHeight?: Length, maxHeight?: Length } | { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity } | 设置约束尺寸,组件布局时,进行尺寸范围限制。 |
layoutWeight | number | 0 | 容器尺寸确定时,元素与兄弟节点主轴布局尺寸按照权重进行分配,忽略本身尺寸设置。 > 说明: > 仅在Row/Column/Flex布局中生效。 |
通过这些可以对组件的大小,组件内,组件外以及联合边距的内容进行调整。
这里再引入一个强制位移(之后可能会多次用到)
名称 | 参数类型 | 默认值 | 描述 |
---|---|---|---|
align | Alignment | Center | 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。 |
direction | Direction | Auto | 设置元素水平方向的布局,可选值参照Direction枚举说明。 |
position | { x: Length, y: Length } | - | 使用绝对定位,设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
markAnchor | { x: Length, y: Length } | { x: 0, y: 0 } | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。 |
offset | { x: Length, y: Length } | { x: 0, y: 0 } | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。 |
二、标签控件
Text:官方文档
在之前的拖拽式UI中我们已经使用过了该控件,通过修改Content属性即可达到修改文本内容的效果,他的其它属性太多了,这里可以看上面的官方文档。
interface TextInterface {(content?: string | Resource): TextAttribute;
}
即首先声明一下我们是使用的什么控件(标签、按钮、绘画等等),然后在下面通过点+内容的形式,对基本属性进行说明,如上对字体大小和背景颜色实现了说明。
Text("Hello, eTs")Text('Hello, LalHan').width('100%').textAlign(TextAlign.Center)Text('大家一起深入浅出学习eTs,记得关注我').maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis})
三、按钮控件
Button:官方文档
interface ButtonInterface {(): ButtonAttribute;(options: ButtonOptions): ButtonAttribute;(label: ResourceStr, options?: ButtonOptions): ButtonAttribute;
}
Button('学习ets').height(60).width(200).fontSize(30).backgroundColor('#aabbcc')
四、组合应用
本章节把Text和Button会结合起来,实现一个点击改变数字的Demo
此时按钮需要引入一个点击属性
事件
名称 | 支持冒泡 | 功能描述 |
---|---|---|
onClick(callback: (event?: ClickEvent) => void) | 否 | 点击动作触发该方法调用,event参数见ClickEvent介绍。 |
ClickEvent对象说明
属性名称 | 类型 | 描述 |
---|---|---|
screenX | number | 点击点相对于设备屏幕左边沿的X坐标。 |
screenY | number | 点击点相对于设备屏幕上边沿的Y坐标。 |
x | number | 点击点相对于被点击元素左边沿的X坐标。 |
y | number | 点击点相对于被点击元素上边沿的Y坐标。 |
target8+ | EventTarget | 被点击元素对象。 |
timestamp | number | 事件时间戳。 |
在上面的程序中加入一个onclik()
Button('学习ets').height(60).width(200).fontSize(30).backgroundColor('#aabbcc').onClick(() => {})
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
复制
此时如果想点下按钮,更改Text的显示内容,那么需要把Text的显示内容设置为一个变量
@State message: string = '点击我后改变内容'
- 1.
复制
这个需要放置在初始化的地方
此时把更改内容的程序加入到按键中,将Text的属性給到变量
Text(this.message).maxLines(2).fontSize(30)Button('学习ets').height(60).width(200).fontSize(30).backgroundColor('#aabbcc').onClick(() => {this.message = "已经改变了喔"})
复制
在点击后对message的变量进行修改,进行测试
五、测试效果
如上方测试,已经实现了动态效果
OpenHarmony#深入浅出学习eTs#(六)编写eTs第一个控件相关推荐
- LabView学习笔记(三):基本控件
Labview学习笔记: LabView学习笔记(一):基础介绍 LabView学习笔记(二):滤波器实验 LabView学习笔记(三):基本控件 LabView学习笔记(四):动态数据类型 LabV ...
- c# AE GIS二次开发学习专题(二) 基本地图控件使用
GIS二次开发学习专题(二) 基本地图控件使用 学习资料来自<牟乃夏 AE开发教程-基于C#.NET> 发的代码是我整理+老师布置的作业 这一部分是地图基本控件的使用与编写,包括: 一.二 ...
- 学习笔记:VB.net动态添加控件数组并传递事件
学习笔记:VB.net动态添加控件数组并传递事件 控件数组和事件 "中间人" 动态添加控件 控件数组和事件 新建一个用户窗体,在定义控件数组时,不能用Withevnets来定义数组 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- ArcGIS Server9.2学习开发(4)——使用Toc控件
在<ArcGIS Server9.2学习开发(3)--使用Map控件>中讲解了有关ArcGIS Server9.2为我们提供的Map控件的基本用法,然而仅仅只有Map控件是远远不够的,还需 ...
- 基于GDI+用C#编写的.NET流程图控件开发周记(2011-08-05)
花了差不多一个月的业余时间,新编写了一个流程图控件(用于.NET和C#),这个控件现在终于有了一个原型.控件可以用在主界面的导航画面,也可以代替Visio来绘制流程图,最重要的是可以用于日后的工作流功 ...
- OpenHarmony#深入浅出学习eTs#(五)eTs语言初识
本项目Gitee仓地址:深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com) 一.eTs介绍 概述 基于TS扩展的声明式开发范式的方舟开发框架是一套开发极简.高性能.跨设备应用的UI ...
- Blend学习(2) 从对象创建控件
Blend可通过工具栏拖拽自身带的很多控件,并且这些控件都有自身默认的样式,我们在设计的过程中使用这些控件:同时我们可以利用现有对象生成新的控件.下面我们就来学习一下从对象创建控件. 首先新建一个新的 ...
- 十六、C# 表格数据控件
初始DataGridView DataGridView控件提供了一种强大而灵活的以表格形式显示数据的方式.用户可以使用DataGridView控件来显示少量数据的只读视图,也可以对齐进行缩放以显示特大 ...
最新文章
- torch.mean
- JZOJ 5709. 【北大夏令营2018模拟5.13】数列
- 北大核刊最新版2020_爱尔兰地图(2020版)
- 7种 Java 设计模式,你会几种?
- C#常见编码方式总结
- 《C++高级编程(第3版)》
- git学习资料及心得
- 【Python-3.5】变量命名规范
- QT发布windows程序
- xml突然变成空白_真实职场故事:开会时候,被领导突然提问,我差点被开除了...
- Oracle(7)——Oracle修改国家字符集
- bom树形结构 表设计_按树型显示BOM的结构
- linux resin目录,Linux下resin的安装以及配置:
- 服务器系统盘怎么分区,服务器系统盘分区
- ANSYS预紧力螺栓连接结构(一HyperMesh添加接触单元)
- mysql高并发和大流量_高并发-高并发和大流量解决方案
- 注册国外邮箱须知(ZIP CODE)
- vxWorks系统ps2键盘,tty设备,vga设备的联系
- jq onclick 定义_jquery onclick函数未定义(jquery onclick function not defined)
- 哪款蓝牙耳机的音质好?盘点四款高颜值蓝牙耳机