Question

如何将LayoutPanel放置在父LayoutPanel（RootLayoutPanel，屏幕，浏览器页面）的中间位置？假设内部面板具有固定尺寸，外部面板是灵活的并且调整大小（使用浏览器窗口）。

在Vaadin中，它是一行命令：
(VerticalLayout)outerPane).setComponentAlignment(innerPane, Alignment.MIDDLE_CENTER);

什么是GWT等价物？
GWT Layout.Alignment枚举仅提供BEGIN END STRETCH 不足。屏幕居中放置对于显示较小的表单，对话框，警告消息，登录屏幕等至关重要。

---更新（27.2.2012）---------------

使用建议的技术 - 使用setWidgetLeftRight（）和setWidgetTopBottom（） - 我需要计算内部组件相对于外部组件的NW位置（x，y），并在每次调整外部容器或内部容器的大小后执行此操作（内容高度）。

因此，如果GWT不支持居中，并且似乎即使在最新版本中它也没有，也会涉及更多编码：

outerComponent.setWidgetLeftRight(innerComponent, x, PX, x, PX);
outerComponent.setWidgetTopBottom(innerComponent, y, PX, y, PX);

x，y计算如下：
x =（w1-w2）/ 2
y =（h1-h2）/ 2
其中：
w1 - 外部元件宽度（可变，易于获得？）
h1 - 外部元件高度（可变，易于获得？）
w2 - 内部中心部件宽度（固定）
h2 - 内部中心组件高度（可变，取决于内容，可能难以获得）

全部优选为像素（PX？）或EM。与％混合时，必须进行更多转换。

每次调整大小事件时都必须重新计算坐标（w1，h1更改）。

随着内部内容的每次更改，必须重新计算坐标（h2变化）。

这是伪装的绝对布局（AbsolutePanel）

CSS解决方案？我在这台服务器上找到了几个例子，但都没有标记为已解决。没有垂直和水平定心以及灵活的内部组件高度。

为什么我不喜欢基于CSS的布局解决方案：

容易跨浏览器问题。 GWT在这里没有帮助你。
我认为在代码和CSS中混合布局是一个糟糕的设计决策。 CSS最好留给“装饰”声明（字体大小和颜色，边距，填充）。
我自己对CSS布局的不良体验;你把所有东西放在一起之前很容易破解，难以调试，很多麻烦。最好避免。我对GWT寄予厚望。

我在考虑这个基于代码的解决方案：

Widget的新子类？面板？布局？零件？（内部组件）
实现RequiresResize expect，实现onResize（）回调方法
获取变量维度的实际值（w1，h1，h2）。怎么样？
设置内部组件的新坐标。怎么样？

根据这些前提提供解决方案的任何人的要点：）

Answer 1

您可以使用VerticalPanel并设置HorizontalAlignment字段，或者如果您想使用LayoutPanels，您可以调整您在Google群组中发布的GWT文档中的解决方案线程。

LayoutPanel p = new LayoutPanel(); 
Widget centercontent;
p.add(centercontent);
p.setWidgetLeftRight(centercontent, 5, EM, 5, EM);     // Center panel 
p.setWidgetTopBottom(centercontent, 5, EM, 5, EM);

这将创建一个中心面板，其下方有5个边距，右边，顶部和底部，如下图所示（只有中间的白色面板可见）。 EM是一个类似于像素的固定大小，但取决于基本字体大小。如果基本字体大小（为您的身体定义的字体大小）设置为16像素，则为1 EM = 16 px（有关转化信息，请参阅here）。

enter image description here

您还可以使用边距的相对值：

p.setWidgetLeftRight(centercontent, 5, PCT, 5, PCT);     //5 % left and right margin
p.setWidgetTopBottom(centercontent, 5, PCT, 5, PCT);     // 5 % top and bottom margin.

然而，通过这种方式，您无法完全解决问题（不同的表单大小 - 请参阅google主题中的屏幕截图），因为中心面板始终具有固定的边距（5 EM或5％），与垂直尺寸无关中心小组。
此外，如果中心面板的内容高于可用的屏幕尺寸，则会对其进行裁剪，并在调整浏览器大小时调整其大小。

所以我认为更好的方法是在LayoutPanel中放置FlowPanel / HTMLPanel并应用CSS样式以允许自然调整大小。

Answer 2

如果您将ResizeListener添加到中心面板（我不确定这是否有效，将立即尝试），该怎么办？基本上，每当窗口调整大小时，面板就会居中（通过计算它相对于其父级高度的高度）。

修改

我最终通过让我的面板实现ResizeHandler并获得以下内容来获得我想要的内容：

@Override public void onResize(ResizeEvent event) {

    // for my case, this is the first parent element with the full height.
    Widget parent = getParent().getParent();
    int height = parent.getOffsetHeight();

    // could make this more exact by including height of this panel.
    getElement().getStyle().setPaddingTop((int)((height - 80)/2), Unit.PX);
}

// my panel is not initially visible
@Override public void onAttach() { 
    super.onAttach();
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
        @Override public void execute() {
            onResize(null);
        }
    });
}

GWT LayoutPanels中的中间对齐（Alignment.MIDDLE_CENTER等价物）

2 个答案:

修改