Shiny应用实现可移动分隔条（Moveable Splitter bar）技术咨询

关于Shiny中可移动分隔条的实现情况 #

目前已有大量开发者在Shiny App中落地了可移动分隔条/分隔面板功能，你提到的两款JS库都有对应的实践案例，具体情况如下：

Split.js 落地实践 #

Split.js是无依赖的轻量JS库，和Shiny原生生态适配性最高，是目前该场景下使用最广泛的方案：

• 实现逻辑非常简单：UI端引入Split.js资源后，给需要分隔的面板指定统一父容器ID、给子面板设置对应类名，最后在tags$script中写几行初始化代码即可生效，不需要复杂的二次封装。
• 注意要提前给分隔面板设置固定的height或min-height属性，避免拖动时出现面板塌陷问题；如果是嵌套分隔布局，只需要给内层容器单独再初始化一个Split实例即可。
• 目前社区已经有封装好的R函数，不需要手动写JS就能直接生成横向/纵向分隔面板，原生适配Shiny的响应式逻辑，拖动时面板内的绘图、表格等输出会自动适配新尺寸。

React splitter layout 落地实践 #

该库依赖React生态，适配Shiny的成本相对更高，更适合已经接入React组件体系的Shiny项目：

• 实现需要先通过shiny.react包搭建React和Shiny的通信桥梁，之后将splitter组件封装为Shiny可调用的自定义组件即可在UI中直接使用。
• 它自带的嵌套分隔、最小尺寸限制、拖拽事件回调等能力都可以和Shiny响应式系统绑定，比如可以将实时分隔比例传回服务端用于后续逻辑处理。
• 缺点是首次加载的资源体积远大于Split.js，如果项目只需要基础分隔功能，不推荐优先选这个方案。

通用落地建议 #

• 首次实现优先选择Split.js方案，学习成本低、社区参考资料多，排查问题的难度也更小。
• 如果遇到拖动后面板内输出没有自动适配尺寸的问题，可以在Split的onDragEnd回调中手动触发一次window.resize事件，就能强制所有Shiny输出组件重新计算尺寸。
• 需要保留用户调整的分隔比例的话，可以把比例存在localStorage中，初始化Split时直接读取对应值作为默认参数即可实现持久化。

内容的提问来源于stack exchange，提问作者TJC