使用GWT小部件在中間進行按鈕調整

Question

我正在制作GWT Web應用程序。 下面是使用添加到面板中的GWT Button小部件制作的后退和下一個按鈕。 我希望這些按鈕顯示為最右側的背面，然后顯示為最左側的背面，或者顯示為中間的這兩個按鈕。 請幫助我進行相應調整。 謝謝。

這是我的移動View Java代碼，其中包括這些按鈕。

Java代碼：

package com.zrsol.cricsite.client.view.widget;

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.googlecode.mgwt.ui.client.widget.panel.flex.FlexPanel;
import com.zrsol.cricsite.client.view.TeamConstants;

public class TopBatsmenView extends Composite{

    private VerticalPanel vpnlBatsmenList = new VerticalPanel();
    private Button btnNext = new Button("Next");
    private Button btnBack = new Button("Back");
    private HorizontalPanel hpnlPagerBatsmen = new HorizontalPanel();


    public TopBatsmenView(){
        FlexPanel fpnlBatsmenList = new FlexPanel();
//      initWidget(vpnlBatsmenList);
        initWidget(fpnlBatsmenList);
        Label lblBatsmenHeading = new Label(TeamConstants.TOPBATSMENHEADING);
        lblBatsmenHeading.setStyleName("bgBlack");
        fpnlBatsmenList.add(lblBatsmenHeading);
        fpnlBatsmenList.add(vpnlBatsmenList);
        hpnlPagerBatsmen.add(btnBack);
        hpnlPagerBatsmen.add(btnNext);
        hpnlPagerBatsmen.setWidth("100%");
        btnNext.setWidth("40%");
        btnBack.setWidth("40%");
        hpnlPagerBatsmen.setHorizontalAlignment(HorizontalPanel.ALIGN_CENTER);
//      hpnlPagerBatsmen.setSpacing(2);
        fpnlBatsmenList.add(hpnlPagerBatsmen);
    }

    public Button getBtnNext() {
        return btnNext;
    }

    public void setBtnNext(Button btnNext) {
        this.btnNext = btnNext;
    }

    public Button getBtnBack() {
        return btnBack;
    }

    public void setBtnBack(Button btnBack) {
        this.btnBack = btnBack;
    }

    public VerticalPanel getVpnlBatsmenList() {
        return vpnlBatsmenList;
    }

    public void setVpnlBatsmenList(VerticalPanel vpnlBatsmenList) {
        this.vpnlBatsmenList = vpnlBatsmenList;
    }

    public HorizontalPanel getHpnlPagerBatsmen() {
        return hpnlPagerBatsmen;
    }

    public void setHpnlPagerBatsmen(HorizontalPanel hpnlPagerBatsmen) {
        this.hpnlPagerBatsmen = hpnlPagerBatsmen;
    }

}

Answer 1

您可以嘗試致電

hpnlPagerBatsmen.setHorizontalAlignment(HorizontalPanel.ALIGN_CENTER);

在添加按鈕或使用之前

hpnlPagerBatsmen.setCellHorizontalAlignment(bntBack, HasHorizontalAlignment.ALIGN_CENTER); hpnlPagerBatsmen.setCellHorizontalAlignment(bntNext, HasHorizontalAlignment.ALIGN_CENTER);

添加按鈕后。

希望能有所幫助。

Answer 2

無需將MGWT布局模型（基於flex-box模型）和GWT布局面板混合使用，因為您失去了flex-box模型的所有優點。

使您的尋呼機成為FlexPanel：

FlexPanel pager = new FlexPanel();
pager.setOrientation(Orientation.HORIZONTAL);
pager.setFlex(0);
pager.add(btnBack);
pager.add(new FlexSpacer());
pager.add(btnNext);

就是這樣-您的布局沒有表格，百分比等。而且非常流暢-可以在所有屏幕上使用。

注意：您不應該在中心區域使用VerticalPanel，而應該使用另一個FlexPanel-它會占用所有可用空間。 另外，您不需要擴展Composite，而可以擴展FlexPanel（或RootFlexPanel）。