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

Question

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

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

所以我很高兴找到 FlexComponent.Alignment.BASELINE HorizontalLayout。但是当我在 Vaadin 12.0.2 应用程序中尝试它时，基线似乎是除了文本字段之外的所有内容。

这是一个示例应用程序。我下载了生成的 base starter，除了 MainView 构造函数的内容外什么也没触及。

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

在您正在查看的 window 上使用另一个 window 的边缘，像使用尺子一样使用它的上边缘。请注意“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 );
        }
    }
}

Answer 1

字段上的标题扭曲了布局

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

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

解决方法

解决方法是从 TextField 小部件中删除标题。

在您的示例代码中，只需将其更改为：

TextField field = new TextField( "field" );

…为此：

TextField field = new TextField();

现在布局合理，表现如您所愿。

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

Answer 2

➥ Is this a feature or a bug?

这是一个错误。

➥ Am I doing something wrong?

不这么认为。我将建立一个 Flow 项目来测试这个。

➥ Is there some way to get the widgets to align to the baseline of the TextField?

不确定您在组件上单独设置对齐与为整个布局“全局”设置对齐是否有区别（align-self vs align-items in CSS).

As a minor side issue, STRETCH seems to have no effect. What should it be doing?

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

这是一个仅限客户端的测试用例，它至少按预期工作：

https://conscious-seeker.glitch.me

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

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

Align widgets along baseline of field in Vaadin Flow 12

alignment

vertical-alignment

baseline

vaadin

vaadin-flow

代码

字段上的标题扭曲了布局

解决方法