在 Vaadin Flow 中的布局中居中小部件

Posted 2023-03-05

【中文标题】在 Vaadin Flow 中的布局中居中小部件

【英文标题】：Center widgets within a layout in Vaadin Flow

【发布时间】：2019-12-23 15:55:36

【问题描述】：

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

我发现了有关此主题的较早问题，例如 this 和 this，但它们适用于 Flow 之前的上一代 Vaadin（版本 6、7、8）（版本 10+，现在是 14）。

【参考方案1】：

HorizontalLayout 使用 CSS3 Flexbox

过去值得信赖的 HorizontalLayout and VerticalLayout classes 仍然在 Vaadin 14 中。这对课程已经过改造以使用 CSS3 中的现代 Flexbox 技术。请参阅 CSS-Tricks.com 和 Mozilla 上有关 Flexbox 的优秀教程。 CSS3 Flexbox 在概念上非常接近经典 Vaadin HorizontalLayout 和 VerticalLayout 的行为。

在下面的示例中，我们从 Vaadin HorizontalLayout 开始。

final public class AuthenticateView extends HorizontalLayout

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

this.add ( new LoginForm() );

使HorizontalLayout 使用所有可用空间的宽度和高度。

this.setSizeFull ();

在布局中设置我们的内容（我们的LoginForm）以横向移动到中间。这里的动词“justify”指的是typographer/designer lingo，其中justification 表示与页面边缘对齐。

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

运行时，我们发现我们的登录表单出现在我们更大的网络浏览器窗口的中心。注意橙色边框显示我们的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.

    

---

警告：上面显示的这段代码对于实际登录工作来说还远远不够。这里的重点是小部件布局，而不是用户身份验证。