ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

LichtFeld-Studio Rml 即时模式布局组合指南:用子布局容器构建可复用 Python 插件面板

LichtFeld-Studio Rml 即时模式布局组合指南:用子布局容器构建可复用 Python 插件面板 【免费下载链接】LichtFeld-StudioTrain, inspect, edit, automate, and export 3D Gaussian Splatting scenes from a single native application.项目地址https://gitcode.com/gh_mirrors/ga/LichtFeld-Studio点击查看免费下载LichtFeld-Studio 是一套用于训练、检视、编辑与导出 3D Gaussian Splatting 场景的原生应用其 Python 插件系统在 RmlUi 之上提供了一套即时模式im-modeUI。本文聚焦layout子布局Sub-Layout组合机制以row、column、split、box、grid_flow五类可组合容器为骨架配合状态级联、稳定表格行与属性绑定控件系统讲解在 Python 面板内搭建结构化、可响应、状态安全的界面布局的完整方法。读完本文你将能够从单个ui对象出发用with上下文管理器声明式地组织任意深度的嵌套布局并正确使用push_id保证表格行在增删排序后仍能保持稳定的控件状态。背景Rml im-mode 面板与子布局LichtFeld-Studio 的 Python UI 面板通过继承 Panel 类注册面板的draw(self, ui)回调会收到一个ui对象类型为RmlUILayout见 UI 类型桩。在即时模式im-mode下每次绘制都从当前元素树重建 UI控件状态输入值、选中态、折叠态依赖稳定的身份标识被持久化复用。layout是面板 draw 回调中可用的子布局入口ui.row()、ui.column()、ui.split()、ui.box()、ui.grid_flow()各自返回一个RmlSubLayout上下文管理器对象进入with块后该容器自动接管后续控件的摆放位置离开with块时容器完成 flex 结构属性的发射与状态回收。容器可以被任意嵌套形成分层的 UI 结构。从源码看RmlSubLayout的 C 实现在 rml_im_mode_layout.cpp 中enter()时在 RmlUi DOM 上创建对应 CSS 类的div容器im-row、im-column、im-split、im-box、im-grid-flow并通过持久化容器键push_persistent_container把元素引用缓存到child_slots_中保证跨帧复用exit()时按容器类型发射flex-basis、flex-grow、align-self等结构化 flex 状态。五种容器Row水平排列row容器让子控件按水平方向依次排开控件之间保留默认水平间距with layout.row() as row: row.button(A) row.button(B) row.button(C)row直接对应 CSS 类im-row其内部子元素采用横向 flex 布局enter() 的类名映射。Column垂直堆叠与状态组column是标准的垂直堆叠容器即默认的垂直布局行为。它的典型用途是把一组控件包起来、统一施加状态with layout.column() as col: col.enabled False col.label(All children disabled) col.button(Cant click)容器作为上下文管理器with块内所有子控件都归属该容器而col.enabled这样的状态属性会在进入容器时级联到所有后代控件详见下文“状态级联”一节。Split双列比例分割split提供双列布局factor参数默认 0.5取值范围 [0, 1]越界会被std::clamp钳制设定第一个子控件占父容器宽度的比例第二个子控件获得剩余部分with layout.split(0.3) as split: split.label(Label) # 30% width split.prop(self, value) # 70% width实现细节split 的 flex 发射逻辑在计算百分比基准前会把 4dp 的列间距从可用宽度中扣除随后 RmlUi 对两个百分比基准同时收缩从而在扣除间距后仍保持请求的比例factor会被钳制到 [0, 1]非有限值NaN/Inf回退到 0.5split只支持两个子控件第三个及之后的子控件会被设置display: none隐藏并触发一次性的警告日志warned_split_overflow_保证警告只输出一次。测试用例 SplitAndGridFlowEmitStructuralFlexState 验证了split(0.3)会为第一个子元素写入data-im-flex-basis30%、第二个子元素写入70%且flex-basis的 CSS 属性值同步生效。Box带主题背景的边框容器box是带边框、使用主题感知背景色的分组容器适合承载独立的区块语义分区标题 一组相关设置with layout.box() as box: box.heading(Section) box.prop(self, setting)GridFlow响应式网格grid_flow提供响应式网格核心参数为columns、even_columns、even_rows签名与文档参数取值行为columns正整数even_columnsTrue时每个子控件获得100 / columns的百分比宽度columns0子控件使用 100dp 的基础宽度按可用宽度自动换行配合even_columnsTrueeven_columnsFalse子控件使用自身内容宽度flex-basis: autoeven_rowsTrue单元格可增长并拉伸到行高flex-grow: 1align-self: stretcheven_rowsFalse单元格保持自然高度flex-grow: 0align-self: flex-start典型用法——三列等宽网格with layout.grid_flow(columns3) as grid: for item in items: grid.button(item.name)源码中的换算逻辑even_columnsTrue且columns0时flex-basis被设置为100.0 / columns的百分比字符串如 3 列即为33.33%even_columnsTrue且columns0时使用100dpeven_columnsFalse时使用auto。even_rows同时控制flex-grow1 或 0与align-selfstretch或flex-start两个属性。测试用例同样验证了grid_flow(3)下每个子元素的基础宽度为33.33%以及even_columnsFalse, even_rowsFalse时子元素使用auto宽度与flex-start对齐。状态级联State Cascading子布局的状态属性会从父容器级联到所有后代子布局这是构建分组控件的核心机制。支持级联的状态属性包括enabled— 与运算AND父级被禁用时所有子级自动禁用active— 与运算AND语义同enabledalert— 一次性为下一个控件以错误样式高亮。with layout.column() as outer: outer.enabled False # everything below is disabled outer.prop(self, a) with outer.row() as row: # inherits disabled state row.button(X) # disabled row.button(Y) # disabled从类型桩RmlSubLayout 定义与 C 绑定py_rml_im_mode_layout.cpp可见RmlSubLayout公开了enabled、active、alert、scale_x、scale_y五个可读写属性其中scale_x/scale_y可用于容器的横向/纵向缩放同样可沿布局层级传递。Alert持续性错误高亮alert与一次性样式不同它是一种持久化样式只要保持True容器内所有控件都会持续以错误样式高亮并级联到子容器with layout.column() as col: col.alert value threshold col.prop(self, value) # red if alert is True col.prop(self, other_value) # also red (alert persists) with col.row() as row: row.label(Child) # also red (inherited from parent)适用于校验失败提示、阈值越界警告等场景——只要条件不满足整组控件保持错误视觉反馈。稳定表格行Stable Table RowsRml im-mode 表格行默认使用“位置身份”position identity行身份就是该行在表格中的裸索引。当表格行可以被重排或删除时控件状态会按位置转移——这会导致某一行被删除后后续行的输入状态整体错位。解决方案在begin_table()之后、table_next_row()之前调用push_id()压入稳定标识并在绘制该行的过程中保持它行结束后用pop_id()弹出if layout.begin_table(jobs, 2): for job in jobs: layout.push_id(f##{job.id}) layout.table_next_row() layout.table_next_column() layout.label(job.name) layout.table_next_column() layout.input_text(Status, job.status) layout.pop_id() layout.end_table()关键点与 table_next_row 的文档字符串 一致push_id中隐藏的##key部分被用作稳定令牌stable token未调用push_id时行身份为裸行索引插入、删除或重排都会导致单元格状态按位置转移##前缀的内容不参与显示仅作为身份标识适合直接使用内部主键如job.id作为令牌。嵌套组合Nesting容器可以任意深度嵌套——子布局可以再创建子布局。with上下文管理器保证了每个容器独立进入与退出嵌套的退出顺序与书写顺序一致with layout.box() as box: box.heading(Outer) with box.row() as row: row.button(A) with row.column() as col: col.label(Nested) col.button(B)结合状态级联嵌套组合可表达复杂的界面结构例如外层column控制整组可用性内部row/split负责水平组织grid_flow负责批量网格。子布局键的构造会串联父容器键child_key_stack_.back() / local_key从而保证嵌套容器跨帧复用时的身份唯一enter() 中的键拼接。prop_enum字符串属性切换按钮prop_enum绘制一组切换按钮用于设置字符串属性值选中态使用主题主色primary theme color样式。按钮组通常放在row中呈现为分段选择器with layout.row() as row: row.prop_enum(self, mode, fast, Fast) row.prop_enum(self, mode, balanced, Balanced) row.prop_enum(self, mode, quality, Quality)prop_enum也可直接用于layout对象签名见 UI 类型桩layout.prop_enum(self, mode, fast, Fast)参数语义data为持有属性的对象如面板实例selfprop_id为属性名字符串value为点击后写入的枚举字符串值text为按钮显示文本空时回退到value。C 侧签名在 rml_im_mode_layout.hpp 中定义为prop_enum(nb::object data, const std::string prop_id, const std::string value, const std::string text )。方法委托子布局复用全部 UILayout 能力RmlSubLayout暴露了UILayout的全部控件方法其中约 60 个最常用的方法在 C 侧显式绑定以换取调用性能其余所有方法通过__getattr__委托到UILayout实例。因此在子布局内你可以自由使用即时模式 UI 的全部基础能力with layout.row() as row: row.same_line() # delegated to UILayout row.push_id(details) # delegated to UILayout row.pop_id() # delegated to UILayout显式绑定的方法覆盖文本label、heading、text_colored等、按钮button、checkbox、radio_button等、滑杆与拖拽slider_float、drag_int等、输入input_text、input_float、path_input等、选择combo、listbox、selectable等、表格begin_table、table_next_row等、ID 栈push_id/pop_id、属性绑定prop、prop_enum、图像与菜单等完整清单见 RmlSubLayout 的 C 绑定 与 rml_im_mode_layout.hpp。实战组合出一块完整的面板布局将以上要素组合起来即可构造一个典型的插件面板——上半部分是操作按钮行中间是设置分组box下半部分是带稳定身份的作业表格def draw(self, ui): layout ui with layout.column() as outer: with outer.row() as toolbar: toolbar.button(Add Job) toolbar.button(Clear Done) toolbar.prop_enum(self, mode, fast, Fast) toolbar.prop_enum(self, mode, quality, Quality) with outer.box() as settings: settings.heading(Job Settings) settings.prop(self, priority) with settings.split(0.4) as split: split.prop(self, timeout) split.prop(self, retries) with outer.grid_flow(columns2) as grid: for name in self.flags: grid.checkbox(name, getattr(self, name)) if outer.begin_table(jobs, 2): for job in self.jobs: outer.push_id(f##{job.id}) outer.table_next_row() outer.table_next_column() outer.label(job.name) outer.table_next_column() outer.input_text(Status, job.status) outer.pop_id() outer.end_table()这段代码同时体现了本文的四个核心实践用column做纵向分组并通过enabled/alert级联状态用row、split、box、grid_flow组织横向与网格结构用prop_enum做字符串枚举切换用push_id保证表格行在增删后状态稳定。子布局容器均通过with上下文管理器自动进入与退出身份键沿嵌套路径串联跨帧可安全复用。相关资源本文对应原文档layout-composition.mdUI 类型桩Panel、RmlUILayout、RmlSubLayout 完整签名UI 类型桩子布局核心实现容器创建与 flex 状态发射rml_im_mode_layout.cpp子布局类声明全部显式委托方法rml_im_mode_layout.hppPython 绑定注册py_rml_im_mode_layout.cpp布局测试split 与 grid_flow 的结构化 flex 状态验证test_rml_im_mode_layout.cpp赞分享【免费下载链接】LichtFeld-StudioTrain, inspect, edit, automate, and export 3D Gaussian Splatting scenes from a single native application.项目地址https://gitcode.com/gh_mirrors/ga/LichtFeld-Studio点击查看免费下载相关推荐一键部署 Office开源工具 LKY_OfficeTools 自动完成下载、安装与激活一键部署 Office开源工具 LKY_OfficeTools 自动完成下载、安装与激活 开源项目 LKY_OfficeTools 把一键 Office 安装桌面应用CLI夜猫子福利HamsterBase深色模式下的高效知识管理体验夜猫子福利HamsterBase深色模式下的高效知识管理体验 HamsterBase作为一款自托管、本地优先的网页存档应用为知识管理提供了安全且高效的解决方知识库知识管理Ratatui WidgetRef 容器实战用异构 Widget 集合构建可复用 TUI 布局Ratatui WidgetRef 容器实战用异构 Widget 集合构建可复用 TUI 布局 本指南以 Ratatui 仓库中的 widget ref coUI组件上一篇用 GitHub Copilot Hooks 实现会话级密钥扫描awesome-copilot Secrets Scanner 实战指南下一篇OpenMontage 中 HeyGen 视频状态轮询实战从 poll 模式到断点续查的完整实现创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表