时间戳

首页 > 解决方案 > Vaadin 拆分布局侦听器 - 来自客户端的 div 宽度

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

问题描述

在用户停止通过拖放调整 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

        }
    });

标签： vaadin

解决方案

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

在 Vaadin 中有底层元素 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 的完整类。

顺便提一句。通过使用 Lambdas 而不是匿名类，使用带有 Vaadin Java API 的事件侦听器更加简洁。

推荐阅读