GWT StackLayoutPanel

2025年3月17日 | 阅读 3 分钟

在 GWT StackLayoutPanel 中，一次只垂直显示一个子项。所有其他子部件创建它们的标题并排列在面板的底部。我们可以通过点击它们的标题来查看子部件。

GWT StackLayoutPanel 类声明

让我们看看com.google.gwt.user.client.ui.StackLayoutPanel的声明

GWT StackLayoutPanel 构造函数

构造函数	描述
StackLayoutPanel(Style.Unit unit)	它创建一个空的堆叠面板。

StackLayoutPanel 常用方法

修饰符和类型	方法	描述
void	add(IsWidget widget, IsWidget header, double headerSize)	这是 IsWidget 的重载版本。
void	add(Widget widget, SafeHtml header, double headerSize)	它将一个子部件添加到此堆栈中，以及一个表示堆栈标题的部件。
void	add(Widget widget, java.lang.String header, boolean asHtml, double headerSize)	它将一个子部件添加到此堆栈中，以及一个表示堆栈标题的部件。
HandlerRegistration	addBeforeSelectionHandler(BeforeSelectionHandler<java.lang.Integer> handler)	它添加一个 BeforeSelectionEvent 处理程序。
HandlerRegistration	addSelectionHandler(SelectionHandler<java.lang.Integer> handler)	它添加一个 SelectionEvent 处理程序。
void	animate(int duration)	其布局子项，在指定的时间段内进行动画。
void	clear()	它删除所有子部件。
void	forceLayout()	它立即布局子项。
widget	getHeaderWidget(int index)	它获取给定索引处堆栈标题中的部件。
widget	getHeaderWidget(Widget child)	它获取与给定子部件关联的堆栈标题中的部件。
void	insert(Widget child, SafeHtml html, double headerSize, int beforeIndex)	它将一个部件插入到面板中。
void	insert(Widget child, java.lang.String text, boolean asHtml, double headerSize, int beforeIndex)	它将一个部件插入到面板中。
void	setHeaderHTML(int index, java.lang.String html)	它设置堆栈标题的 HTML 内容。
void	setHeaderText(int index, java.lang.String text)	它设置堆栈标题的文本内容。
void	showWidget(Widget child)	它显示指定的部件并触发事件。
void	showWidget(Widget child, boolean fireEvents)	它显示指定的部件。

GWT StackLayoutPanel 示例 1

//SampleStackLayoutPanel.java

import com.google.gwt.core.client.EntryPoint;  
import com.google.gwt.user.client.ui.RootPanel;  
import com.gwtext.client.core.EventObject;  
import com.gwtext.client.widgets.Button;  
import com.gwtext.client.widgets.Panel;  
import com.gwtext.client.widgets.Window;  
import com.gwtext.client.widgets.event.ButtonListenerAdapter;  
import com.gwtext.client.widgets.layout.AccordionLayout;  
import com.gwtext.client.widgets.layout.HorizontalLayout;  
  
/*This is the entry point method. */

 public void onModuleLoad() {

 // Create a three-item stack, with headers sized in EMs.

 StackLayoutPanel p = new StackLayoutPanel(Unit.EM); 
p.add(new HTML("First"), new HTML("[this]"), 4); 
p.add(new HTML("Second"), new HTML("[that]"), 4);
 p.add(new HTML("Many more"), new HTML("[Many more]"), 4); 

// Attach the StackLayoutPanelto the RootLayoutPanel.

 RootLayoutPanel rp = RootLayoutPanel.get(); 
rp.add(p); 

}

输出

GWT StackLayoutPanel 示例 2

//SampleStackLayoutPanel.java

  
import com.google.gwt.core.client.EntryPoint;  
import com.google.gwt.user.client.ui.RootPanel;  
import com.gwtext.client.core.EventObject;  
import com.gwtext.client.widgets.Button;  
import com.gwtext.client.widgets.Panel;  
import com.gwtext.client.widgets.Window;  
import com.gwtext.client.widgets.event.ButtonListenerAdapter;  
import com.gwtext.client.widgets.layout.AccordionLayout;  
import com.gwtext.client.widgets.layout.HorizontalLayout;  
  
