自定义组件

介绍

自定义组件(Prefab)，是指使用文本 精灵 矩形 动画等基石组件搭配产生的个性化组件模板。

  • 自定义组件可以在窗口的组件配置项中直接创建,也可以独立脚本并在App.lua扩展组件中引入。
  • 下面的例子实现了一个叫 文本按钮类型的组件。并且在控件中创建了2个实例。
local 窗口配置 = {
	类型 = "窗口",
	名称 = "我的组件",
	标题 = "我的组件",
	x = 100,
	y = 100,
	宽度 = 300,
	高度 = 200,
	置顶 = false,
	可移动 = true,
	可穿透 = false,
	默认可视 = true,
	开关动效 = {开=1,关=1},
	资源表 = {},
	组件 = {
		{
			类型 = "组件",
			名称 = "文本按钮",
			宽度 = 48,
			高度 = 24,
			背景色 = RGBA(30,30,30,255),
			边框宽度 = 1,
			边框色 = RGBA(168,168,168,255),
			圆角半径 = 4,
			圆角边数 = 8,
			鼠标事件 = true, 
			节点 = {
				{
					名称 = "按钮标签",
					类型 = "文本",
					默认可视 = true,
					水平对齐 = 1,
					垂直对齐 = 1,
					字体 = "宋体12",
					标题 = "",
					文本色 = RGBA(240,240,240,255),
					描边色 = RGBA(0,0,0,200),
					鼠标事件 = false, 
				},
			},
			
			属性 = {
				标题 = function(组件对象,value)	 -- 当组件调用 .标题 修改属性时候触发 
					组件对象.取出节点("按钮标签").标题 = value
				end,

				宽度 = function(组件对象,value)	 -- 当组件调用 .宽度 修改属性时候触发 
					组件对象.取出节点("按钮标签").宽度 = value
				end,

				高度 = function(组件对象,value)	 -- 当组件调用 .高度 修改属性时候触发
					组件对象.取出节点("按钮标签").高度 = value
				end,
			},

			方法 = {
				变形金刚 = function (组件对象,x,y,text)
					组件对象.x = x
					组件对象.y = y
					组件对象.宽度 = 64
					组件对象.高度 = 64
					组件对象.标题 = text
				end
			},

			系统事件 = {
				--============================================================
				创建 = function (组件对象)

					调试输出(组件对象.标题)

				end,
				--============================================================
				焦点变化 = function (组件对象,本次焦点,上次焦点)

					local 按钮标签 = 组件对象.取出节点("按钮标签")
					按钮标签.文本色 = 本次焦点 and RGBA(0,240,0,255) or RGBA(240,240,240,255)

				end,
				--============================================================
				鼠标按下 = function(组件对象,焦点对象)

					local 按钮标签 = 组件对象.取出节点("按钮标签")
					按钮标签.文本色 = RGBA(80,80,80,255)
					组件对象.加入事件("点击")

					return true
				end,
				--============================================================
				鼠标弹起 = function(组件对象,本次焦点,上次焦点)

					local 按钮标签 = 组件对象.取出节点("按钮标签")
					按钮标签.文本色 = 本次焦点 and RGBA(0,240,0,255) or RGBA(240,240,240,255)

					return true
				end
			},

		}
	},
	控件 = 
	{

		{
			名称 = "文本按钮1",
			类型 = "文本按钮",
			x = 40,
			y = 60,
			宽度 = 80,
			高度 = 24,
			标题 = "我的按钮",
			系统事件 = {
				点击 = function (组件对象)
					调试输出(组件对象.标题 .. " 被点击了")
				end
			}
		},
		{
			名称 = "文本按钮2",
			类型 = "文本按钮",
			x = 40,
			y = 100,
			宽度 = 120,
			高度 = 32,
			标题 = "云南玉昆",
			系统事件 = {
				点击 = function (组件对象)
	
					组件对象.父窗口.文本按钮1.变形金刚(0,0,"白菜")

					调试输出(组件对象.标题 .. " 被点击了")

				end
			}
		},

	}

}


return 窗口配置

配置项

名称类型必填说明
类型 文本true固定值：组件 表示这是一个扩展组件
名称 文本true全局唯一的组件类型名称
宽度 整数true默认宽度
高度 整数true默认高度
锚点x 小数false
锚点y 小数false
背景色 RGBAfalse
边框宽度 整数false
边框色 RGBAfalse默认：0
圆角半径 整数false
圆角边数 整数false
水平缩放 小数false
垂直缩放 小数false
次序 整数false数值越大越先显示
角度 整数false
透明度 小数false范围：0-1
底图 文本false背景图片标识
九宫 tablefalse底图使用的九宫配置 {左,上,右,下}
资源表 tablefalse{ {标识="",文件=""}, {标识="",文件=""}, }
节点 tablefalse节点数组
属性 tablefalse开放属性表
方法 tablefalse开放方法表
鼠标事件 逻辑false是否接收鼠标事件
系统事件 tablefalse

