Java 如何在 Horizo​​ntalPanel (GWT) 上右对齐按钮

How to right align buttons on a HorizontalPanel (GWT)

提问by Keox

I am trying to implement a simple dialog. I would like to have OK and cancel buttons aligned right at the bottom of the dialog. I embed the buttons into the HorizontalPanel and try to set horizontal alignment to RIGHT. However, this does not work. How to make the buttons align right? Thank you. Here's the snippet:

我正在尝试实现一个简单的对话框。我希望在对话框底部正确对齐“确定”和“取消”按钮。我将按钮嵌入到 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;
}

采纳答案by zmila

The point is to call setHorizontalAlignmentbeforeadding your buttons as shown below:

关键是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);

If you want your buttons to be tight together - put them both into some new container, and them put the container inside the right-alighned HorizontalPanel

如果您希望您的按钮紧密结合 - 将它们都放入一些新容器中，然后将容器放入右对齐的 Horizo​​ntalPanel 中

回答by Drewen

Try to add the buttons first and then call hp.setHorizontalAlignment("your aligment here").

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

Good luck!

祝你好运！

回答by bikesandcode

You might want to use Firebug to checkout the extents of the HorizontalPanel itself. You might need a

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

hp.setWidth("100%");

The HorizontalPanel generally sizes itself to the contents, so if you put a couple of buttons in it it will be left aligned as the table itself does not expand.

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

回答by Keox

I have found an example for aligning the buttons: http://gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

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

回答by Matt Moriarity

You could also use setCellHorizontalAlignmenton the panel that contains the HorizontalPanel. That's what I do.

您也可以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);

回答by Peter Wagener

Adding one more tip to this thread: if you're using UiBinder to lay out your panels, you'll have trouble figuring out how to set the alignment property prior to adding any widgets to the panel. Additionally, using the bean attribute directly on the panel, like ...

向该主题再添加一个提示：如果您使用 UiBinder 来布置面板，在向面板添加任何小部件之前，您将无法弄清楚如何设置对齐属性。此外，直接在面板上使用 bean 属性，例如...

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

... does not work. The trick? Wrap any children of a DockPanel, HorizontalPanel, or VerticalPanel that you need to set alignment on in a <g:cell>element:

...不起作用。诀窍？包装您需要在<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>

Note that in most cases you'll likely need to set the "width" as well as the alignment if your using this on a horizontal panel, and vice versa. See the Javadoc for CellPanelfor the details.

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

回答by mrbang

Here is an other example using UIBinder that should work:

这是使用 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>

回答by aab10

Quite late to answer but just want to mention for record that setting width is important (as bikesandcode has already suggested above) otherwise it may not work.

回答很晚，但只想提及设置宽度很重要（如上面的自行车和代码已经建议），否则它可能无法正常工作。

Following worked for me,

以下为我工作，

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

回答by Alex

For UIBinder users, I want to extend @Peter Wagener's answer a little bit more.

对于 UIBinder 用户，我想进一步扩展@Peter Wagener 的回答。

As @Peter Wagener said, the following does not work.(I believe this is a bug.)

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

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

Here I provided an example to work around (multiple buttons).

在这里，我提供了一个示例来解决（多个按钮）。

<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>

NOTE:

笔记：

1. The first cell should have large enough width.
2. Don't assign any width to the rest cells, so that there will be no gap between the first and second button.

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

回答by Arash moradabadi

Best way to make the controls align to right or left is to write two lines of CSS as follows:

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

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

and then assign them to the control as follows:

然后将它们分配给控件，如下所示：

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