Question

我正在制作一个GWT网络应用程序。下面是使用添加到面板中的GWT Button小部件制作的后退和下一个按钮。我希望这些按钮显示为最右侧的背面和最左侧的后侧或中间的这两个按钮。请帮助我相应地调整它。谢谢。

这是我的移动View Java Code，其中包含这些按钮。

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布局模型（基于弹性盒模型）和GWT布局面板，因为您将失去弹性盒模型的所有优点。

使您的寻呼机成为FlexPanel：

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

它就是这样 - 你的布局没有表格，百分比等等。它非常流畅 - 它可以在所有屏幕上运行。

注意：您应该使用另一个FlexPanel而不是将VerticalPanel用于您的中心区域 - 它将占用所有可用空间。此外，您不需要扩展Composite - 而是扩展FlexPanel（或RootFlexPanel）。

使用GWT小部件调整中间按钮

2 个答案: