vaadin - 如何在 Vaadin 10 中找出按钮的宽度？

Question

所以我有三个这样的按钮。

我的目标是使这些按钮具有相同的宽度。
为此，我想检查每个按钮的宽度，将最大值（在本例中为第二个按钮）放入变量中，然后将每个按钮的宽度设为该值。
我不想使用一些幻数来设置宽度，因为我的按钮上的文本可能会改变。

我试着这样做：

String maxWidth = findMaxValue(button1.getWidth(), button2.getWidth(), button3.getWidth());
button1.setWidth(maxWidth);
button2.setWidth(maxWidth);
button3.setWidth(maxWidth);

如果没有提前设置方法，问题是getWidth()返回 null 。setWidth那么，如何找出按钮的宽度？

Answer 1

用 CSS 修复它

我得到了你想要达到的目标，但我认为有比测量盒子尺寸更好的方法来做到这一点。我认为您可以在按钮和一点 css 周围添加一个包装 div 并让浏览器处理它。

例如 flex-box 应该有解决方案。这是我做的一个快速测试。

<style>
  .my-layout {
    display: inline-flex;
    flex-direction: column;
  }
</style>
...   
<div class="my-layout">
  <vaadin-button>my button 1</vaadin-button>
  <vaadin-button>my very cool button 2</vaadin-button>
  <vaadin-button>b 3</vaadin-button>
</div>

产生这个：

现场演示

代码

获取渲染元素的宽度

如果你想要你最初提出的问题的答案，我认为你可以从 Element API 中得到它，如下所示：

button1.getElement().getProperty("offsetWidth",0);

但是您可能必须同步属性，并且当您最初渲染元素时它们可能不可用，因为此时它们没有宽度。请参阅使用 Element API 操作 DOM的文档以了解更多信息。