AIWROK软件IOS苹果Ul-垂直容器[Vertical]方法小结 - 信息发布软件,b2b软件,广告发布软件

//方法小结，交流QQ群711841924

//第一个方法：addView添加子控件

var label = new Label();
label.setText("Hello World");

//第二个方法：removeView移除视图

var v = new Vertical();
v.removeView(0); // 移除第一个子控件

//第三个方法：clearAllViews清空所有视图

var v = new Vertical();
v.clearAllViews(); // 清空所有控件

//第四个方法：getViewCount 获取视图数量

var v = new Vertical();
int count = v.getViewCount(); // 获取子控件的数量

//第五个方法：setSpacing设置控件间隔

var v = new Vertical();
v.setSpacing(10); // 设置控件间隔为10

//第六个方法：setContainerSize设置容器大小

var v = new Vertical();
v.setContainerSize(400, 600); // 设置容器大小为400x600

//第七个方法：setBackgroundColor 设置背景颜色

var v = new Vertical();
v.setBackgroundColor(50, 100, 150); // 设置背景颜色

//第八个方法：setAlignment 设置对齐方式

var v = new Vertical();
v.setAlignment("center"); // 设置对齐方式为居中
/*
可选值如下：
- fill: 填充对齐
- left: 左对齐
- right: 右对齐
- top: 顶部对齐
- bottom: 底部对齐
- center: 居中对齐
默认值为 fill。
*/

📌addView添加子控件

类别	详情说明
方法功能	向容器中添加一个子控件，多个控件会排列到一列当中
方法签名	`Void addView(Object view)`
返回值	`Void`
参数	- `Object view` ：要添加的子控件对象
案例	`var v = new Vertical();` `var btn = new Button();` `v.addView(btn);`

📌removeView移除视图

类别	详情说明
方法功能	根据指定索引移除容器中的子控件
方法签名	`Void removeView(Int32 index)`
返回值	`Void` （无返回值）
参数	- `Int32 index` ：要移除子控件的索引
案例	`var v = new Vertical();` `v.removeView(0); // 移除第一个子控件`

📌clearAllViews清空所有视图

类别	详情说明
方法功能	移除容器中的所有子控件
方法签名	`Void clearAllViews()`
返回值	`Void` （无返回值）
参数	无
案例	`var v = new Vertical();` `v.clearAllViews(); // 清空所有控件`

📌getViewCount 获取视图数量

类别	详情说明
方法功能	返回当前容器中的视图数量
方法签名	`Int32 getViewCount()`
返回值	`Int32`
参数	无
案例	`var v = new Vertical();` `int count = v.getViewCount(); // 获取子控件的数量`

📌setSpacing设置控件间隔

类别	详情说明
方法功能	设置子控件之间的间隔
方法签名	`Void setSpacing(Int32 spacing)`
返回值	`Void`
参数	- `Int32 spacing` ：间隔值
案例	`var v = new Vertical();` `v.setSpacing(10); // 设置控件间隔为10`

📌setContainerSize设置容器大小

类别	详情说明
方法功能	设置容器的宽度和高度
方法签名	`Void setContainerSize(Int32 width, Int32 height)`
返回值	`Void`
参数	- `Int32 width` ：容器宽度 - `Int32 height` ：容器高度
案例	`var v = new Vertical();` `v.setContainerSize(400, 600); // 设置容器大小为400x600`

📌setBackgroundColor 设置背景颜色

类别	详情说明
方法功能	根据提供的 RGB 值设置容器的背景颜色
方法签名	`Void setBackgroundColor(Int32 red, Int32 green, Int32 blue)`
返回值	`Void`
参数	- `Int32 red` ：红色分量 - `Int32 green` ：绿色分量 - `Int32 blue` ：蓝色分量
案例	`var v = new Vertical();` `v.setBackgroundColor(50, 100, 150); // 设置背景颜色`

📌setAlignment 设置对齐方式

类别	详情说明
方法功能	设置容器内控件的对齐方式，可选值包括 `fill` （填充对齐）、`left` （左对齐）、`right` （右对齐）、`top` （顶部对齐）、`bottom` （底部对齐）、`center` （居中对齐），默认值为 `fill`
方法签名	`Void setAlignment(String alignment)`
返回值	`Void` （无返回值）
参数	- `String alignment` ：对齐方式字符串，可选值： - `fill` ：填充对齐 - `left` ：左对齐 - `right` ：右对齐 - `top` ：顶部对齐 - `bottom` ：底部对齐 - `center` ：居中对齐默认值为 `fill`
案例	`var v = new Vertical();` `v.setAlignment("center"); // 设置对齐方式为居中` `/可选值如下：` `- fill: 填充对齐` `- left: 左对齐` `- right: 右对齐` `- top: 顶部对齐` `- bottom: 底部对齐` `- center: 居中对齐` `默认值为 fill。` `/`

示例：

// 🔨Ul-垂直容器[Vertical]方法完整示例
// 方法小结，交流QQ群711841924

// 创建 TabView
var tab = new TabView();

// 设置标签页标题
tab.setTitles(["addView示例", "removeView示例", "其他方法示例"]);

