GEE学习笔记二十四：Panel和root介绍

日期:2024-05-13

今天说一下组件中的Panel组件和root组件。

Panel组件顾名思义可以作为其它组件的父容器使用，这在做GEE的APP时候非常有用。

API的方法：

各个方法简介：

构造方法 ui.Panel(widgets, layout, style)

widgets：需要添加到Panel上的组件，比如按钮（button）、文本（label）等

layout：布局有流布局（flow）和绝对布局（absolute）

style：设置panel的样式

add(widgets) 添加组件到panel上
clear() 清除组件
getLayout() 获取布局
insert(index, widget) 插入组件
remove(widget) 移除组件
setLayout(layout) 设置布局
style()

设置样式，可以设置的参数包括如下，一般实际使用只需要设置宽度。

Returns the widget's style ActiveDictionary, which can be modified to update the widget's styles.
Properties which behave like their CSS counterparts:
- height, maxHeight, minHeight (e.g. '100px’)   高度、最大高度、最小高度
- width, maxWidth, minWidth (e.g. '100px’) 宽度、最大宽度、最小宽度
- padding, margin (e.g. '4px 4px 4px 4px' or simply '4px’) 页边
- color, backgroundColor (e.g. 'red' or '#FF0000’) 颜色、背景色
- border (e.g. '1px solid black’) 边界宽度
- fontSize (e.g. '24px’) 字体大小
- fontWeight (e.g. 'bold' or '100’) 字体宽度，加粗
- textAlign (e.g. 'left' or 'center’) 文本对齐方式
- shown (true or false) 是否显示
Supported custom layout properties (see ui.Panel.Layout documentation):
- stretch ('horizontal', 'vertical', 'both’) 布局：水平、垂直、两者
       - position ('top-right', 'top-center', 'top-left', 'bottom-right', …) 位置

widgets() 获取组件列表

例子：

1.普通例子：

//demo01
var panel = ui.Panel();
panel.style().set('width', '350px');
//label
var title_label = ui.Label({
 value: "Show Demo",
 style: {fontSize:'24px', color:'#ff00ff', fontWeight:'bold'}
});
panel.add(title_label);
//button
var btn = ui.Button("button1");
btn.onClick(function() {
 print("click button1");
});
panel.add(btn);
ui.root.insert(0, panel);

显示结果：

2.clear方法例子：

//demo02
var panel = ui.Panel();
panel.style().set('width', '350px');
//label
var title_label = ui.Label({
 value: "Demo 02",
 style: {fontSize:'24px', color:'#ff00ff', fontWeight:'bold'}
});
panel.add(title_label);
//button
var btn = ui.Button("button1");
btn.onClick(function() {
 print("click button1");
});
panel.add(btn);
//清理所有的组件
panel.clear();
ui.root.insert(0, panel);

显示结果：

3.insert插入方法例子

//demo03
var panel = ui.Panel();
panel.style().set('width', '350px');
//label
var title_label = ui.Label({
 value: "Demo 03",
 style: {fontSize:'24px', color:'#ff00ff', fontWeight:'bold'}
});
panel.add(title_label);
//button
var btn = ui.Button("button1");
btn.onClick(function() {
 print("click button1");
});
//将btn插入到lable上面
panel.insert(0, btn);
ui.root.insert(0, panel);

显示结果：

4.remove方法例子

//demo04
var panel = ui.Panel();
panel.style().set('width', '350px');
//label
var title_label = ui.Label({
 value: "Demo 04",
 style: {fontSize:'24px', color:'#ff00ff', fontWeight:'bold'}
});
panel.add(title_label);
//button
var btn = ui.Button("button1");
btn.onClick(function() {
 print("click button1");
});
panel.add(btn);
ui.root.insert(0, panel);
//移除添加的btn
panel.remove(btn);

显示结果：

5.布局layout例子

流布局flow，默认的flow方向是垂直（vetical），这里我们修改为水平（horizontal）

//demo05
var panel = ui.Panel();
panel.style().set('width', '350px');
//设置水平布局
panel.setLayout(ui.Panel.Layout.flow("horizontal"))
//label
var title_label = ui.Label({
 value: "Demo 05",
 style: {fontSize:'24px', color:'#ff00ff', fontWeight:'bold'}
});
panel.add(title_label);
//button
var btn = ui.Button("button1");
btn.onClick(function() {
 print("click button1");
});
panel.add(btn);
ui.root.insert(0, panel);

显示结果：

绝对布局absolute，设置组件在panel上的相对位置左上、上中、右上、左下、下中、右下。

//demo06
var panel = ui.Panel();
panel.style().set('width', '350px');
panel.setLayout(ui.Panel.Layout.absolute());
//label
var title_label = ui.Label({
 value: "Demo 06",
 style: {
   fontSize:'24px',
   color:'#ff00ff',
   fontWeight:'bold',
   position:'top-center'
 }
});
panel.add(title_label);
//button
var btn1 = ui.Button({
 label:"btn1",
 style:{position: "bottom-left"}
});
panel.add(btn1);
var btn2 = ui.Button({
 label:"btn1",
 style:{position: "bottom-center"}
});
panel.add(btn2);
var btn3 = ui.Button({
 label:"btn3",
 style:{position: "bottom-right"}
});
panel.add(btn3);
ui.root.insert(0, panel);

显示结果：

在demo06中调用 widgets()方法可以输出添加到panel上的widgets列表
print(panel.widgets())

显示结果：

root组件也称之为根组件（只有我这么称呼吧）。API的方法：

方法简介：

ui.root.add(widget) 添加组件到root层
ui.root.clear() 清除root层
ui.root.getLayout() 获取布局方式
ui.root.insert(index, widget) 插入组件可以设置组件层的高度，
ui.root.remove(widget) 移除组件
ui.root.setLayout(layout) 设置root的布局方式
ui.root.widgets() 获取root层上所有的组件

root可以理解为我们看到的工作区最底层的一个panel，其余所有的组件要想显示在界面上都需要添加到root上。比如在panel中的例子我们一直在将panel添加到root上，调用的方法就是insert方法。

默认进入工作区时候调用ui.root.widgets().get(0)这个方法返回值是ui.Map，也就是我们后续要讲的地图组件，在panel例子中我们使用insert方法改变了这个层级关系，将index=0层设置为了panel层。

GEE学习笔记 二十四：Panel和root介绍

GEE学习笔记二十四：Panel和root介绍