Vaadin Flow 中布局中的中心小部件

Question

当我LoginLayout在一个更大的窗口中出现另一个布局中的小部件时，如何将内容居中？我希望内容在宽度和高度方面大约出现在窗口的中间。

我发现了关于这个主题的旧问题，例如this和this，但它们是针对Flow（版本 10+，现在 14）之前的上一代Vaadin（版本 6、7、8）。

Answer 1

HorizontalLayout使用 CSS3弹性盒

过去的 trustyHorizontalLayout和VerticalLayoutclasses仍然在 Vaadin 14 中。这对类已经被改造以使用CSS3 中的现代Flexbox技术。在CSS-Tricks.com和Mozilla上查看关于 Flexbox 的优秀教程。CSS3 Flexbox 在概念上非常接近经典 Vaadin和.HorizontalLayoutVerticalLayout

在下面的这个例子中，我们从 Vaadin 开始HorizontalLayout。

final public class AuthenticateView extends HorizontalLayout

在构造函数中，将您的小部件添加到布局中，aLoginForm是本示例中的小部件。

this.add ( new LoginForm() );

使HorizontalLayout使用所有可用的房间与问候的宽度和高度都。

this.setSizeFull ();

在布局中设置我们的内容（我们的LoginForm）以水平移动到中间。这里的动词“justify”指的是排版师/设计师的行话，其中“justify”意味着与页面边距对齐。

this.setJustifyContentMode ( FlexComponent.JustifyContentMode.CENTER );

最后，我们可以指定我们的内容应该在我们现在非常高的布局中垂直显示的位置。我们想要内容在顶部、底部还是中间？

注意这里的语法与 Vaadin 8 代的不同：该术语FlexComponent反映了 CSS Flexbox 的使用。

this.setDefaultVerticalComponentAlignment ( FlexComponent.Alignment.CENTER );

额外功能：让我们HorizontalLayout通过着色其原本不可见的边缘来直观地验证我们的行为。

this.getStyle ().set ( "border" , "6px dotted DarkOrange" );  // DEBUG - Visually display the  bounds of this layout.

通过@Route注释将此视图设置为默认视图。

@Route ( "" )
final public class AuthenticateView extends HorizontalLayout

运行时，我们发现登录表单出现在更大的 Web 浏览器窗口的中心。请注意橙色边框显示我们如何HorizontalLayout增长以占据整个窗口。

为了好玩，请尝试禁用此处显示的各种代码行。运行应用程序，通过注意LoginForm和橙色边框的位置来查看代码对行为的影响。

这是完整的类代码。

package work.basil.example.ui;

import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route ( "" )
final public class AuthenticateView extends HorizontalLayout
{
    // Constructor
    public AuthenticateView ( )
    {
        super ();

        // Widgets
        this.add ( new LoginForm () );

        // Arrange
        this.getStyle ().set ( "border" , "6px dotted DarkOrange" );  // DEBUG - Visually display the  bounds of this layout.
        this.setSizeFull ();
        this.setJustifyContentMode ( FlexComponent.JustifyContentMode.CENTER ); // Put content in the middle horizontally.
        this.setDefaultVerticalComponentAlignment ( FlexComponent.Alignment.CENTER ); // Put content in the middle vertically.

    }
}

警告：上面显示的这段代码远不足以满足现实世界的登录工作。这里的重点是小部件布局，而不是用户身份验证。