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

77

主题

190

回帖

856

积分

管理员

积分
856

线性布局是垂直或者水平布局类似网格

水平布局

比如就是一行可以放多个控件

文本框:

按钮:

单选框:

复选框

类似上面这样一行可以放多个控件的就是水平布局

垂直布局

就是一行只能放一个元素

文本框

按钮

单选

复选

混合布局,就是水平和垂直嵌套就可以实现复杂的界面

例如一个登录界面,先创建一个垂直布局 ,每个垂直布局的每一行再放一个水平布局

用户名

————————

密码

————————

取消

登录

这样就是一个垂直布局 + 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);
});

举报 回复