组件：窗口标题框

窗口标题框组件用于移动端页面顶部的标题栏，支持设置标题、左侧图标、右侧图标、图标尺寸、置元素被单击回调等特性，常用于手机页面头部导航栏、返回按钮与标题组合场景，注意默认左右两侧图标隐藏。

典型使用场景：

移动端页面标题栏（手机APP页面顶部导航）
返回按钮与标题组合（页面返回功能）
操作按钮组（分享、收藏、设置等操作）
搜索栏（页面搜索功能）
用户信息展示（头像、用户名、状态）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置标题文本	`标题`	`窗口标题框1.标题 = "首页"`
设置左侧图标	`左侧图标`	`窗口标题框1.左侧图标 = "static/back.png"`
设置右侧图标	`右侧图标`	`窗口标题框1.右侧图标 = "static/menu.png"`
设置图标尺寸	`置图标尺寸(宽度, 高度)`	`窗口标题框1.置图标尺寸(36, 36)`
设置元素点击回调	`置元素被单击回调(回调)`	`窗口标题框1.置元素被单击回调((源对象, 被单击索引) => { ... })`
设置背景颜色	`背景颜色`	`窗口标题框1.背景颜色 = "#ffffff"`
设置文本颜色	`文本颜色`	`窗口标题框1.文本颜色 = "#333333"`

样式美化参考

标题栏样式变体：

简约标题栏：背景颜色 = "#ffffff"，边框 = "none"，`高度 = 56
卡片标题栏：背景颜色 = "#ffffff"，边框 = "none"，阴影 = "0 2px 8px rgba(0,0,0,0.1)"，`高度 = 64
渐变标题栏：背景颜色 = "linear-gradient(135deg, #1890ff, #096dd9)"，边框 = "none"，`高度 = 60

标题样式：

主标题：文本颜色 = "#333333"，字体大小 = "18px"，字体粗细 = "粗体"
副标题：文本颜色 = "#666666"，字体大小 = "16px"，字体粗细 = "正常"
链接标题：文本颜色 = "#1890ff"，字体大小 = "16px"，下划线 = "none"

图标样式：

返回图标：左侧图标 = "static/back.png"，图标尺寸 = (32, 32)，文本颜色 = "#333333"
菜单图标：右侧图标 = "static/menu.png"，图标尺寸 = (24, 24)，文本颜色 = "#333333"
搜索图标：右侧图标 = "static/search.png"，图标尺寸 = (24, 24)，文本颜色 = "#666666"

布局样式：

固定定位：定位 = "固定"，顶边 = 0，宽度 = "100%"，`高度 = 56
相对定位：定位 = "相对"，外边顶 = 0，宽度 = "100%"，`高度 = 56
粘性定位：定位 = "粘性"，顶边 = 0，宽度 = "100%"，`高度 = 56

状态样式：

正常状态：背景颜色 = "#ffffff"，文本颜色 = "#333333"，图标颜色 = "#333333"
悬停状态：背景颜色 = "#f0f0f0"，文本颜色 = "#1890ff"，图标颜色 = "#1890ff"
按下状态：背景颜色 = "#e6f7ff"，文本颜色 = "#096dd9"，图标颜色 = "#096dd9"

响应式样式：

移动端适配：高度 = 56，字体大小 = "16px"，图标尺寸 = (32, 32)
平板端适配：高度 = 64，字体大小 = "18px"，图标尺寸 = (36, 36)
桌面端适配：高度 = 72，字体大小 = "20px"，图标尺寸 = (40, 40)

特殊样式：

透明背景：背景颜色 = "透明"，文本颜色 = "#ffffff"，图标颜色 = "#ffffff"
深色主题：背景颜色 = "#1f1f1f"，文本颜色 = "#ffffff"，图标颜色 = "#ffffff"
半透明：背景颜色 = "rgba(255,255,255,0.9)"，边框 = "1px solid rgba(0,0,0,0.1)"，阴影 = "0 2px 8px rgba(0,0,0,0.1)"

示例代码

' 示例：完整的窗口标题框使用演示
' 1. 创建窗口标题框
变量 窗口标题框1 = 创建 窗口标题框()
' 2. 设置属性
窗口标题框1.左边 = 0
窗口标题框1.顶边 = 0
窗口标题框1.宽度 = 400
窗口标题框1.高度 = 56
窗口标题框1.标题 = "首页"
窗口标题框1.左侧图标 = "static/back.png"
窗口标题框1.右侧图标 = "static/menu.png"
窗口标题框1.置图标尺寸(36, 36)
' 3. 设置事件回调
窗口标题框1.置元素被单击回调((源对象, 被单击索引) => {
	调试输出("被点击索引：" + 被单击索引)
})
' 4. 添加到父容器
添加组件(窗口标题框1)

属性：标题

类型： 文本型
说明： 设置或获取窗口标题框的标题文本内容，支持设置纯文本及HTML内容。

属性：右侧图标

类型： 文本型
说明： 设置或获取窗口标题框的右侧图标，支持本地图片及网络图片。

属性：左侧图标

类型： 文本型
说明： 设置或获取窗口标题框的左侧图标，支持本地图片及网络图片。

轻语言网站开发SDK文档