节点

一个组件包含多个子组件(节点)，通过节点搭配出自定义效果。

节点类型说明
文本显示文字
精灵显示图片
节点 = {
    {
        名称 = "关卡头像",
        类型 = "精灵",
        默认可视 = true,
        x = 17,
        y = 17,
        锚点x = 0.5,
        锚点y = 0.5,
        水平缩放 = 0.5,
        垂直缩放 = 0.5,
        颜色 = RGBA(255,255,255,255),
        图片 = "_关卡项目_头像_1",
        九宫 = nil,
        鼠标事件 = true, -- 是否接收鼠标事件
        
    },

    {
        名称 = "关卡名称",
        类型 = "文本",
        默认可视 = true,
        x = 39,
        y = 9,
        宽度 = 76,
        高度 = 16,
        水平对齐 = 0,
        垂直对齐 = 1,
        字体 = "宋体12",
        标题 = "稻草人",
        文本色 = RGBA(240,240,240,255),
        描边色 = RGBA(0,0,0,200),
        鼠标事件 = true, -- 是否接收鼠标事件
    },
}

属性

为组件设计属性 接口，当属性被修改时触发。

名称类型说明
属性名文本
触发函数function{组件对象,属性值}
属性 = {
    标题 = function(组件对象,value)	-- 当组件调用 .标题 修改属性时候触发 
        组件对象.取出节点("按钮标签").标题 = value
    end,
},

方法

为组件设计方法 接口，当方法被调用时触发。

名称类型说明
方法名文本
触发函数function{组件对象,属性值}
方法 = {
    变形金刚 = function(组件对象,...)	-- 当组件调用 .变形金刚() 时触发
        调试输出(...)
    end,
},

系统事件

提示

由自定义类型组件产生的实例默认不会触发任何事件，设计者根据需要通过加入事件往组件对象发送事件，通知使用者。

系统事件 = {
    创建 = function (组件对象)
        组件对象.加入事件("创建") -- 发送到实例的系统事件里
    end,
}

🔹 创建

组件对象创建时触发

回调参数类型说明描述
组件对象 组件对象

示例

系统事件 = {
    创建 = function (组件对象)
        调试输出(组件对象.类型,组件对象.名称)
    end,
}

🔹 更新

组件对象每帧触发

回调参数类型说明描述
组件对象 组件对象
dt 数值上一帧消耗时间

示例

系统事件 = {
	更新 = function (组件对象,dt)
       
    end,
}

🔹 鼠标按下

  • 鼠标按下时触发，需要启用鼠标事件。
  • 返回 true 可以阻止事件的继续传递。
回调参数类型说明描述
组件对象 组件对象
焦点对象 组件对象 当前的鼠标焦点组件
键值 整数 0：左键 1：右键 2：中键。

示例

系统事件 = {
    鼠标按下 = function(组件对象,焦点对象,键值)
        调试输出(焦点对象.类型,焦点对象.名称)
        return true
    end,
}

🔹 鼠标弹起

  • 鼠标弹起时触发，需要启用鼠标事件。
  • 返回 true 可以阻止事件的继续传递。
回调参数类型说明描述
组件对象 组件对象
本次焦点 组件对象 当前鼠标焦点组件
上次焦点 组件对象 上次鼠标焦点组件
键值 整数 0：左键 1：右键 2：中键。

示例

系统事件 = {
    鼠标弹起 = function(组件对象,本次焦点,上次焦点,键值)
        if (本次焦点 ~= nil and 本次焦点 == 上次焦点) then
            调试输出("一次有效的鼠标点击",本次焦点.名称)
        end
    end,
}

🔹 鼠标移动

  • 鼠标在组件上移动时触发，需要启用鼠标事件。
  • 返回 true 可以阻止事件的继续传递。
回调参数类型说明描述
组件对象 组件对象
焦点对象 组件对象 当前鼠标焦点组件

示例

系统事件 = {
    鼠标移动 = function(组件对象,焦点对象)
        调试输出("鼠标移动",焦点对象.名称,焦点对象.鼠标坐标.x,焦点对象.鼠标坐标.y)
    end,
}

🔹 焦点变化

  • 鼠标在组件上发生子节点焦点变化时触发，需要启用鼠标事件。
回调参数类型说明描述
组件对象 组件对象
本次焦点 组件对象 当前鼠标焦点组件
上次焦点 组件对象 上次鼠标焦点组件

示例

系统事件 = {
    焦点变化 = function (组件对象,本次焦点,上次焦点)
        if (上次焦点) then
            调试输出(上次焦点.名称 .. " 失去焦点")
        end

        if (本次焦点) then
            调试输出(本次焦点.名称 .. " 获得焦点")
        end
    end,
}