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

Question

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

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

我试图这样做：

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

问题是getWidth()如果未事先使用方法setWidth设置，则返回null。 那么，如何找出按钮的宽度？

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>

产生这个：

Live demo

Code

获取渲染元素的宽度

如果您想获得最初提出的问题的答案，我认为您可以使用以下类似的方法从Element API中获取答案：

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

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