如何右鍵對齊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>

請注意，在大多數情況下，如果在水平面板上使用此選項，則可能需要設置“寬度”和對齊，反之亦然。 有關詳細信息，請參閱CellPanel的Javadoc 。

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

您還可以在包含HorizontalPanel的面板上使用setCellHorizontalAlignment 。 我就是做這個的。

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

很晚才回答，但只是想提一下設置寬度很重要（如上面已經提到過bikesandcode），否則它可能無效。

以下為我工作，

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

Answer 8

我找到了一個對齊按鈕的示例： http ： //gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

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") 。

祝好運！