1

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

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

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

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

--- 更新 (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 期望，实现 onResize() 回调方法
  • 获得可变尺寸（w1，h1，h2）的实际值。如何？
  • 为内部组件设置新坐标。如何？

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

4

2 回答 2

1

好吧，您可以使用 aVerticalPanel并设置Horizo​​ntalAlignment字段，或者如果您想使用LayoutPanels，您可以调整您在 google groups 线程中发布的 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 像素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 线程中的屏幕截图），因为中心面板将始终具有固定的边距（5 EM 或 5 %），与中心面板的垂直大小无关.
此外，如果中心面板的内容高于可用的屏幕尺寸，则会被剪裁，并且会在您调整浏览器大小时调整大小。

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

于 2012-02-04T17:06:20.490 回答
0

如果您将 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);
        }
    });
}
于 2013-04-08T11:44:16.453 回答