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

产生这个:

现场演示

码

获取渲染元素的宽度

如果你想得到你最初提出的问题的答案,我想你可以从Element API得到它,如下所示:

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

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