线性布局是垂直或者水平布局类似网格
水平布局
比如就是一行可以放多个控件
类似上面这样一行可以放多个控件的就是水平布局
垂直布局
就是一行只能放一个元素
混合布局,就是水平和垂直嵌套就可以实现复杂的界面
例如一个登录界面,先创建一个垂直布局 ,每个垂直布局的每一行再放一个水平布局
用户名 | ———————— |
密码 | ———————— |
取消 | 登录 |
这样就是一个垂直布局 + 3个水平布局组成了一个符合页面
IOSView 视图使用指南
1. 创建视图
用于创建一个基本的视图,该视图可以作为画板用于绘制UI。
var vc = new IOSView();
2. 显示视图 show()
用于显示UI界面,并在页面加载完成后执行回调函数。
方法定义:
function show(function fun)
参数:
var vc = new IOSView();
vc.show(() => {
printl("UI启动了");
});
3. 关闭视图 dismiss()
用于关闭当前显示的UI视图。
方法定义:
function dismiss()
示例:
var vc = new IOSView();
vc.show(() => {
var view = vc.getView();
var btn = new Button();
btn.setText("关闭");
btn.setColor(25, 10, 130);
btn.onClick(() => {
printl("按钮被点击了");
vc.dismiss();
});
view.addView(btn);
});
4. 添加子视图 addView()
用于将子视图添加到当前视图中。
方法定义:
function addView(View view)
参数:
var vc = new IOSView();
vc.show(() => {
var view = vc.getView();
var btn = new Button();
btn.setText("关闭");
view.addView(btn);
});
5. 获取当前视图 getView()
用于获取当前视图的实例。
方法定义:
function getView()
示例:
var vc = new IOSView();
vc.show(() => {
var view = vc.getView();
});
完整示例
// 创建视图
var vc = new IOSView();
// 显示视图
vc.show(() => {
// 获取当前视图
var view = vc.getView();
// 创建水平容器
var h = new Horizontal();
// 创建按钮
var btn = new Button();
btn.setColor(25, 10, 130);
// 设置按钮点击事件
btn.onClick(() => {
printl("按钮被点击了");
});
// 将按钮添加到水平容器
h.addView(btn);
// 将水平容器添加到视图
view.addView(h);
});