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

Question

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

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

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

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

该应用程序包含一个由六个HorizontalLayout 对象组成的VerticalLayout。每个水平条是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 );
        }
    }
}

Answer 1

➥ 这是功能还是错误？

这是一个错误。

➥ 我是不是做错了什么？

不这么认为。我将设置一个 Flow 项目来测试它。

➥ 有没有办法让小部件与 TextField 的基线对齐？

不确定您似乎在单独设置组件的对齐方式与为整个布局“全局”设置对齐方式（align-self 与 CSS 中的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();

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

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