// 显示 TabView，并在加载完成后执行回调函数
tab.show(function() {
printl("TabView 显示完成");

// ====================== 第一页：addView示例 ======================
var addViewDemo = new Vertical();
addViewDemo.setSpacing(10); // 设置控件间隔
addViewDemo.setBackgroundColor(240, 240, 240); // 设置背景颜色

// 创建说明标签
var titleLabel = new Label();
titleLabel.setText("addView方法演示");
addViewDemo.addView(titleLabel);

// 使用addView添加各种控件
var label1 = new Label();
label1.setText("这是第一个通过addView添加的标签");
addViewDemo.addView(label1);

var button1 = new Button();
button1.setText("这是通过addView添加的按钮");
button1.setColor(70, 130, 180);
button1.onClick(function() {
printl("第一页按钮被点击");
});
addViewDemo.addView(button1);

var countLabel1 = new Label();
countLabel1.setText("当前控件数量: " + addViewDemo.getViewCount());
addViewDemo.addView(countLabel1);

function updateViewCount(container, label) {
label.setText("当前控件数量: " + container.getViewCount());
}

// ====================== 第二页：removeView和clearAllViews示例 ======================
var removeViewDemo = new Vertical();
removeViewDemo.setSpacing(10);
removeViewDemo.setBackgroundColor(245, 220, 220);

// 添加多个控件用于演示删除
for (var i = 1; i <= 5; i++) {
var tempLabel = new Label();
tempLabel.setText("动态标签 " + i);
removeViewDemo.addView(tempLabel);
}

var removeFirstBtn = new Button();
removeFirstBtn.setText("移除第一个控件 (removeView)");
removeFirstBtn.setColor(220, 20, 60);
removeFirstBtn.onClick(function() {
if (removeViewDemo.getViewCount() > 2) { // 留下至少一个控件和按钮
removeViewDemo.removeView(0);
printl("已移除第一个控件，剩余控件数: " + removeViewDemo.getViewCount());
updateViewCount(removeViewDemo, countLabel2);
} else {
printl("控件不足，无法继续移除");
}
});
removeViewDemo.addView(removeFirstBtn);

var clearAllBtn = new Button();
clearAllBtn.setText("清空所有控件 (clearAllViews)");
clearAllBtn.setColor(180, 20, 220);
clearAllBtn.onClick(function() {
removeViewDemo.clearAllViews();
printl("已清空所有控件");

// 重新添加一些控件
var emptyLabel = new Label();
emptyLabel.setText("所有控件已清空");
removeViewDemo.addView(emptyLabel);

var countLabel = new Label();
countLabel.setText("当前控件数量: " + removeViewDemo.getViewCount());
removeViewDemo.addView(countLabel);

removeViewDemo.addView(removeFirstBtn);
removeViewDemo.addView(clearAllBtn);
updateViewCount(removeViewDemo, countLabel2);
});
removeViewDemo.addView(clearAllBtn);

var countLabel2 = new Label();
countLabel2.setText("当前控件数量: " + removeViewDemo.getViewCount());
removeViewDemo.addView(countLabel2);

// ====================== 第三页：其他方法示例 ======================
var otherMethodsDemo = new Vertical();
otherMethodsDemo.setContainerSize(400, 600); // 设置容器大小
otherMethodsDemo.setBackgroundColor(220, 245, 220); // 设置背景颜色

// 演示不同对齐方式
var alignmentTitle = new Label();
alignmentTitle.setText("setAlignment对齐方式演示");
otherMethodsDemo.addView(alignmentTitle);

// 默认对齐(fill)
var fillContainer = new Vertical();
fillContainer.setContainerSize(300, 60);
fillContainer.setBackgroundColor(230, 230, 250);
fillContainer.setSpacing(5);

var fillLabel = new Label();
fillLabel.setText("默认填充对齐(fill)");
fillContainer.addView(fillLabel);

otherMethodsDemo.addView(fillContainer);

// 居中对齐(center)
var centerContainer = new Vertical();
centerContainer.setContainerSize(300, 60);
centerContainer.setBackgroundColor(250, 230, 230);
centerContainer.setAlignment("center"); // 设置居中对齐
centerContainer.setSpacing(5);

var centerLabel = new Label();
centerLabel.setText("居中对齐(center)");
centerContainer.addView(centerLabel);

otherMethodsDemo.addView(centerContainer);

// 左对齐(left)
var leftContainer = new Vertical();
leftContainer.setContainerSize(300, 60);
leftContainer.setBackgroundColor(230, 250, 230);
leftContainer.setAlignment("left"); // 设置左对齐
leftContainer.setSpacing(5);

var leftLabel = new Label();
leftLabel.setText("左对齐(left)");
leftContainer.addView(leftLabel);

otherMethodsDemo.addView(leftContainer);

// 右对齐(right)
var rightContainer = new Vertical();
rightContainer.setContainerSize(300, 60);
rightContainer.setBackgroundColor(250, 250, 230);
rightContainer.setAlignment("right"); // 设置右对齐
rightContainer.setSpacing(5);

var rightLabel = new Label();
rightLabel.setText("右对齐(right)");
rightContainer.addView(rightLabel);

otherMethodsDemo.addView(rightContainer);

// 显示属性信息
var infoLabel = new Label();
infoLabel.setText("容器大小: 400x600\n背景颜色: RGB(220, 245, 220)\n控件间隔: 默认值");
otherMethodsDemo.addView(infoLabel);

// 公共返回按钮
var btnBack = new Button();
btnBack.setText("返回");
btnBack.setColor(255, 0, 0);
btnBack.onClick(function() {
printl("返回键被点击");
tab.dismiss();
});

// 添加所有页面到TabView
tab.addView(0, addViewDemo);
tab.addView(1, removeViewDemo);
tab.addView(2, otherMethodsDemo);
tab.addView(3, btnBack);

printl("视图添加完成");
});

printl("Vertical容器方法演示程序启动");