如何计算Vaadin 10中按钮的宽度？

我有三个这样的按钮

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

我试着这样做：

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

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

问题是

getWidth（）

如果未预先使用方法

setWidth

设置，则返回null。 那么，如何确定按钮的宽度呢？

使用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>

但是，您可能必须同步属性，并且当您最初渲染元素时，这些属性可能不可用，因为此时它们没有宽度。有关详细信息，请参阅文档。

使用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>

---

但是，您可能必须同步属性，并且当您最初渲染元素时，这些属性可能不可用，因为此时它们没有宽度。有关详细信息，请参阅文档。

尝试使用

VerticalLayout

和

setHorizontalAlignment

拉伸

VerticalLayout

和

setHorizontalAlignment

拉伸

。