### 按钮控件(Button)

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

**可设置的属性值说明：**

1.  **id（控件ID）**：唯一标识按钮控件的ID，用于在代码中引用该控件。
2.  **name（控件名称）**：自定义的按钮名称，用于标识和查找控件。
3.  **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表示隐藏。
4.  **do（执行事件）**：按钮控件执行的事件，比如点击事件。可以设置为执行特定的动作或事件。

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

```json
{
    "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）。

#### **控件属性设置**

1.  **设置控件ID**

    ```json
    {
        "id": "button1"
    }

    ```

    *   **说明：** 控件ID用于唯一标识按钮控件，方便在代码中引用该控件。

2.  **设置控件名称**

    ```json
    {
        "id": "button1",
        "name": "submit_button"
    }

    ```

    *   **说明：** 自定义的按钮名称，用于标识和查找控件，id优先级高于name。

3.  **设置文本内容**

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

    ```

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

4.  **设置文本颜色**

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

    ```

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

5.  **设置背景颜色**

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

    ```

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

6.  **设置背景透明度**

    ```json
    {
        "id": "button1",
        "prop": {
            "bgopa": 100
        }
    }

    ```

    *   **说明：** 按钮背景的透明度，取值范围为0（完全透明）到255（不透明）。

7.  **设置透明度**

    ```json
    {
        "id": "button1",
        "prop": {
            "opa": 255
        }
    }

    ```

    *   **说明：** 按钮的透明度，取值范围为0（完全透明）到255（不透明）。

8.  **设置字体**

    ```json
    {
        "id": "button1",
        "prop": {
            "font": 1
        }
    }

    ```

    *   **说明：** 按钮上文本的字体设置，0表示默认字体，1表示其他字体。

9.  **设置水平居中**

    ```json
    {
        "id": "button1",
        "prop": {
            "xcen": 1
        }
    }

    ```

    *   **说明：** 按钮上文本的水平对齐方式，0表示左对齐，1表示居中，2表示右对齐。

10. **设置X坐标**

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

    ```

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

11. **设置Y坐标**

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

    ```

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

12. **设置宽度**

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

    ```

    *   **说明：** 按钮控件的宽度。

13. **设置高度**

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

    ```

    *   **说明：** 按钮控件的高度。

14. **设置圆角半径**

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

    ```

    *   **说明：** 按钮的圆角半径。

15. **设置可见性**

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

    ```

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

16. **设置执行事件**

    ```json
    {
        "id": "button1",
        "do": "click"
    }

    ```

    *   **说明：** 按钮控件执行的事件，比如点击事件。**目前仅支持设置点击事件“click”。**

#### **设置多个属性的示例**

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

```

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