YStudio Y++

树形视图(treeview)

Y++ / YStudio 开发文档 · 一点滴

选择器: treeview · 设计器组件: 树形视图 · 按名称: treeview#名称 或 #名称
用途: 层级节点列表,支持展开/收起、勾选、图标与角标。

硬约束与叠画

  1. 控件名来自窗口 XML「名称」;属性赋值无括号(如 标题 = "确定"),方法调用必须带括号(如 刷新())。
  2. 事件写 函数 控件名.事件名(参数…),形参类型以本页事件表为准。
  3. 任意控件客户区叠画用支持库 绘制类:绘制类 g → g.绑组件(本控件名)(组件名无引号)。画布场景编辑见 画布控件。
  4. 字体对象见绘制文档中的字体类;置字体(字体类) 将字体应用到本控件。
  5. 不要虚构未列出的方法;YSS 键见下文与 YSS.md。

属性

设计器属性面板与代码侧可读可写属性(来源:组件类库)。

属性 类型 读写 说明
提示 文本 读写 鼠标悬停时的提示文字
鼠标指针 文本 读写 空=默认;可用 arrow/hand/ibeam/cross/wait/no/sizeall 等预设,或.cur/.ani 路径(如 资源/press.cur)
左边 小数 读写 相对窗体左边的位置(像素)
顶边 小数 读写 相对窗体顶边的位置(像素)
宽度 小数 读写 控件宽度(像素)
高度 小数 读写 控件高度(像素)
停靠 整数 读写 0无 1上 2下 3左 4右 5填充;菜单/工具/状态栏仍用专用吸附
可见 逻辑 读写 真=显示,假=隐藏
启用 逻辑 读写 真=可用,假=禁用
句柄 长整数 只读 组件逻辑句柄(1 起,供动画类等绑定;非 HWND);只读
节点列表 文本 读写 每行一个节点;层级由缩进或对话框设置
行高 整数 读写 节点行高度(像素)
当前索引 整数 读写 0 起,对应节点列表行号
滚动条 整数 读写 0=自动,1=不显示,2=纵向,3=横向(忽略),4=两者(按纵向);内容超出可视区时显示
滚动条宽度 整数 读写 6~32 像素
图标大小 整数 读写 节点图标边长(像素)
圆角 整数 读写 像素,0=直角
显示边框 逻辑 读写 真=显示边框
边框大小 整数 读写 像素
边框颜色 文本 读写 如 #RRGGBB
当前文本 文本 只读 当前选中节点文本(只读)
允许编辑 逻辑 读写 真=可按 F2 或双击编辑节点文本
开启勾选 逻辑 读写 真=节点前显示复选框
联动勾选 逻辑 读写 真=勾选父节点时同步子节点
勾选三态 逻辑 读写 真=支持未选/选中/不确定
显示连线 逻辑 读写 真=显示分支连线与展开框;假=导航风格(只保留缩进层级)
是否缩进 逻辑 读写 真=子级按层级水平缩进;假=全部左对齐
缩进方式 整数 读写 0=像素,1=Tab(按字号估算)
缩进宽度 整数 读写 像素模式为每级像素(默认20);Tab 模式为每级 Tab 个数(默认1)
拖拽排序 逻辑 读写 真=同级节点可拖动排序
拖动动画 整数 读写 拖动时幽灵/吸附预设 0–9
交换动画 整数 读写 放下后交换位移动画预设 0–9
编辑快捷键 整数 读写 虚拟键码(如 #F2键=113、#Home键=36);0=F2,-1=禁用键盘编辑
默认展开层级 整数 读写 0=全部展开(默认);N=展开深度小于 N 的节点(根深度为 0)

方法

调用必须带括号。节点索引从 0 起;根级父索引为 -1。下表为带类型签名。

常量 取值
角标位置 0右 · 1左
勾选 0未选 · 1选中 · 2不确定
查找失败 未找到返回 -1
方法 签名 返回 说明
置当前索引 无 置当前索引(整数 索引) 无
取当前索引 整数 取当前索引() 整数
加入节点 无 加入节点(文本 文本, [文本 图标=""]) 无 根级
加入项目 无 加入项目(文本 文本) 无 无图标的根项
加入子节点 无 加入子节点(整数 父索引, 文本 文本, [文本 图标=""]) 无 父 -1=根
置项目图标 无 置项目图标(整数 索引, 文本 图标) 无
置项目角标 无 置项目角标(整数 索引, 文本 角标, [整数 位置=0], [文本 颜色=""]) 无 位置 0右/1左
取项目角标 文本 取项目角标(整数 索引) 文本
取项目角标位置 整数 取项目角标位置(整数 索引) 整数
清空 无 清空() 无
删除项目 无 删除项目(整数 索引) 无
删除子树 无 删除子树(整数 索引) 无
取项目数 整数 取项目数() 整数
取项目文本 文本 取项目文本(整数 索引) 文本
置项目文本 无 置项目文本(整数 索引, 文本 文本) 无
取当前文本 文本 取当前文本() 文本
展开节点 无 展开节点(整数 索引) 无
折叠节点 无 折叠节点(整数 索引) 无
展开全部 无 展开全部() 无
折叠全部 无 折叠全部() 无
取节点已展开 整数 取节点已展开(整数 索引) 整数 1/0
取勾选索引列表 整数数组 取勾选索引列表() 整数数组
取选中索引 整数 取选中索引() 整数 同当前
取选中文本 文本 取选中文本() 文本
置项目勾选 无 置项目勾选(整数 索引, 整数 勾选) 无 0未选 1选中 2不确定
取项目勾选 整数 取项目勾选(整数 索引) 整数
滚动到节点 无 滚动到节点(整数 索引) 无
取父索引 整数 取父索引(整数 索引) 整数 根父=-1
取节点深度 整数 取节点深度(整数 索引) 整数 根=0
取子节点数 整数 取子节点数(整数 索引) 整数
查找节点 整数 查找节点(文本 文本, [整数 起始=0]) 整数 未找到 -1
移动 无 移动(小数 左边, 小数 顶边, [小数 宽度], [小数 高度]) 无 可选同时改宽高
置焦点 无 置焦点() 无
刷新 无 刷新() 无
显示 / 隐藏 无 显示() / 无 隐藏() 无 等同 可见 = 真/假
置字体 逻辑 置字体(字体类 字体) 逻辑 见 painter.md
树形视图1.加入节点("根")
树形视图1.加入子节点(0, "子项")
树形视图1.展开节点(0)

事件

在代码中写 函数 控件名.事件名(...) 处理。专用:

事件 参数
节点选中改变 / 节点被激活 / 节点被单击 / 节点被双击 / 即将展开 / 已展开 / 即将收起 / 已收起 / 节点被删除 整数 索引, 文本 项目文本
节点勾选改变 整数 当前索引, 文本 项目, 逻辑 勾选
节点顺序改变 整数 旧索引, 整数 新索引

其余鼠标/焦点事件见下表。

事件 参数 说明
单击 整数 X, 整数 Y 鼠标左键单击控件。
双击 整数 X, 整数 Y 鼠标左键双击控件。
右键单击 整数 X, 整数 Y 鼠标右键单击控件。
鼠标按下 整数 X, 整数 Y, 逻辑 按下 鼠标键在控件上按下。按下=真表示当前仍按住。
鼠标抬起 整数 X, 整数 Y, 逻辑 按下 鼠标键在控件上放开。
鼠标移动 整数 X, 整数 Y, 逻辑 按下 鼠标在控件上移动。按下表示左键是否按住。
鼠标进入 整数 X, 整数 Y 鼠标指针进入控件区域。
鼠标离开 整数 X, 整数 Y 鼠标指针离开控件区域。
鼠标左键单击 整数 X, 整数 Y 鼠标左键单击(与「单击」同时触发)。
鼠标左键双击 整数 X, 整数 Y 鼠标左键双击(与「双击」同时触发)。
鼠标中间单击 整数 X, 整数 Y 鼠标中键单击控件。
鼠标齿轮滚动 整数 X, 整数 Y, 逻辑 向上 在控件上滚动鼠标滚轮。向上=真表示向上滚。
鼠标右键单击 整数 X, 整数 Y 鼠标右键单击(与「右键单击」同时触发)。
鼠标右键双击 整数 X, 整数 Y 鼠标右键双击控件。
节点选中改变 整数 索引, 文本 项目文本 当前选中节点发生变化时触发(程序置索引、键盘切换或用户点击)。参数:整数 索引, 文本 项目文本。
节点被激活 整数 索引, 文本 项目文本 双击某节点或焦点在树上按 Enter/空格确认时触发。参数:整数 索引, 文本 项目文本。
节点被单击 整数 索引, 文本 项目文本 用户单击某一节点时触发。参数:整数 索引, 文本 项目文本。
节点被双击 整数 索引, 文本 项目文本 用户双击某一节点时触发。参数:整数 索引, 文本 项目文本。
即将展开 整数 索引, 文本 项目文本 节点即将展开前触发(用户点击展开符或程序展开)。参数:整数 索引, 文本 项目文本。
已展开 整数 索引, 文本 项目文本 节点已展开后触发。参数:整数 索引, 文本 项目文本。
即将收起 整数 索引, 文本 项目文本 节点即将折叠前触发。参数:整数 索引, 文本 项目文本。
已收起 整数 索引, 文本 项目文本 节点已折叠后触发。参数:整数 索引, 文本 项目文本。
节点勾选改变 整数 当前索引, 文本 项目, 逻辑 勾选 开启勾选时,用户点击勾选框或程序置勾选后触发。参数:整数 当前索引, 文本 项目, 逻辑 勾选。
节点顺序改变 整数 旧索引, 整数 新索引 拖拽排序移动节点后触发。参数:整数 旧索引, 整数 新索引。
节点被删除 整数 索引, 文本 项目文本 删除节点或子树后触发。参数:整数 索引, 文本 项目文本。
函数 树形视图1.单击 (整数 X, 整数 Y) {
    // …
}

YSS 样式

以下为样式表(.yss)键与示例;写样式前请先读窗体 XML 取控件 名称 与 typeId,见 window-xml.md。

布局与子选择器

项子控件 / 伪类: treeview:item · treeview:item:hover · treeview:item:selected

样式概览

YSS 控制外框、行高亮(圆角/阴影)、复选框外观、缩进与树枝线。

伪状态与映射

伪态映射( 必读):

在子选择器 / 伪态块中写的键 实际落到控件的字段
treeview:item:selected { background-color } / background item-selected-background
treeview:item:selected { color } item-selected-color
treeview:item:hover { background-color } / background item-hover-background
treeview:item:hover { color } item-hover-color
:selected 伪类 与 :pressed 同义,均映射到 选中行 配色键

也可直接在基选择器写 item-selected-* / item-hover-* 等键,效果相同。

槽位复用注意: scrollbar-thumb-color 与 item-hover-background 共用 hoverBackColor 槽;scrollbar-track-color 与 disabled-background-color 共用 disabledBackColor 槽。后写入者覆盖前者。

行为项警告: show-checkboxes、link-check、three-state-checkboxes 写入 YSS 会覆盖属性面板同名字段。若已在属性面板开启勾选,勿在 YSS 写 show-checkboxes: false 误关;纯样式表若不需要改行为,建议不写这些键。

属性说明(逐键)

本控件支持 YSS 通用属性速查 中的列表类子集;下表按「行布局 → 勾选 → 缩进/树枝 → 行高亮 → 滚动条 → 外壳 → 字体」展开。每条写清:作用、取值、绘制时机、注意点。

行布局

属性 作用 取值 / 范围 说明与注意
row-height 节点行高 像素,如 24–200 影响可见行数、展开符与图标垂直居中。
icon-size 节点图标边长 像素 8–128 实际绘制受行高约束(不超过行高−边距)。

勾选(行为 + 外观)

属性 作用 取值 / 范围 说明与注意
show-checkboxes 节点前复选框 true / false 对应属性「开启勾选」。行为项:覆盖属性面板;勿误写 false 关闭已开启的勾选。
three-state-checkboxes / three-state-check 勾选三态(半选) true / false 对应属性「勾选三态」。行为项:同上。
check-size / indicator-size 复选框边长 像素 8–32 默认约 14。
indicator-background-color 复选框背景色 颜色 未勾选框内填充。
indicator-border-color 复选框边框色 颜色
checkmark-color / mark-color 勾选标记颜色 颜色 选中行上若与底色接近,运行时会自动改用高对比色。

缩进与树枝线

属性 作用 取值 / 范围 说明与注意
show-branch-lines / branch-lines / show-lines 绘制层级连接线 true / false 连接父子节点的竖/横线。
indent / enable-indent 启用层级缩进 true / false false 时各级左对齐(仍可有展开符)。
indent-mode / indent-style 缩进计量方式 像素/0 · Tab/1/制表符 影响每级递增量解释。
indent-width / indent-size 每级缩进宽度 像素 0–256 默认约 18。

行高亮(选中 / 悬停)

属性 作用 取值 / 范围 说明与注意
item-selected-background 选中行背景 颜色 铺满行宽(含缩进区左侧到右缘)。
item-hover-background 悬停行背景 颜色 未选中行悬停;与 scrollbar-thumb-color 共用槽位。
item-selected-color 选中行文字色 颜色
item-hover-color 悬停行文字色 颜色
item-radius / item-border-radius / item-corner-radius 选中/悬停行圆角 像素 0–64 胶囊形行高亮;0=直角铺满。
item-padding 行高亮区内缩 像素 0–32 仅上下内缩(左右仍铺满行宽);配合 item-radius 形成「行内胶囊」效果。
shadow / box-shadow 选中行软阴影 true / false 与 item-radius 配合可模拟浮起;见 shadow-*。
shadow-color 阴影色 颜色 常与 item-selected-background 同色。
shadow-blur 模糊半径 0–64
shadow-offset-x / shadow-offset-y 阴影偏移 -64–64 只偏移阴影,不缩进行矩形。
shadow-style 阴影风格 soft / hard 同按钮语义。

滚动条

属性 作用 取值 / 范围 说明与注意
scrollbar / scrollbar-policy 滚动条策略 auto/0 · vertical/1 · none/hidden/2 · always/3 树形视图无横向策略枚举;超出时纵向滚动。
scrollbar-width 滚动条宽度 像素约 6–32
scrollbar-track-color 轨道色 颜色 映射 disabledBackColor 槽。
scrollbar-thumb-color 滑块色 颜色 映射 hoverBackColor 槽;与 item-hover-background 互斥覆盖。

外壳 · 底板与描边

属性 作用 取值 / 范围 说明与注意
color 常态节点文字色 #RRGGBB / #AARRGGBB 未选中、非悬停行。
background-color / background 控件背景色 颜色 行间隙/空白区底色;选中走 item-selected-*。
transparent-background 不铺底板 true / false
opacity 整控不透明度 0–100
show-border 外框 true / false
border-color 边框色 颜色
border-width 边框宽 像素
border-radius / corner-radius 外框圆角 像素 0–64 与行级 item-radius 独立。
transition 行色过渡 如 background-color 150ms ease-out 设计器静态预览为主。

字体

属性 作用 取值 / 范围 说明与注意
font-size 节点字号 整数像素,如 13 DIP。
font-family 字体族 字符串 含空格须加引号。
font-bold 粗体 true / false
font-italic 斜体 true / false

使用示例

胶囊选中行 + 阴影

treeview#树形视图1 {
    row-height: 36;
    border-radius: 16;
    item-radius: 12;
    item-padding: 6;
    item-selected-background: #00B8A0;
    item-selected-color: #FFFFFF;
    box-shadow: true;
    shadow-color: #00B8A0;
    shadow-blur: 12;
    shadow-offset-y: 3;
}

