按钮控件(Button)

Guition按钮控件是一种用于在用户界面中触发操作的关键组件。本节将介绍Guition按钮控件可设置的属性值以及如何使用JSON格式通过串口指令设置这些数据。

可设置的属性值说明：

id（控件ID）：唯一标识按钮控件的ID，用于在代码中引用该控件。
name（控件名称）：自定义的按钮名称，用于标识和查找控件。
prop（控件属性）：按钮的各种属性设置，包括：
- txt（文本内容）：按钮上显示的文本内容。
- color（文本颜色）：按钮上文本的颜色。
- bgcolor（背景颜色）：按钮的背景颜色。
- bgopa（背景透明度）：按钮背景的透明度，取值范围为0到255。
- opa（透明度）：按钮的透明度，取值范围为0到255。
- font（字体）：按钮上文本的字体设置。
- xcen（水平居中）：按钮上文本的水平对齐方式，0表示左对齐，1表示居中，2表示右对齐。
- x（X坐标）：按钮控件左上角的X坐标。
- y（Y坐标）：按钮控件左上角的Y坐标。
- w（宽度）：按钮控件的宽度。
- h（高度）：按钮控件的高度。
- rad（圆角半径）：按钮的圆角半径。
- vis（可见性）：按钮的可见性，1表示可见，0表示隐藏。
do（执行事件）：按钮控件执行的事件，比如点击事件。可以设置为执行特定的动作或事件。

通过串口指令设置按钮控件的示例：

{
    "id": "btn1",
    "name": "submit_button",
    "prop": {
        "txt": "Submit",
        "color": "#000000",
        "bgcolor": "#FFFFFF",
        "bgopa": 100,
        "opa": 255,
        "font": 1,
        "xcen": 1,
        "x": 100,
        "y": 200,
        "w": 100,
        "h": 50,
        "rad": 5,
        "vis": 1
    },
    "do": "click_submit"
}

在这个示例中，按钮控件的ID为 “btn1”，名称为 “submit_button”，文本内容为 “Submit”，背景颜色为白色，文本颜色为黑色，圆角半径为5，执行的事件是点击提交。按钮的可见性设置为可见（1）。

控件属性设置

设置控件ID
```
{
    "id": "button1"
}
```
- 说明： 控件ID用于唯一标识按钮控件，方便在代码中引用该控件。
设置控件名称
```
{
    "id": "button1",
    "name": "submit_button"
}
```
- 说明： 自定义的按钮名称，用于标识和查找控件，id优先级高于name。

设置文本内容

{
    "id": "button1",
    "prop": {
        "txt": "Submit"
    }
}

说明： 按钮上显示的文本内容。

设置文本颜色

{
    "id": "button1",
    "prop": {
        "color": "#000000"
    }
}

说明： 按钮上文本的颜色，采用十六进制表示。

设置背景颜色

{
    "id": "button1",
    "prop": {
        "bgcolor": "#FFFFFF"
    }
}

说明： 按钮的背景颜色，采用十六进制表示。

设置背景透明度
```
{
    "id": "button1",
    "prop": {
        "bgopa": 100
    }
}
```
- 说明： 按钮背景的透明度，取值范围为0（完全透明）到255（不透明）。
设置透明度
```
{
    "id": "button1",
    "prop": {
        "opa": 255
    }
}
```
- 说明： 按钮的透明度，取值范围为0（完全透明）到255（不透明）。
设置字体
```
{
    "id": "button1",
    "prop": {
        "font": 1
    }
}
```
- 说明： 按钮上文本的字体设置，0表示默认字体，1表示其他字体。
设置水平居中
```
{
    "id": "button1",
    "prop": {
        "xcen": 1
    }
}
```
- 说明： 按钮上文本的水平对齐方式，0表示左对齐，1表示居中，2表示右对齐。

设置X坐标

{
    "id": "button1",
    "prop": {
        "x": 100
    }
}

说明： 按钮控件左上角的X坐标。

设置Y坐标

{
    "id": "button1",
    "prop": {
        "y": 200
    }
}

说明： 按钮控件左上角的Y坐标。

设置宽度

{
    "id": "button1",
    "prop": {
        "w": 100
    }
}

说明： 按钮控件的宽度。

设置高度

{
    "id": "button1",
    "prop": {
        "h": 50
    }
}

说明： 按钮控件的高度。

设置圆角半径

jsonCopy code{
    "id": "button1",
    "prop": {
        "rad": 5
    }
}

说明： 按钮的圆角半径。

设置可见性

{
    "id": "button1",
    "prop": {
        "vis": 1
    }
}

说明： 按钮的可见性，1表示可见，0表示隐藏。

设置执行事件
```
{
    "id": "button1",
    "do": "click"
}
```
- 说明： 按钮控件执行的事件，比如点击事件。目前仅支持设置点击事件“click”。

设置多个属性的示例

{
    "id": "button1",
    "prop": {
        "txt": "Submit",
        "color": "#000000",
        "bgcolor": "#FFFFFF",
        "w": 100,
        "h": 50
    }
}

这个示例代码设置了按钮控件的部分属性，包括文本内容、文本颜色、背景颜色、宽度和高度。您可以根据实际需求选择性地设置按钮的属性值。