1

我正在HorizontalLayoutVaadin 12 中尝试垂直对齐。

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

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

几个 <code>Horizo​​ntalLayout</code> 条的屏幕截图，<code>FlexComponent.Alignment</code> 枚举中的每个值对应一个

这是一个示例应用程序。我下载了生成的基础启动器，只触及了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 );
        }
    }
}
4

2 回答 2

2

➥ 这是功能还是错误？

那是一个错误。

➥ 我做错了吗？

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

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

不确定您似乎在组件上单独设置对齐方式与为整个布局“全局”设置对齐方式（align-self与align-itemsCSS 中的对齐方式）是否存在差异。

作为一个小问题，STRETCH 似乎没有效果。它应该做什么？

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

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

https://conscious-seeker.glitch.me

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

于 2018-12-17T09:03:57.133 回答
1

字段上的标题会扭曲布局

您的示例中的问题是TextField.

Jouni的答案解释说这是一个错误。

解决方法

作为一种解决方法，从您的TextField小部件中删除标题。

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

TextField field = new TextField( "field" );

……对此：

TextField field = new TextField();

现在布局是明智的，表现如你所料。

<code>TextField</code> 上没有标题的正确布局的屏幕截图

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

于 2018-12-16T05:04:09.813 回答