public class StackLayoutSample implements EntryPoint {  
  
    public void onModuleLoad() {  
        Panel panel = new Panel();  
        panel.setBorder(false);  
        panel.setPaddings(15);  
  
        panel.setLayout(new HorizontalLayout(15));  
  
        Panel accordionPanel = createAccordionPanel();  
        accordionPanel.setTitle("Accordion Panel");  
        accordionPanel.setHeight(400);  
        accordionPanel.setWidth(200);  
  
        Button button = new Button("Show Accordion in Window", new ButtonListenerAdapter() {  
            public void onClick(Button button, EventObject e) {  
                Panel accordionPanel = createAccordionPanel();  
                Window window = new Window();  
                window.setTitle("Accordion Window");  
                window.setWidth(200);  
                window.setHeight(400);  
                window.add(accordionPanel);  
                window.show(button.getId());  
            }  
        });  
  
        panel.add(accordionPanel);  
        panel.add(button);  
  
        RootPanel.get().add(panel);  
    }  
  
    private Panel createAccordionPanel() {  
        Panel accordionPanel = new Panel();  
        accordionPanel.setLayout(new AccordionLayout(true));  
  
        Panel panelOne = new Panel("Panel 1", "<p>Panel1 content!</p>");  
        panelOne.setIconCls("settings-icon");  
        accordionPanel.add(panelOne);  
  
        Panel panelTwo = new Panel("Panel 2", "<p>Panel2 content!</p>");  
        panelTwo.setIconCls("folder-icon");  
        accordionPanel.add(panelTwo);  
  
        Panel panelThree = new Panel("Panel 3", "<p>Panel3 content!</p>");  
        panelThree.setIconCls("user-add-icon");  
        accordionPanel.add(panelThree);  
  
        return accordionPanel;  
    }  
}  

//SampleStackLayoutPanel.css

  
import com.google.gwt.core.client.EntryPoint;  
import com.google.gwt.user.client.ui.RootPanel;  
import com.gwtext.client.core.EventObject;  
import com.gwtext.client.widgets.Button;  
import com.gwtext.client.widgets.Panel;  
import com.gwtext.client.widgets.Window;  
import com.gwtext.client.widgets.event.ButtonListenerAdapter;  
import com.gwtext.client.widgets.layout.AccordionLayout;  
import com.gwtext.client.widgets.layout.HorizontalLayout;  
  
public class StackLayoutSample implements EntryPoint {  
  
    public void onModuleLoad() {  
        Panel panel = new Panel();  
        panel.setBorder(false);  
        panel.setPaddings(15);  
  
        panel.setLayout(new HorizontalLayout(15));  
  
        Panel accordionPanel = createAccordionPanel();  
        accordionPanel.setTitle("Accordion Panel");  
        accordionPanel.setHeight(400);  
        accordionPanel.setWidth(200);  
  
        Button button = new Button("Show Accordion in Window", new ButtonListenerAdapter() {  
            public void onClick(Button button, EventObject e) {  
                Panel accordionPanel = createAccordionPanel();  
                Window window = new Window();  
                window.setTitle("Accordion Window");  
                window.setWidth(200);  
                window.setHeight(400);  
                window.add(accordionPanel);  
                window.show(button.getId());  
            }  
        });  
  
        panel.add(accordionPanel);  
        panel.add(button);  
  
        RootPanel.get().add(panel);  
    }  
  
    private Panel createAccordionPanel() {  
        Panel accordionPanel = new Panel();  
        accordionPanel.setLayout(new AccordionLayout(true));  
  
        Panel panelOne = new Panel("Panel 1", "<p>Panel1 content!</p>");  
        panelOne.setIconCls("settings-icon");  
        accordionPanel.add(panelOne);  
  
        Panel panelTwo = new Panel("Panel 2", "<p>Panel2 content!</p>");  
        panelTwo.setIconCls("folder-icon");  
        accordionPanel.add(panelTwo);  
  
        Panel panelThree = new Panel("Panel 3", "<p>Panel3 content!</p>");  
        panelThree.setIconCls("user-add-icon");  
        accordionPanel.add(panelThree);  
  
        return accordionPanel;  
    }  
}  

输出