GWT SplitLayoutPanel

17 Mar 2025 | 阅读 2 分钟

GWT SplitLayoutPanel 类似于 GWT DockLayoutPanel， 只是它的子控件大小总是以绝对值指定。它的子控件之间有分隔条，帮助用户相应地拖动控件。

GWT SplitLayoutPanel 类声明

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

SplitLayoutPanel 嵌套类

Class	描述
SplitLayoutPanel.HSplitter	它水平分割面板。
SplitLayoutPanel.Splitter	它是通用的分隔条。
SplitLayoutPanel.VSplitter	它垂直分割面板。

GWT SplitLayoutPanel 构造函数

构造函数	描述
SplitLayoutPanel()	它构造一个新的 SplitLayoutPanel，默认分隔条大小为 8px。
SplitLayoutPanel(int splitterSize)	它构造一个新的 SplitLayoutPanel，分隔条大小以像素为单位指定。

SplitLayoutPanel 常用方法

修饰符和类型	方法	描述
int	getSplitterSize()	它以像素为单位返回分隔条的大小。
void	insert(Widget child, DockLayoutPanel.Direction direction, double size, Widget before)	它将一个控件添加到停靠区的指定边缘。
boolean	remove(Widget child)	它移除一个子控件。
void	setWidgetHidden(Widget widget, boolean hidden)	它设置是否应该隐藏给定的控件。
void	setWidgetMinSize(Widget child, int minSize)	它设置给定控件的最小允许大小。
void	setWidgetSnapClosedSize(Widget child, int snapClosedSize)	它设置一个大小，低于该大小滑块将完全关闭。
void	setWidgetToggleDisplayAllowed(Widget child, boolean allowed)	它设置是否允许双击分隔条来切换控件的显示。

GWT SplitLayoutPanel 示例

//SampleSplitLayoutPanel.java

import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.Window;

/*This is the entry point method. */

 public void onModuleLoad() { 

// Create a two-pane layout with splitters. 

SplitLayoutPanel p = new SplitLayoutPanel(); 
p.addWest(new HTML("Navigation Tree"), 128); 

// Attach the LayoutPanel to the RootLayoutPanel. 

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

//SampleSplitLayoutPanel.css

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}
.dockpanel td {
   border: 1px solid #BBBBBB;
   padding: 3px;
}

输出