HorizontalSplitPanel - 根据组件宽度调整拆分器位置答案

【问题标题】：HorizontalSplitPanel - Adjust the splitter position based on component widthHorizontalSplitPanel - 根据组件宽度调整拆分器位置
【发布时间】：2021-05-20 09:52:09
【问题描述】：

有没有办法在HorizontalSplit面板中添加2个以上的组件而不嵌套它？

拆分器的位置应基于为组件分配的空间。水平分割面板有嵌套，但分割器位置没有根据组件可见空间设置

【问题讨论】：

用你正在使用的特定版本标记这个问题可能是个好主意。
似乎没有直接的方法来实现这个解决方案。

标签： vaadin vaadin8 splitpanel

【解决方案1】：

如果您想要为每个组件设置一个单独的可调整大小的拆分区域，那么不，您不能仅使用一个拆分面板来实现，而嵌套确实是解决方案。如果您只需要一个拆分就可以了，那么您可以添加一个布局而不是一个组件，然后继续向布局中插入更多组件。

您可以使用splitPanel.setSplitPosition 调整分割位置。如果您想要的拆分位置不是静态的并且您的内容没有固定大小，您可以使用SizeReporter add-on 之类的工具来查询内容大小。请注意，这无疑会导致一些闪烁，因为您需要先将组件添加到布局中，然后才能测量其大小。

【讨论】：

但是通过在布局中添加组件，我们可以调整屏幕的宽度吗？我认为拆分面板提供了该选项。
你是指分割面板内的分割位置，还是整个分割面板的宽度？
在拆分面板中拆分位置。左右拖动分割器
因此，如果您有两个项目，则希望拆分为 50-50，如果您有三个项目，则希望外部拆分面板中的拆分为 33-66 和 50-50内部拆分面板？
如果我们需要像 20-30-20-10-20 那样对 5 个组件进行拆分，则应以这样的方式调整拆分器位置，无论主拆分面板还是嵌套面板。跨度>

【解决方案2】：

水平拆分面板允许左侧一个组件，右侧一个组件。而已你想达到什么目标？

【讨论】：

从组件列表中动态添加组件。目前我们在组件数量超过2时使用水平面板的嵌套。目标是在添加组件后设置拆分位置。每个组件在水平拆分面板中都有一个固定的空间。分配器应根据分配给该组件的空间进行调整。

【解决方案3】：

如果您向 HorizontalSplit 添加两个布局，则没有什么能阻止您向这些布局添加多个组件。如果需要，您还可以将新的 SplitLayouts 添加到现有的 splitlayouts。

【讨论】：

是的。但是每个组件都应该在拆分面板内以特定宽度显示。如果我们调整组件的宽度，只有组件宽度得到调整，而不是拆分器位置。使用嵌套拆分面板实现它并没有多大帮助
@SujathaKannan 您应该编辑您的问题以包含该要求。