AIWROK苹果部分功能UI-水平容器[Horizontal]方法小结 - B2B网络软件

// 🔨UI-水平容器[Horizontal]方法完整示例
// 🍎UI-水平容器[Horizontal]方法小结，交流QQ群711841924
printl("=== Horizontal控件方法完整示例 ===");
var vc = new IOSView();
vc.show(() => {
printl("Horizontal示例界面已加载");
// 获取当前视图
var view = vc.getView();
// 创建主容器
var mainContainer = new Vertical();
mainContainer.setSpacing(15);
mainContainer.setBackgroundColor(245, 245, 245);
// 标题区域
var titleContainer = new Vertical();
titleContainer.setAlignment("center");
titleContainer.setSpacing(5);
titleContainer.setBackgroundColor(0, 122, 255);
var titleLabel = new Label();
titleLabel.setText("🔨 Horizontal控件演示");
titleLabel.setFontSize(20.0);
titleLabel.setTextColor(255, 255, 255);
titleLabel.setTextAlignment("center");
titleContainer.addView(titleLabel);
mainContainer.addView(titleContainer);
// Horizontal方法演示区域
var demoContainer = new Vertical();
demoContainer.setBackgroundColor(255, 255, 255);
demoContainer.setSpacing(15);
var demoTitle = new Label();
demoTitle.setText("Horizontal控件功能演示");
demoTitle.setFontSize(16.0);
demoTitle.setTextColor(0, 0, 0);
demoTitle.setTextAlignment("center");
demoContainer.addView(demoTitle);
// 第一个方法：addView添加子控件
var addViewDemo = new Vertical();
addViewDemo.setSpacing(5);
var addViewLabel = new Label();
addViewLabel.setText("📌 addView添加子控件");
addViewLabel.setFontSize(14.0);
addViewLabel.setTextColor(0, 122, 255);
addViewDemo.addView(addViewLabel);
var h1 = new Horizontal();
h1.setSpacing(10);
h1.setBackgroundColor(240, 240, 240);
var btn1 = new Button();
btn1.setText("按钮1");
btn1.setColor(0, 122, 255);
btn1.setTextColor(255, 255, 255);
btn1.setWidth(80);
btn1.setHeight(40);
var btn2 = new Button();
btn2.setText("按钮2");
btn2.setColor(52, 199, 89);
btn2.setTextColor(255, 255, 255);
btn2.setWidth(80);
btn2.setHeight(40);
var btn3 = new Button();
btn3.setText("按钮3");
btn3.setColor(255, 149, 0);
btn3.setTextColor(255, 255, 255);
btn3.setWidth(80);
btn3.setHeight(40);
// 第一个方法：addView添加子控件
h1.addView(btn1);
h1.addView(btn2);
h1.addView(btn3);
addViewDemo.addView(h1);
demoContainer.addView(addViewDemo);
// 第二个方法：removeView移除视图
var removeViewDemo = new Vertical();
removeViewDemo.setSpacing(5);
var removeViewLabel = new Label();
removeViewLabel.setText("📌 removeView移除视图");
removeViewLabel.setFontSize(14.0);
removeViewLabel.setTextColor(0, 122, 255);
removeViewDemo.addView(removeViewLabel);
var h2 = new Horizontal();
h2.setSpacing(10);
h2.setBackgroundColor(240, 240, 240);
var removeBtn1 = new Button();
removeBtn1.setText("A");
removeBtn1.setColor(0, 122, 255);
removeBtn1.setTextColor(255, 255, 255);
removeBtn1.setWidth(60);
removeBtn1.setHeight(40);
var removeBtn2 = new Button();
removeBtn2.setText("B");
removeBtn2.setColor(52, 199, 89);
removeBtn2.setTextColor(255, 255, 255);
removeBtn2.setWidth(60);
removeBtn2.setHeight(40);
var removeBtn3 = new Button();
removeBtn3.setText("C");
removeBtn3.setColor(255, 149, 0);
removeBtn3.setTextColor(255, 255, 255);
removeBtn3.setWidth(60);
removeBtn3.setHeight(40);
h2.addView(removeBtn1);
h2.addView(removeBtn2);
h2.addView(removeBtn3);
var removeButton = new Button();
removeButton.setText("移除第一个");
removeButton.setColor(255, 59, 48);
removeButton.setTextColor(255, 255, 255);
removeButton.setWidth(100);
removeButton.setHeight(40);
removeButton.onClick(() => {
// 第二个方法：removeView移除视图
if (h2.getViewCount() > 0) {
h2.removeView(0); // 移除第一个子控件
printl("已移除第一个控件，剩余控件数: " + h2.getViewCount());
} else {
printl("没有可移除的控件");
}
});
var removeContainer = new Horizontal();
removeContainer.setSpacing(10);
removeContainer.addView(h2);
removeContainer.addView(removeButton);
removeViewDemo.addView(removeContainer);
demoContainer.addView(removeViewDemo);
// 第三个方法：clearAllViews清空所有视图
var clearAllViewsDemo = new Vertical();
clearAllViewsDemo.setSpacing(5);
var clearAllViewsLabel = new Label();
clearAllViewsLabel.setText("📌 clearAllViews清空所有视图");
clearAllViewsLabel.setFontSize(14.0);
clearAllViewsLabel.setTextColor(0, 122, 255);
clearAllViewsDemo.addView(clearAllViewsLabel);
var h3 = new Horizontal();
h3.setSpacing(10);
h3.setBackgroundColor(240, 240, 240);
var clearBtn1 = new Button();
clearBtn1.setText("X");
clearBtn1.setColor(0, 122, 255);
clearBtn1.setTextColor(255, 255, 255);
clearBtn1.setWidth(60);
clearBtn1.setHeight(40);
var clearBtn2 = new Button();
clearBtn2.setText("Y");
clearBtn2.setColor(52, 199, 89);
clearBtn2.setTextColor(255, 255, 255);
clearBtn2.setWidth(60);
clearBtn2.setHeight(40);
var clearBtn3 = new Button();
clearBtn3.setText("Z");
clearBtn3.setColor(255, 149, 0);
clearBtn3.setTextColor(255, 255, 255);
clearBtn3.setWidth(60);
clearBtn3.setHeight(40);
h3.addView(clearBtn1);
h3.addView(clearBtn2);
h3.addView(clearBtn3);
var clearButton = new Button();
clearButton.setText("清空所有");
clearButton.setColor(255, 59, 48);
clearButton.setTextColor(255, 255, 255);
clearButton.setWidth(100);
clearButton.setHeight(40);
clearButton.onClick(() => {
// 第三个方法：clearAllViews清空所有视图
h3.clearAllViews(); // 清空所有控件
printl("已清空所有控件");
// 重新添加一个提示标签
var emptyLabel = new Label();
emptyLabel.setText("已清空");
emptyLabel.setFontSize(12.0);
emptyLabel.setTextColor(100, 100, 100);
h3.addView(emptyLabel);
});
var clearContainer = new Horizontal();
clearContainer.setSpacing(10);
clearContainer.addView(h3);
clearContainer.addView(clearButton);
clearAllViewsDemo.addView(clearContainer);
demoContainer.addView(clearAllViewsDemo);
// 第四个方法：getViewCount 获取视图数量
var getViewCountDemo = new Vertical();
getViewCountDemo.setSpacing(5);
var getViewCountLabel = new Label();
getViewCountLabel.setText("📌 getViewCount 获取视图数量");
getViewCountLabel.setFontSize(14.0);
getViewCountLabel.setTextColor(0, 122, 255);
getViewCountDemo.addView(getViewCountLabel);
var h4 = new Horizontal();
h4.setSpacing(10);
h4.setBackgroundColor(240, 240, 240);
var countBtn1 = new Button();
countBtn1.setText("1");
countBtn1.setColor(0, 122, 255);
countBtn1.setTextColor(255, 255, 255);
countBtn1.setWidth(60);
countBtn1.setHeight(40);
var countBtn2 = new Button();
countBtn2.setText("2");
countBtn2.setColor(52, 199, 89);
countBtn2.setTextColor(255, 255, 255);
countBtn2.setWidth(60);
countBtn2.setHeight(40);
h4.addView(countBtn1);
h4.addView(countBtn2);
var countButton = new Button();
countButton.setText("获取数量");
countButton.setColor(111, 66, 193);
countButton.setTextColor(255, 255, 255);
countButton.setWidth(100);
countButton.setHeight(40);
countButton.onClick(() => {
// 第四个方法：getViewCount 获取视图数量
var count = h4.getViewCount(); // 获取子控件的数量
printl("当前控件数量: " + count);
var resultLabel = new Label();
resultLabel.setText("控件数量: " + count);
resultLabel.setFontSize(12.0);
resultLabel.setTextColor(111, 66, 193);
getViewCountDemo.addView(resultLabel);
});
var countContainer = new Horizontal();
countContainer.setSpacing(10);
countContainer.addView(h4);
countContainer.addView(countButton);
getViewCountDemo.addView(countContainer);
demoContainer.addView(getViewCountDemo);
// 第五个方法：setSpacing设置控件间距
var setSpacingDemo = new Vertical();
setSpacingDemo.setSpacing(5);
var setSpacingLabel = new Label();
setSpacingLabel.setText("📌 setSpacing设置控件间距");
setSpacingLabel.setFontSize(14.0);
setSpacingLabel.setTextColor(0, 122, 255);
setSpacingDemo.addView(setSpacingLabel);
var h5 = new Horizontal();
// 第五个方法：setSpacing设置控件间距
h5.setSpacing(20); // 设置控件间距为20
h5.setBackgroundColor(240, 240, 240);
var spacingBtn1 = new Button();
spacingBtn1.setText("间距大");
spacingBtn1.setColor(0, 122, 255);
spacingBtn1.setTextColor(255, 255, 255);
spacingBtn1.setWidth(80);
spacingBtn1.setHeight(40);
var spacingBtn2 = new Button();
spacingBtn2.setText("间距大");
spacingBtn2.setColor(52, 199, 89);
spacingBtn2.setTextColor(255, 255, 255);
spacingBtn2.setWidth(80);
spacingBtn2.setHeight(40);
h5.addView(spacingBtn1);
h5.addView(spacingBtn2);
setSpacingDemo.addView(h5);
demoContainer.addView(setSpacingDemo);
// 第六个方法：setBackgroundColor设置背景颜色
var setBackgroundColorDemo = new Vertical();
setBackgroundColorDemo.setSpacing(5);
var setBackgroundColorLabel = new Label();
setBackgroundColorLabel.setText("📌 setBackgroundColor设置背景颜色");
setBackgroundColorLabel.setFontSize(14.0);
setBackgroundColorLabel.setTextColor(0, 122, 255);
setBackgroundColorDemo.addView(setBackgroundColorLabel);
var h6 = new Horizontal();
h6.setSpacing(10);
// 第六个方法：setBackgroundColor设置背景颜色
h6.setBackgroundColor(50, 100, 150); // 设置背景颜色为RGB(50,100,150)
var bgBtn1 = new Button();
bgBtn1.setText("背景色1");
bgBtn1.setColor(255, 255, 255);
bgBtn1.setTextColor(0, 0, 0);
bgBtn1.setWidth(80);
bgBtn1.setHeight(40);
var bgBtn2 = new Button();
bgBtn2.setText("背景色2");
bgBtn2.setColor(255, 255, 255);
bgBtn2.setTextColor(0, 0, 0);
bgBtn2.setWidth(80);
bgBtn2.setHeight(40);
h6.addView(bgBtn1);
h6.addView(bgBtn2);
setBackgroundColorDemo.addView(h6);
demoContainer.addView(setBackgroundColorDemo);
// 第七个方法：setAlignment 设置对齐方式
var setAlignmentDemo = new Vertical();
setAlignmentDemo.setSpacing(5);
var setAlignmentLabel = new Label();
setAlignmentLabel.setText("📌 setAlignment 设置对齐方式");
setAlignmentLabel.setFontSize(14.0);
setAlignmentLabel.setTextColor(0, 122, 255);
setAlignmentDemo.addView(setAlignmentLabel);
// 居中对齐示例
var hCenter = new Horizontal();
hCenter.setSpacing(10);
hCenter.setBackgroundColor(240, 240, 240);
// 第七个方法：setAlignment 设置对齐方式
hCenter.setAlignment("center"); // 设置对齐方式为居中
var centerBtn = new Button();
centerBtn.setText("居中");
centerBtn.setColor(0, 122, 255);
centerBtn.setTextColor(255, 255, 255);
centerBtn.setWidth(80);
centerBtn.setHeight(40);
hCenter.addView(centerBtn);
var centerLabel = new Label();
centerLabel.setText("居中对齐");
centerLabel.setFontSize(12.0);
centerLabel.setTextColor(100, 100, 100);
setAlignmentDemo.addView(centerLabel);
setAlignmentDemo.addView(hCenter);
// 左对齐示例
var hLeft = new Horizontal();
hLeft.setSpacing(10);
hLeft.setBackgroundColor(240, 240, 240);
hLeft.setAlignment("left"); // 设置对齐方式为左对齐
var leftBtn = new Button();
leftBtn.setText("左对齐");
leftBtn.setColor(52, 199, 89);
leftBtn.setTextColor(255, 255, 255);
leftBtn.setWidth(80);
leftBtn.setHeight(40);
hLeft.addView(leftBtn);
var leftLabel = new Label();
leftLabel.setText("左对齐");
leftLabel.setFontSize(12.0);
leftLabel.setTextColor(100, 100, 100);
setAlignmentDemo.addView(leftLabel);
setAlignmentDemo.addView(hLeft);
// 右对齐示例
var hRight = new Horizontal();
hRight.setSpacing(10);
hRight.setBackgroundColor(240, 240, 240);
hRight.setAlignment("right"); // 设置对齐方式为右对齐
var rightBtn = new Button();
rightBtn.setText("右对齐");
rightBtn.setColor(255, 149, 0);
rightBtn.setTextColor(255, 255, 255);
rightBtn.setWidth(80);
rightBtn.setHeight(40);
hRight.addView(rightBtn);
var rightLabel = new Label();
rightLabel.setText("右对齐");
rightLabel.setFontSize(12.0);
rightLabel.setTextColor(100, 100, 100);
setAlignmentDemo.addView(rightLabel);
setAlignmentDemo.addView(hRight);
demoContainer.addView(setAlignmentDemo);
mainContainer.addView(demoContainer);
// 实际应用示例
var applicationContainer = new Vertical();
applicationContainer.setBackgroundColor(255, 255, 255);
applicationContainer.setSpacing(15);
var appTitle = new Label();
appTitle.setText("Horizontal实际应用示例");
appTitle.setFontSize(16.0);
appTitle.setTextColor(0, 0, 0);
appTitle.setTextAlignment("center");
applicationContainer.addView(appTitle);
// 按钮组示例
var buttonGroup = new Horizontal();
buttonGroup.setSpacing(10);
buttonGroup.setAlignment("center");
buttonGroup.setBackgroundColor(240, 240, 240);
var homeBtn = new Button();
homeBtn.setText("🏠 首页");
homeBtn.setColor(0, 122, 255);
homeBtn.setTextColor(255, 255, 255);
homeBtn.setWidth(80);
homeBtn.setHeight(40);
var searchBtn = new Button();
searchBtn.setText("🔍 搜索");
searchBtn.setColor(52, 199, 89);
searchBtn.setTextColor(255, 255, 255);
searchBtn.setWidth(80);
searchBtn.setHeight(40);
var profileBtn = new Button();
profileBtn.setText("👤 我的");
profileBtn.setColor(255, 149, 0);
profileBtn.setTextColor(255, 255, 255);
profileBtn.setWidth(80);
profileBtn.setHeight(40);
buttonGroup.addView(homeBtn);
buttonGroup.addView(searchBtn);
buttonGroup.addView(profileBtn);
applicationContainer.addView(buttonGroup);
// 图标+文字组合示例
var iconTextGroup = new Horizontal();
iconTextGroup.setSpacing(20);
iconTextGroup.setAlignment("center");
iconTextGroup.setBackgroundColor(245, 245, 245);
// 第一组
var group1 = new Vertical();
group1.setSpacing(5);
group1.setAlignment("center");
var icon1 = new Label();
icon1.setText("📧");
icon1.setFontSize(24.0);
icon1.setTextAlignment("center");
var text1 = new Label();
text1.setText("邮件");
text1.setFontSize(12.0);
text1.setTextAlignment("center");
text1.setTextColor(100, 100, 100);
group1.addView(icon1);
group1.addView(text1);
// 第二组
var group2 = new Vertical();
group2.setSpacing(5);
group2.setAlignment("center");
var icon2 = new Label();
icon2.setText("📅");
icon2.setFontSize(24.0);
icon2.setTextAlignment("center");
var text2 = new Label();
text2.setText("日历");
text2.setFontSize(12.0);
text2.setTextAlignment("center");
text2.setTextColor(100, 100, 100);
group2.addView(icon2);
group2.addView(text2);
// 第三组
var group3 = new Vertical();
group3.setSpacing(5);
group3.setAlignment("center");
var icon3 = new Label();
icon3.setText("📷");
icon3.setFontSize(24.0);
icon3.setTextAlignment("center");
var text3 = new Label();
text3.setText("相机");
text3.setFontSize(12.0);
text3.setTextAlignment("center");
text3.setTextColor(100, 100, 100);
group3.addView(icon3);
group3.addView(text3);
iconTextGroup.addView(group1);
iconTextGroup.addView(group2);
iconTextGroup.addView(group3);
applicationContainer.addView(iconTextGroup);
mainContainer.addView(applicationContainer);
// 控件信息区域
var infoContainer = new Vertical();
infoContainer.setBackgroundColor(236, 245, 255);
infoContainer.setSpacing(8);
var infoTitle = new Label();
infoTitle.setText("ℹ️ Horizontal控件说明");
infoTitle.setFontSize(16.0);
infoTitle.setTextColor(0, 122, 255);
infoContainer.addView(infoTitle);
var info1 = new Label();
info1.setText("• Horizontal控件用于水平排列子控件");
info1.setFontSize(12.0);
info1.setTextColor(52, 58, 64);
infoContainer.addView(info1);
var info2 = new Label();
info2.setText("• 支持添加、移除、清空子控件");
info2.setFontSize(12.0);
info2.setTextColor(52, 58, 64);
infoContainer.addView(info2);
var info3 = new Label();
info3.setText("• 可设置间距、背景色和对齐方式");
info3.setFontSize(12.0);
info3.setTextColor(52, 58, 64);
infoContainer.addView(info3);
mainContainer.addView(infoContainer);
// 底部按钮
var bottomContainer = new Horizontal();
bottomContainer.setSpacing(10);
bottomContainer.setAlignment("center");
var exitBtn = new Button();
exitBtn.setText("退出示例");
exitBtn.setColor(255, 59, 48);
exitBtn.setTextColor(255, 255, 255);
exitBtn.setHeight(40);
exitBtn.onClick(() => {
printl("退出按钮被点击");
vc.dismiss();
});
bottomContainer.addView(exitBtn);
mainContainer.addView(bottomContainer);
// 添加到主视图
view.addView(mainContainer);
printl("Horizontal示例界面构建完成");
});
printl("Horizontal控件完整示例已启动");

复制代码

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

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

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

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

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

类别	详情说明
方法功能	根据提供的 RGB 值设置容器的背景颜色
方法签名	Void setBackgroundColor(Int32 red, Int32 green, Int32 blue)
返回值	Void
参数	- Int32 red ：红色分量（通常取值范围 0~255 ） - Int32 green ：绿色分量（通常取值范围 0~255 ） - Int32 blue ：蓝色分量（通常取值范围 0~255 ）
案例	var h = new Horizontal(); h.setBackgroundColor(50,100, 150); // 设置背景颜色为红色

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