本项目Gitee仓地址：深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)

一、控件基本属性

在使用第一个控件前，我们需要了解一些控件都有哪些基础属性，比如说我们在Super Visual中使用过的长宽和字体大小等等，通用属性有以下这些：

通过这些可以对组件的大小，组件内，组件外以及联合边距的内容进行调整。

这里再引入一个强制位移（之后可能会多次用到）

二、标签控件

Text：官方文档

显示一段文本的组件。

在之前的拖拽式UI中我们已经使用过了该控件，通过修改Content属性即可达到修改文本内容的效果，他的其它属性太多了，这里可以看上面的官方文档。

如上图，eTs控件的基本调用方式是

interface TextInterface {
  (content?: string | Resource): TextAttribute;
}

即首先声明一下我们是使用的什么控件（标签、按钮、绘画等等），然后在下面通过点+内容的形式，对基本属性进行说明，如上对字体大小和背景颜色实现了说明。

其中content是显示的内容：

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;
}

其中显示内容主要由label控制

Button('学习ets')
          .height(60)
          .width(200)
          .fontSize(30)
          .backgroundColor('#aabbcc')

四、组合应用

本章节把Text和Button会结合起来，实现一个点击改变数字的Demo

此时按钮需要引入一个点击属性

事件

ClickEvent对象说明

在上面的程序中加入一个onclik()

        Button('学习ets')
          .height(60)
          .width(200)
          .fontSize(30)
          .backgroundColor('#aabbcc')
          .onClick(() => {
          })

此时如果想点下按钮，更改Text的显示内容，那么需要把Text的显示内容设置为一个变量

@State message: string = '点击我后改变内容'

这个需要放置在初始化的地方

此时把更改内容的程序加入到按键中，将Text的属性給到变量

        Text(this.message)
          .maxLines(2)
          .fontSize(30)
        Button('学习ets')
          .height(60)
          .width(200)
          .fontSize(30)
          .backgroundColor('#aabbcc')
          .onClick(() => {
            this.message = "已经改变了喔"
          })

在点击后对message的变量进行修改，进行测试

五、测试效果

如上方测试，已经实现了动态效果