GWT LayoutPanel 中的中间居中对齐（Alignment.MIDDLE_CENTER 等效）

Question

如何将LayoutPanel放置在父LayoutPanel（RootLayoutPanel、屏幕、浏览器页面）的中间中心？假设内部面板具有固定大小，则外部面板是灵活的并且可以调整大小（随着浏览器窗口）。

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

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

详细信息请参阅 我在 GWT 论坛上的帖子
谢谢

--- 更新（2012 年 2 月 27 日） ---------------

要使用建议的技术 - 使用 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 期望，实现 onResize() 回调方法
• 获取变量尺寸（w1、h1、h2）的实际值。如何？
• 为内部组件设置新坐标。如何？

指向基于这些前提提供解决方案的任何人:)

Answer 1

那么您可以使用 VerticalPanel 并设置 Horizo​​ntalAlignment 字段或者如果您想使用 LayoutPanels您可以调整您在 google groups thread 中发布的 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，如下所示（只有中间的白色面板可见）。 EM 是类似于像素的固定大小，但取决于基本字体大小。如果您的基本字体大小（为您的正文定义的字体大小）设置为 16 px，则 1 EM = 16 px （请参阅 此处了解转化信息）。

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

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 thread 中的屏幕截图）因为中心面板始终具有固定的边距（5 EM 或 5 %），与中心面板的垂直尺寸无关。
此外，如果中心面板的内容高于可用的屏幕尺寸，则中心面板的内容将被剪裁，并且当您调整浏览器大小时，中心面板的内容也会调整大小。

所以我认为更好的方法是将 FlowPanel/HTMLPanel 放入 LayoutPanel 中并应用 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);
        }
    });
}