如何找出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修复它

我得到了你想要达到的目标，但我认为有更好的方法可以做到这一点，而不是测量盒子大小。我想你可以在按钮周围添加一个包装div和一点css，让浏览器照顾它。

例如，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的文档以了解更多信息。