在Vaadin Flow中的布局内居中放置小部件

Question

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

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

Answer 1

HorizontalLayout与CSS3 Flexbox

从前，值得信赖的HorizontalLayout and VerticalLayout classes仍在Vaadin 14中。这对类已经过改装，以使用Flexbox中使用的现代CSS3技术。参见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

运行时，我们发现登录表单显示在更大的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.

    }
}

---

注意：上面显示的代码远不足以进行实际的登录工作。这里的重点是窗口小部件的布局，而不是用户身份验证。