熟悉layout线性布局和IOS苹果View视图

YYPOST群发软件 · 发表于 3 天前

线性布局是垂直或者水平布局类似网格
水平布局
比如就是一行可以放多个控件
文本框：
按钮:
单选框:
复选框
类似上面这样一行可以放多个控件的就是水平布局
垂直布局
就是一行只能放一个元素
文本框
按钮
单选
复选
混合布局，就是水平和垂直嵌套就可以实现复杂的界面
例如一个登录界面，先创建一个垂直布局，每个垂直布局的每一行再放一个水平布局
用户名
————————
密码
————————
取消
登录
这样就是一个垂直布局 + 3个水平布局组成了一个符合页面

IOSView 视图使用指南

1. 创建视图

用于创建一个基本的视图，该视图可以作为画板用于绘制UI。

var vc = new IOSView();

2. 显示视图 `show()`

用于显示UI界面，并在页面加载完成后执行回调函数。
方法定义:

function show(function fun)

参数:

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)

参数:

view: 要添加的UI控件
示例:

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);
});