开发台组件功能实现扩展——按钮

LiePy

已于 2022-04-02 10:37:00 修改

阅读量489

点赞数

分类专栏： 53iq开发台文章标签： kotlin android java

于 2022-03-17 13:47:41 首次发布

本文链接：https://blog.csdn.net/LiePy/article/details/123543985

版权

53iq开发台专栏收录该内容

7 篇文章 0 订阅

订阅专栏

开发台组件功能实现扩展——按钮

一、监听状态
二、绑定功能——设定模式
三、绑定功能——其他
- - xml文件：
  - kt文件：

基于现有按钮的转换规则，增加以下内容

一、监听状态

操作示例

开发台新建按钮，配置监听状态为

此时开发台配置参数如下：

                    {
                        "events": {},
                        "iconName": "wk-icon-widget-btn",
                        "uuid": "Eo00yIIi4",
                        "isLock": false,
                        "areaState": false,
                        "ID": 0,
                        "component": "brick-button",
                        "style": {
                            "borderRadius": 0,
                            "rotate": 0,
                            "color": "#000000",
                            "height": 80,
                            "textValue": "按钮",
                            "fontSize": 14,
                            "top": 0,
                            "borderWidth": 0,
                            "backgroundStatus": false,
                            "borderColor": "#ffffff",
                            "textStatus": true,
                            "mouseDownColor": "#000000",
                            "mouseDownTextValue": "按钮",
                            "width": 80,
                            "borderStyle": "solid",
                            "left": 0,
                            "backgroundColor": ""
                        },
                        "control": {
                            "controlUsage": "ChangeScreen",
                            "actImgUrl": "",
                            "changeScreen": "",
                            "switchStyle": 1,
                            "controlBind": "",
                            "longpressDelay": 100,
                            "binding_fun": "",
                            "clickable": false,
                            "modelval": "",
                            "imgUrl": "",
                            "listener": "Light",	//监听状态：照明
                            "switchState": 0
                        },
                        "title": "按钮",
                        "name": ""
                    }

转换规则

xml文件：

保持现有规则，不变

kt文件：

在该页面的fragment.kt中，onViewCreated方法内，with(binding){ }代码段内，增加如下代码：

            //按钮：监听数据变化改变显示状态
            vm.lightLiveData.observe(this@MainFragment.viewLifecycleOwner) {
                widgetBtnR53vkhchq.isSelected = it == 1
            }

转换规则下图所示，结合注释文字：
在这里插入图片描述

二、绑定功能——设定模式

操作示例

如下，配置用户可点击为是，绑定功能为“设定模式”（SetModel），模式值输入“1”时

在这里插入图片描述

此时配置属性如下：

                        "control": {
                            "controlUsage": "ChangeScreen",
                            "actImgUrl": "",
                            "changeScreen": "",
                            "switchStyle": 1,
                            "controlBind": "",
                            "longpressDelay": 100,
                            "binding_fun": "SetModel",
                            "clickable": "true",
                            "modelval": "1",
                            "imgUrl": "",
                            "listener": "",
                            "switchState": 0
                        },

转换规则

xml文件：

同上不变

kt文件：

在该页面的fragment.kt中，onViewCreated方法内，with(binding){ }代码段内，增加如下代码：

            //按钮：绑定点击事件——绑定功能（设定模式）
            widgetBtnR53vkhchq.setOnClickListener {
                lifecycleScope.launch {
                    vm.dealEvent("SetModel", 1) // 1 是模式值——modelval的值
                }
            }

转换规则下图所示：
在这里插入图片描述

三、绑定功能——其他

xml文件：

同上不变

kt文件：

在该页面的fragment.kt中，onViewCreated方法内，with(binding){ }代码段内，增加如下代码：

            //按钮：绑定点击事件——绑定功能（其他）
            widgetBtnR53vkhchq.setOnClickListener {
                lifecycleScope.launch {
                    vm.dealEvent("StartWork")   //StartWork 是绑定功能——binding_fun的值
                }
            }