沿Vaadin Flow 12中的字段基线对齐小部件

Question

我正在Vaadin 12的HorizontalLayout中尝试垂直对齐。

在我可以想象的大多数应用程序中，沿着文本字段的基线排列小部件是有意义的，因为文本字段往往会驱动大多数应用程序，尤其是商务应用程序的布局。

因此，我很高兴找到为FlexComponent.Alignment.BASELINE提供的HorizontalLayout。但是当我在Vaadin 12.0.2应用程序中尝试过该基准时，基线似乎是 文本字段之外的所有内容。

这是一个示例应用程序。我下载了生成的基本启动程序，仅触及MainView构造函数的内容。

该应用程序由一个VerticalLayout组成，该HorizontalLayout由六个Label对象组成。每个水平条都是TextField，Button，Button和BASELINE。标签和第一个按钮的垂直对齐方式已明确设置。

在当前正在查看的窗口上方使用另一个窗口的边缘，其顶部边缘像标尺一样。请注意，“ BASELINE”行的显示方式是使显式设置的小部件（标签和第一个按钮）与字段标题的基线（而不是字段本身）以及最后一个按钮的文本基线对齐。

因此，TextField对齐方式将所有但文本字段的基线对齐。这与我的期望和要求完全相反。

➥这是功能还是错误？

➥我做错什么了吗？

➥是否可以通过某种方式使小部件与STRETCH的基线对齐？

作为次要问题，package work.basil.example.bugsy; import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.html.Label; import com.vaadin.flow.component.orderedlayout.FlexComponent; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.router.Route; import com.vaadin.flow.server.PWA; /** * The main view contains a button and a click listener. */ @Route ( "" ) @PWA ( name = "Project Base for Vaadin Flow", shortName = "Project Base" ) public class MainView extends VerticalLayout { public MainView () { this.setSpacing( true ); this.setMargin( true ); for ( FlexComponent.Alignment a : FlexComponent.Alignment.values() ) { Label label = new Label( a.name() ); TextField field = new TextField( "field" ); Button alignedButton = new Button( "aligned" ); Button unalignedButton = new Button( "unaligned" ); HorizontalLayout horizontalLayout = new HorizontalLayout(); horizontalLayout.add( label , field , alignedButton , unalignedButton ); // Set vertial alignment of the label and the first button. horizontalLayout.setVerticalComponentAlignment( a , label ); horizontalLayout.setVerticalComponentAlignment( a , alignedButton ); this.add( horizontalLayout ); } } } 似乎没有任何作用。应该怎么办？

代码

{{1}}

Answer 1

  

➥这是功能还是错误？

那是个错误。

  

➥我做错什么了吗？

不要这样。我将建立一个Flow项目来对此进行测试。

  

➥有什么方法可以使小部件与TextField的基线对齐？

不确定在单个组件上设置对齐方式与在整个布局中“全局”设置对齐方式（CSS中的align-self和align-items）是否存在差异。

  

作为次要问题，STRETCH似乎没有作用。应该怎么办？

拉伸应使组件垂直增长以匹配行中最高的项目。

---

这是一个仅用于客户端的测试用例，至少可以按预期运行：

https://conscious-seeker.glitch.me

https://glitch.com/edit/#!/conscious-seeker

Answer 2

标题上的标题会使版式失真

您的示例中的问题是TextField的标题。

Answer by Jouni解释这是一个错误。

解决方法

作为解决方法，请从TextField小部件中删除标题。

在示例代码中，只需更改以下内容即可：

TextField field = new TextField( "field" );

…对此：

TextField field = new TextField();

现在布局合理，符合您的预期。

这是一个令人讨厌的小错误，具有讽刺意味的是，最低重要元素（字段标题）劫持了布局算法。但是至少在解决方案发布之前，我们有一个解决方法：避免在字段上使用标题。