组件:单选列表框

单选列表框组件用于显示多个可选项并支持单选操作,支持添加项目、插入项目、获取和设置选中项、寻找项目、清空选择及置项目被单击回调等特性,常用于单选项选择、配置选择、数据筛选等场景。

典型使用场景:

  • 单选项选择(性别选择、语言选择、主题选择)
  • 配置选择(设置选项、偏好设置、参数配置)
  • 数据筛选(分类筛选、条件筛选、范围筛选)
  • 导航菜单(页面导航、功能导航、菜单选择)
  • 状态选择(状态切换、模式选择、类型选择)

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

操作属性/方法示例
添加列表项添加项目(标题, 选中, 标记)单选列表框1.添加项目("选项一", 假, 1)
插入列表项插入项目(索引, 标题, 选中, 标记)单选列表框1.插入项目(1, "新选项", 假, 4)
设置选中项现行选中项单选列表框1.现行选中项 = 1
获取选中项现行选中项变量 选中 = 单选列表框1.现行选中项
查找项目寻找项目(目标文本, 模糊查询)变量 索引 = 单选列表框1.寻找项目("选项", 真)
清空选择清空选择()单选列表框1.清空选择()
获取项目数取项目数()变量 数量 = 单选列表框1.取项目数()
设置点击回调置项目被单击回调(回调)单选列表框1.置项目被单击回调((源对象, 索引) => { ... })

样式美化参考

列表样式变体:

  • 简约列表:边框 = "1px solid #d9d9d9"边框圆角 = "4px"背景颜色 = "#ffffff"行高 = "32px"
  • 卡片列表:边框 = "none"边框圆角 = "8px"背景颜色 = "#ffffff"阴影 = "0 2px 8px rgba(0,0,0,0.1)"行高 = "40px"
  • 分组列表:边框 = "1px solid #e8e8e8"边框圆角 = "8px"背景颜色 = "#ffffff"分组背景 = "#f8f9fa"行高 = "36px"

选中状态样式:

  • 选中项:背景颜色 = "#e6f7ff"文本颜色 = "#1890ff"边框 = "1px solid #91d5ff"图标 = "✓"
  • 未选中项:背景颜色 = "#ffffff"文本颜色 = "#333333"边框 = "none"图标 = "○"
  • 悬停项:背景颜色 = "#f0f0f0"文本颜色 = "#333333"边框 = "none"图标 = "○"
  • 禁用项:背景颜色 = "#f5f5f5"文本颜色 = "#d9d9d9"边框 = "none"图标 = "○"透明度 = "0.6"

尺寸样式:

  • 小尺寸:宽度 = 200高度 = "自动"行高 = "28px"字体大小 = "14px"
  • 中尺寸:宽度 = 300高度 = "自动"行高 = "32px"字体大小 = "14px"
  • 大尺寸:宽度 = 400高度 = "自动"行高 = "36px"字体大小 = "16px"
  • 自适应:宽度 = "100%"高度 = "自动"最大宽度 = 500行高 = "32px"

图标样式:

  • 圆形图标:选中图标 = "●"未选中图标 = "○"图标大小 = "16px"图标颜色 = "#1890ff"
  • 方形图标:选中图标 = "■"未选中图标 = "□"图标大小 = "16px"图标颜色 = "#1890ff"
  • 自定义图标:选中图标 = "✓"未选中图标 = ""图标大小 = "14px"图标颜色 = "#1890ff"

状态样式:

  • 正常状态:边框 = "1px solid #d9d9d9"背景颜色 = "#ffffff"光标样式 = "default"
  • 悬停状态:边框 = "1px solid #d9d9d9"背景颜色 = "#f0f0f0"光标样式 = "pointer"
  • 选中状态:边框 = "1px solid #1890ff"背景颜色 = "#e6f7ff"光标样式 = "pointer"
  • 禁用状态:边框 = "1px solid #d9d9d9"背景颜色 = "#f5f5f5"光标样式 = "not-allowed"透明度 = "0.6"

响应式样式:

  • 移动端适配:宽度 = "100%"最大宽度 = 300行高 = "28px"字体大小 = "14px"
  • 平板端适配:宽度 = "100%"最大宽度 = 400行高 = "32px"字体大小 = "14px"
  • 桌面端适配:宽度 = 300行高 = "32px"字体大小 = "14px"边框圆角 = "4px"

示例代码

' 示例:完整的单选列表框使用演示
' 1. 创建单选列表框
变量 单选列表框1 = 创建 单选列表框()
' 2. 设置属性
单选列表框1.左边 = 100
单选列表框1.顶边 = 100
单选列表框1.宽度 = 300
单选列表框1.添加项目("选项一", 假, 1)
单选列表框1.添加项目("选项二", 真, 2)
单选列表框1.添加项目("选项三", 假, 3)
单选列表框1.现行选中项 = 1
' 3. 设置事件回调
单选列表框1.置项目被单击回调((源对象, 索引) => {
	调试输出("单击项:" + 索引)
})
' 4. 渲染并添加到父容器
单选列表框1.渲染()
添加组件(单选列表框1)

属性:拉伸内容

  • 类型: 逻辑型
  • 说明: 设置是否拉伸列表框内容,默认为假,设置为真后,列表框将隐藏滚动条,列表框内容将全部展示。

属性:现行选中项

  • 类型: 数值型
  • 说明: 设置或获取当前单选列表框的现行选中项索引。

函数:添加项目(标题, 选中, 标记)

向单选列表框的数据集合中添加一个项目,包含显示文本、是否选中状态和标签信息。

函数:删除项目(索引)

从列表框的数据集合中删除指定索引位置的项目。

函数:更新项目(索引, 项目对象)

更新列表框的数据集合中指定索引位置的项目。

函数:取项目集合()

获取列表框的数据集合。

函数:清空()

清空列表框的数据集合。

函数:取项目数()

获取列表框的数据集合中的项目数量。

函数:渲染()

根据列表框的数据集合和设置的回调函数,渲染列表框的项目到页面上。

函数:插入项目(索引,标题, 选中, 标记)

在列表框指定索引位置插入一个项目,包含显示文本、是否选中状态和标签信息。

函数:清空选择()

清空列表框中选择项状态。

函数:寻找项目(目标文本, 模糊查询)

在列表框中寻找项目,返回项目索引,参数二默认为假,进行精确匹配,如果设置为真则进行模糊匹配。

函数:置项目被单击回调(回调函数)

设置项目被单击时的回调对象。

事件:项目被单击(源对象,索引)

当列表框中的项目被单击时触发该事件。