Vaadin 拆分布局侦听器 - 来自客户端的 div 宽度

Question

在用户停止通过拖放调整 Vaadin 拆分布局的大小后，是否可以获得当前（在客户端）div 宽度？

像这样的东西？

splitLayout.addSplitterDragendListener(new ComponentEventListener<GeneratedVaadinSplitLayout.SplitterDragendEvent<SplitLayout>>() {
        @Override
        public void onComponentEvent(GeneratedVaadinSplitLayout.SplitterDragendEvent<SplitLayout> splitLayoutSplitterDragendEvent) {
            
            Notification.show(div.getWidth()); //it's return width which was defined on compilation

        }
    });

Answer 1

目前，这是SplitLayout Java API 中记录的缺失功能。

Vaadin 有底层 Element API，它有一个通用的客户端事件监听器。可以利用它来监听 Dragend 事件并获取主面板和辅助面板的大小。

getElement().addEventListener("splitter-dragend", e -> {
  this.primarySizePixel = e.getEventData().getNumber(PRIMARY_SIZE);
  this.secondarySizePixel = e.getEventData().getNumber(SECONDARY_SIZE);

  double totalSize = this.primarySizePixel + this.secondarySizePixel;
  this.splitterPosition = Math.round((this.primarySizePixel / totalSize) * 100.0);
})
    .addEventData(PRIMARY_SIZE)
    .addEventData(SECONDARY_SIZE);

这里PRIMARY_SIZE是 或"element._primaryChild.offsetHeight"取决于"element._primaryChild.offsetWidth"方向，和SECONDARY_SIZE "element._secondaryChild.offsetHeight"或"element._secondaryChild.offsetWidth"分别。

Vaadin 的问题跟踪器中记录了使用此解决方案扩展 SplitLayout 的完整类。

顺便提一句。通过使用 Lambda 代替匿名类，将事件侦听器与 Vaadin Java API 结合使用更加简洁。