在Vaadin Flow中布局内的中心小部件 [英] Center widgets within a layout in Vaadin Flow

问题描述

当我在另一个布局中的小控件(例如LoginLayout)出现在更大的窗口中时，如何使内容居中?我希望内容相对于宽度和高度大约出现在窗口的中间.

When I have small widget such as a LoginLayout within another layout appearing in a much larger window, how can I center the content? I want the content to appear approximately in the middle of the window with respect to both width and height.

我发现了与此主题相关的旧问题，例如 this 和 Vaadin (版本6、7、8)在Flow(版本10+，现在为14)之前.

I found older Questions on this topic such as this and this, but they are for the previous generation of Vaadin (versions 6, 7, 8) before Flow (versions 10+, now 14).

推荐答案

HorizontalLayout与CSS3 Flexbox

从前的可信赖的 HorizontalLayout和VerticalLayout类仍然存在在Vaadin 14中.这对类已经过改装，可以使用 Flexbox 技术，该技术在 CSS3 .在 CSS-Tricks.com 上查看有关Flexbox的出色教程.和 Mozilla . CSS3 Flexbox在概念上非常接近经典Vaadin HorizontalLayout和VerticalLayout的行为.

HorizontalLayout with CSS3 Flexbox

The trusty HorizontalLayout and VerticalLayout classes from olden days are still in Vaadin 14. This pair of classes have been retrofitted to use modern Flexbox technology found in CSS3. See excellent tutorials on Flexbox at CSS-Tricks.com and at Mozilla. CSS3 Flexbox is very close conceptually to the behavior of classic Vaadin HorizontalLayout and VerticalLayout.

在下面的示例中，我们以Vaadin

In this example below we start with a Vaadin HorizontalLayout.

final public class AuthenticateView extends HorizontalLayout

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

In the constructor, add your widget to the layout, a LoginForm being the widget in this example.

this.add ( new LoginForm() );

使HorizontalLayout可以使用所有可用的空间，包括宽度和高度.

Make the HorizontalLayout to use all the available room with regards to both the width and the height.

this.setSizeFull ();

在布局(我们的LoginForm)中设置我们的内容，使其水平移动到中间.动词"justify"在这里是指 typographer/designer lingo ，其中称义是指与页面的页边空白.

Set our content in the layout (our LoginForm) to move to the middle horizontally across. The verb "justify" here refers to typographer/designer lingo where justification means alignment to the margin of the page.

this.setJustifyContentMode ( FlexComponent.JustifyContentMode.CENTER );

最后，我们可以指定内容在我们现在很高的布局中垂直显示的位置.我们要在顶部，底部还是中间放置内容?

Lastly, we can specify where our content should appear vertically within our now-very-tall layout. Do we want content at the top, at the bottom, or in the middle?

请注意此处与Vaadin 8代产生的语法差异:术语

Notice the difference in syntax here from the Vaadin 8 generation: The term FlexComponent reflects the use of CSS Flexbox.

this.setDefaultVerticalComponentAlignment ( FlexComponent.Alignment.CENTER );

奖励功能:让我们通过着色HorizontalLayout否则不可见的边缘来可视地验证HorizontalLayout的行为.

Bonus feature: Let's verify visually the behavior of our HorizontalLayout by coloring its otherwise invisible edges.

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

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

Set this view to be default via the @Route annotation.

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

运行时，我们发现登录表单显示在更大的Web浏览器窗口中.注意，橙色边框显示了HorizontalLayout如何逐渐占据整个窗口.

When run we find our login form appearing centered within our much bigger web browser window. Notice the orange border showing how our HorizontalLayout has grown to take the entire window.

为了娱乐，请尝试禁用此处显示的各行代码.运行应用程序，注意LoginForm和橙色边框的位置，以查看代码对行为的影响.

For fun, try disabling the various lines of code shown here. Run the app to see the impact the code has on behavior by noticing the placement of the LoginForm and the orange border.

这是完整的类代码.

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.

    }
}

---

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

---

Caveat: This code shown above is nowhere near sufficient for real-world login work. The focus here was on widget layout, not user authentication.

这篇关于在Vaadin Flow中布局内的中心小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！