勾选 + 树枝线

treeview#资源树 {
    row-height: 28;
    show-checkboxes: true;
    link-check: true;
    show-branch-lines: true;
    indent: true;
    indent-width: 20;
    check-size: 14;
    indicator-background-color: #2D2D30;
    indicator-border-color: #606060;
    checkmark-color: #00B464;
}

子选择器写法

treeview:item:selected {
    background-color: #094771;
    color: #FFFFFF;
}

treeview:item:hover {
    background-color: #2A2D2E;
    color: #FFFFFF;
}

完整示例

treeview#树形视图1 {
    row-height: 26;
    scrollbar-width: 10;
    icon-size: 18;
    show-checkboxes: true;
    link-check: true;
    three-state-checkboxes: true;
    check-size: 14;
    indicator-background-color: #2D2D30;
    indicator-border-color: #606060;
    checkmark-color: #00B464;
    show-branch-lines: true;
    indent: true;
    indent-width: 18;
    background-color: #252526;
    color: #CCCCCC;
    border-radius: 4;
    show-border: true;
    border-color: #3F3F46;
    item-hover-background: #2A2D2E;
    item-selected-background: #094771;
    item-hover-color: #FFFFFF;
    item-selected-color: #FFFFFF;
    item-radius: 6;
    item-padding: 4;
    scrollbar-track-color: #2D2D30;
    scrollbar-thumb-color: #686868;
    font-size: 13;
}

treeview:item:hover {
    background-color: #2A2D2E;
}