如何右键对齐Horizo​​ntalPanel（GWT）上的按钮

Question

我正在尝试实现一个简单的对话框。我想要确定并取消对话框底部对齐的按钮。我将按钮嵌入Horizo​​ntalPanel并尝试将水平对齐设置为RIGHT。但是，这不起作用。如何使按钮对齐？谢谢。 这是片段：

private Widget createButtonsPanel() {
    HorizontalPanel hp = new HorizontalPanel();
    hp.setCellHorizontalAlignment(saveButton, HasHorizontalAlignment.ALIGN_RIGHT);
    hp.setCellHorizontalAlignment(cancelButton, HasHorizontalAlignment.ALIGN_RIGHT);
    hp.add(saveButton);
    hp.add(cancelButton);       

    return hp;
}

Answer 1

关键是在添加按钮之前致电setHorizontalAlignment ，如下所示：

final HorizontalPanel hp = new HorizontalPanel();
final Button saveButton = new Button("save");
final Button cancelButton = new Button("cancel");

// just to see the bounds of the HorizontalPanel
hp.setWidth("600px");
hp.setBorderWidth(2);

// It only applies to widgets added after this property is set.
hp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);

hp.add(saveButton);
hp.add(cancelButton);

RootPanel.get().add(hp);

如果你想让你的按钮紧密在一起 - 把它们放在一个新容器中，然后将容器放在右边的水平面板中

Answer 2

在此主题中添加一个提示：如果您使用UiBinder布局面板，则在向面板添加任何小部件之前，您将无法确定如何设置对齐属性。另外，直接在面板上使用bean属性，比如......

<g:HorizontalPanel horizontalAlignment="ALIGN_RIGHT">
    ....
</g:HorizontalPanel>

......不起作用。诀窍？在<g:cell>元素中包装需要设置对齐的DockPanel，Horizo​​ntalPanel或VerticalPanel的所有子项：

<g:HorizontalPanel>
    <g:cell width="800px" horizontalAlignment="ALIGN_RIGHT">
        <g:Button ui:field="closeButton" text="Close" />
    </g:cell>
</g:HorizontalPanel>

请注意，在大多数情况下，如果您在水平面板上使用此功能，则可能需要设置“宽度”和对齐，反之亦然。有关详细信息，请参阅Javadoc for CellPanel。

Answer 3

以下是使用UIBinder的另一个例子：

<g:VerticalPanel>
 <g:HorizontalPanel width="100%">
  <g:cell horizontalAlignment="ALIGN_RIGHT" width="100%">
   <g:Button ui:field="cancelButton" text="Cancel"/>
  </g:cell>
  <g:cell horizontalAlignment="ALIGN_RIGHT">
   <g:Button ui:field="okButton" text="Ok"/>
  </g:cell>
 </g:HorizontalPanel>
</g:VerticalPanel>

Answer 4

您可能希望使用Firebug签出Horizo​​ntalPanel本身的范围。你可能需要一个

hp.setWidth("100%");

Horizo​​ntalPanel通常根据内容调整其大小，因此如果您在其中放入几个按钮，它将保持对齐，因为表本身不会展开。

Answer 5

您还可以在包含setCellHorizontalAlignment的面板上使用HorizontalPanel。这就是我的工作。

// doesn't necessarily have to be a vertical panel
VerticalPanel container = new VerticalPanel();
HorizontalPanel buttons = new HorizontalPanel();
// add the buttons
container.add(buttons);
container.setCellHorizontalAlignment(buttons, HasHorizontalAlignment.ALIGN_RIGHT);

Answer 6

使控件向右或向左对齐的最佳方法是编写两行CSS，如下所示：

.buttonToRight {
    float: right;
    right: 100%;
}

然后按如下方式将它们分配给控件：

HorizontalPanel hpButtons = new HorizontalPanel();
hpButtons.addStyleName("buttonToRight");

Answer 7

我找到了一个对齐按钮的示例：http://gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

Answer 8

很晚才回答但只是想提一下设置宽度很重要（正如bikesandcode已经在上面建议的那样），否则它可能无效。

以下为我工作，

<g:HorizontalPanel width="100%">
   <g:cell horizontalAlignment="ALIGN_RIGHT">
      <g:Button ui:field="buttonOK" text="OK"/>
   </g:cell>
</g:HorizontalPanel>

Answer 9

对于UIBinder用户，我想更多地扩展@Peter Wagener的答案。

正如@Peter Wagener所说，以下情况不起作用。（我相信这是一个错误。）

<g:HorizontalPanel horizontalAlignment="ALIGN_RIGHT">
    ....
</g:HorizontalPanel>

这里我提供了一个解决方案的示例（多个按钮）。

<g:HorizontalPanel>
    <g:cell width="800px" horizontalAlignment="ALIGN_RIGHT">
        <g:Button ui:field="saveButton" text="Save" />
    </g:cell>
    <g:cell horizontalAlignment="ALIGN_RIGHT">
        <g:Button ui:field="closeButton" text="Close" />
    </g:cell>
</g:HorizontalPanel>

注意：

1. 第一个单元格应该有足够大的宽度。
2. 不要为其余单元格指定任何宽度，以便第一个和第二个按钮之间没有间隙。

Answer 10

首先尝试添加按钮，然后调用hp.setHorizontalAlignment("your aligment here")。

祝你好运！