各个方法简介:
构造方法 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()
设置样式,可以设置的参数包括如下,一般实际使用只需要设置宽度。
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);