在 Vaadin 7 和 8 中,您通常使用其中一种Layout
实现来安排UI
子类中的小部件。例如,VerticalLayout
、HorizontalLayout
和GridLayout
。对于像素定位,使用AbsoluteLayout
. 当然,这些可以嵌套在另一个中。但是不要因为嵌套而疯狂,因为它可能会导致运行时的 HTML/CSS 过于复杂。
Panel
正如文档所说,该类是一个特殊的容器。它只包含一个组件,通常是另一个容器,例如Layout
. 其Panel
自身带有一个边框和一个显示其caption
属性的标题栏。这看起来像一个子窗口。
正如您所提到的, aPanel
支持滚动。但请记住,任何用 a 定义的网页Layout
显然也支持滚动。
这是一个完整的示例应用程序,显示TextField
了VerticalLayout
.
package com.basilbourque.example;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import javax.servlet.annotation.WebServlet;
import java.time.Instant;
/**
* This UI is the application entry point. A UI may either represent a browser window
* (or tab) or some part of an HTML page where a Vaadin application is embedded.
* <p>
* The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
* overridden to add component to the user interface and initialize non-component functionality.
*/
@Theme ( "mytheme" )
public class MyUI extends UI {
@Override
protected void init ( VaadinRequest vaadinRequest ) {
final VerticalLayout layout = new VerticalLayout();
for ( int i = 1 ; i <= 100 ; i++ ) {
TextField textField = new TextField( String.format( "%3d" , i ) );
textField.setWidth( 17 , Unit.EM ); // Widen the field to fully display our contents.
textField.setValue( Instant.now().toString() );
layout.addComponents( textField );
}
setContent( layout );
}
@WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
@VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
public static class MyUIServlet extends VaadinServlet {
}
}

至于您对嵌套VerticalLayout
和HorizontalLayout
导航面板、按钮/工具栏等的想法……
- Vaadin 7 & 8:绝对正确,而且是个好主意。有时 a
GridLayout
也很有意义。
- Vaadin 10:也可能是个好主意。或者您可能想探索使用新的 CSS3 功能flexbox和Grid Layout。
至于你的CssLayout
inside a问题Panel
,我也很少使用。我怀疑问题在于没有正确定义CssLayout
. 您没有发布详细信息和代码,因此我们只能推测。