AIWROK软件苹果水平容器[Horizontal]小实例 - B2B网络软件

// 🎨UI-水平容器[Horizontal]全新系统化示例
// 全面展示Horizontal容器的所有功能和方法
// 🍎交流QQ群711841924群一，苹果内测群，528816639
printl("=== Horizontal水平容器全新系统化示例启动 ===");
var tab = new TabView();
tab.setTitles(["基础", "对齐", "动态", "嵌套", "实战"]);
tab.show(function() {
printl("TabView界面加载完成");
// ====================== 第一页：基础布局 ======================
var basicPage = new Vertical();
basicPage.setSpacing(8);
basicPage.setBackgroundColor(248, 250, 252);
var basicHeader = createSectionHeader("基础布局演示", 70, 130, 180);
basicPage.addView(basicHeader);
var basicDesc = new Label();
basicDesc.setText("展示Horizontal容器的基本功能：addView添加控件、setSpacing设置间距、setBackgroundColor设置背景色");
basicDesc.setTextColor(100, 100, 100);
basicDesc.setFontSize(13);
basicDesc.setTextAlignment("center");
basicPage.addView(basicDesc);
// 演示1：基本按钮组
var demo1Section = createSubSection("基本按钮组");
basicPage.addView(demo1Section);
var buttonGroup = new Horizontal();
buttonGroup.setSpacing(12);
buttonGroup.setAlignment("center");
buttonGroup.setBackgroundColor(245, 245, 245);
var btn1 = createColorButton("首页", 52, 152, 219);
var btn2 = createColorButton("分类", 46, 204, 113);
var btn3 = createColorButton("购物车", 241, 196, 15);
var btn4 = createColorButton("我的", 155, 89, 182);
buttonGroup.addView(btn1);
buttonGroup.addView(btn2);
buttonGroup.addView(btn3);
buttonGroup.addView(btn4);
basicPage.addView(buttonGroup);
// 演示2：不同间距对比 - 重新设计，使用彩色方块直观展示
var demo2Section = createSubSection("间距对比演示");
basicPage.addView(demo2Section);
var spacingContainer = new Vertical();
spacingContainer.setSpacing(15);
spacingContainer.setBackgroundColor(255, 255, 255);
// 小间距演示
var smallRow = new Vertical();
smallRow.setSpacing(5);
var smallLabel = new Label();
smallLabel.setText("setSpacing(5) - 小间距");
smallLabel.setTextColor(80, 80, 80);
smallLabel.setFontSize(12);
smallRow.addView(smallLabel);
var smallSpacing = new Horizontal();
smallSpacing.setSpacing(5);
smallSpacing.setAlignment("center");
smallSpacing.setBackgroundColor(240, 240, 240);
for (var s1 = 1; s1 <= 4; s1++) {
var box1 = new Label();
box1.setText("");
box1.setBackgroundColor(52, 152, 219);
box1.setWidth(40);
box1.setHeight(40);
smallSpacing.addView(box1);
}
smallRow.addView(smallSpacing);
// 中间距演示
var mediumRow = new Vertical();
mediumRow.setSpacing(5);
var mediumLabel = new Label();
mediumLabel.setText("setSpacing(15) - 中间距");
mediumLabel.setTextColor(80, 80, 80);
mediumLabel.setFontSize(12);
mediumRow.addView(mediumLabel);
var mediumSpacing = new Horizontal();
mediumSpacing.setSpacing(15);
mediumSpacing.setAlignment("center");
mediumSpacing.setBackgroundColor(240, 240, 240);
for (var s2 = 1; s2 <= 4; s2++) {
var box2 = new Label();
box2.setText("");
box2.setBackgroundColor(46, 204, 113);
box2.setWidth(40);
box2.setHeight(40);
mediumSpacing.addView(box2);
}
mediumRow.addView(mediumSpacing);
// 大间距演示
var largeRow = new Vertical();
largeRow.setSpacing(5);
var largeLabel = new Label();
largeLabel.setText("setSpacing(25) - 大间距");
largeLabel.setTextColor(80, 80, 80);
largeLabel.setFontSize(12);
largeRow.addView(largeLabel);
var largeSpacing = new Horizontal();
largeSpacing.setSpacing(25);
largeSpacing.setAlignment("center");
largeSpacing.setBackgroundColor(240, 240, 240);
for (var s3 = 1; s3 <= 4; s3++) {
var box3 = new Label();
box3.setText("");
box3.setBackgroundColor(155, 89, 182);
box3.setWidth(40);
box3.setHeight(40);
largeSpacing.addView(box3);
}
largeRow.addView(largeSpacing);
spacingContainer.addView(smallRow);
spacingContainer.addView(mediumRow);
spacingContainer.addView(largeRow);
basicPage.addView(spacingContainer);
// 演示3：背景色设置 - 重新设计，展示完整背景效果
var demo3Section = createSubSection("背景色设置");
basicPage.addView(demo3Section);
var bgContainer = new Vertical();
bgContainer.setSpacing(12);
// 红色背景
var bg1 = new Horizontal();
bg1.setSpacing(10);
bg1.setAlignment("center");
bg1.setBackgroundColor(231, 76, 60);
var bg1Label = new Label();
bg1Label.setText("setBackgroundColor(231, 76, 60)");
bg1Label.setTextColor(255, 255, 255);
bg1Label.setFontSize(14);
bg1Label.setTextAlignment("center");
bg1Label.setHeight(40);
bg1.addView(bg1Label);
// 绿色背景
var bg2 = new Horizontal();
bg2.setSpacing(10);
bg2.setAlignment("center");
bg2.setBackgroundColor(46, 204, 113);
var bg2Label = new Label();
bg2Label.setText("setBackgroundColor(46, 204, 113)");
bg2Label.setTextColor(255, 255, 255);
bg2Label.setFontSize(14);
bg2Label.setTextAlignment("center");
bg2Label.setHeight(40);
bg2.addView(bg2Label);
// 蓝色背景
var bg3 = new Horizontal();
bg3.setSpacing(10);
bg3.setAlignment("center");
bg3.setBackgroundColor(52, 152, 219);
var bg3Label = new Label();
bg3Label.setText("setBackgroundColor(52, 152, 219)");
bg3Label.setTextColor(255, 255, 255);
bg3Label.setFontSize(14);
bg3Label.setTextAlignment("center");
bg3Label.setHeight(40);
bg3.addView(bg3Label);
bgContainer.addView(bg1);
bgContainer.addView(bg2);
bgContainer.addView(bg3);
basicPage.addView(bgContainer);
tab.addView(0, basicPage);
// ====================== 第二页：对齐方式 ======================
var alignPage = new Vertical();
alignPage.setSpacing(8);
alignPage.setBackgroundColor(252, 248, 250);
var alignHeader = createSectionHeader("对齐方式演示", 155, 89, 182);
alignPage.addView(alignHeader);
var alignDesc = new Label();
alignDesc.setText("展示Horizontal容器的三种对齐方式：left左对齐、center居中对齐、right右对齐");
alignDesc.setTextColor(100, 100, 100);
alignDesc.setFontSize(13);
alignDesc.setTextAlignment("center");
alignPage.addView(alignDesc);
// 左对齐演示
var leftSection = createSubSection("左对齐 (left)");
alignPage.addView(leftSection);
var leftContainer = new Horizontal();
leftContainer.setSpacing(5);
leftContainer.setAlignment("left");
var leftBox = new Label();
leftBox.setText("左对齐内容");
leftBox.setTextColor(255, 255, 255);
leftBox.setFontSize(14);
leftBox.setTextAlignment("center");
leftBox.setBackgroundColor(100, 100, 100);
leftBox.setWidth(150);
leftBox.setHeight(40);
leftContainer.addView(leftBox);
alignPage.addView(leftContainer);
// 居中对齐演示
var centerSection = createSubSection("居中对齐 (center)");
alignPage.addView(centerSection);
var centerContainer = new Horizontal();
centerContainer.setSpacing(5);
centerContainer.setAlignment("center");
var centerBox = new Label();
centerBox.setText("居中对齐内容");
centerBox.setTextColor(255, 255, 255);
centerBox.setFontSize(14);
centerBox.setTextAlignment("center");
centerBox.setBackgroundColor(155, 89, 182);
centerBox.setWidth(150);
centerBox.setHeight(40);
centerContainer.addView(centerBox);
alignPage.addView(centerContainer);
// 右对齐演示
var rightSection = createSubSection("右对齐 (right)");
alignPage.addView(rightSection);
var rightContainer = new Horizontal();
rightContainer.setSpacing(5);
rightContainer.setAlignment("right");
var rightBox = new Label();
rightBox.setText("右对齐内容");
rightBox.setTextColor(255, 255, 255);
rightBox.setFontSize(14);
rightBox.setTextAlignment("center");
rightBox.setBackgroundColor(52, 73, 94);
rightBox.setWidth(150);
rightBox.setHeight(40);
rightContainer.addView(rightBox);
alignPage.addView(rightContainer);
// 对齐方式对比
var compareSection = createSubSection("对齐效果对比");
alignPage.addView(compareSection);
var compareContainer = new Vertical();
compareContainer.setSpacing(12);
var compareLabel = new Label();
compareLabel.setText("同一行内容在不同对齐方式下的显示效果：");
compareLabel.setTextColor(80, 80, 80);
compareLabel.setFontSize(12);
compareContainer.addView(compareLabel);
var alignTypes = ["left", "center", "right"];
var alignNames = ["左对齐", "居中对齐", "右对齐"];
for (var i = 0; i < alignTypes.length; i++) {
var row = new Horizontal();
row.setSpacing(10);
row.setAlignment(alignTypes[i]);
row.setBackgroundColor(230, 240, 250);
var contentLabel = new Label();
contentLabel.setText(alignNames[i] + "内容");
contentLabel.setTextColor(255, 255, 255);
contentLabel.setFontSize(14);
contentLabel.setTextAlignment("center");
contentLabel.setBackgroundColor(52, 152, 219);
contentLabel.setWidth(150);
contentLabel.setHeight(35);
row.addView(contentLabel);
compareContainer.addView(row);
}
alignPage.addView(compareContainer);
tab.addView(1, alignPage);
// ====================== 第三页：动态管理 ======================
var dynamicPage = new Vertical();
dynamicPage.setSpacing(8);
dynamicPage.setBackgroundColor(250, 252, 248);
var dynamicHeader = createSectionHeader("动态管理演示", 46, 204, 113);
dynamicPage.addView(dynamicHeader);
var dynamicDesc = new Label();
dynamicDesc.setText("展示动态添加、移除、清空控件以及获取控件数量的功能");
dynamicDesc.setTextColor(100, 100, 100);
dynamicDesc.setFontSize(13);
dynamicDesc.setTextAlignment("center");
dynamicPage.addView(dynamicDesc);
// 动态添加演示
var addSection = createSubSection("动态添加控件");
dynamicPage.addView(addSection);
var addContainer = new Vertical();
addContainer.setSpacing(10);
var dynamicHorizontal = new Horizontal();
dynamicHorizontal.setSpacing(10);
dynamicHorizontal.setAlignment("center");
dynamicHorizontal.setBackgroundColor(240, 240, 240);
var addButtonsArray = [];
var addStatus = new Label();
addStatus.setText("当前控件数量: 0");
addStatus.setTextColor(46, 204, 113);
addStatus.setFontSize(14);
addContainer.addView(addStatus);
var addBtn = new Button();
addBtn.setText("添加控件");
addBtn.setColor(46, 204, 113);
addBtn.setTextColor(255, 255, 255);
addBtn.setWidth(120);
addBtn.setHeight(40);
addBtn.onClick(function() {
var newBtn = createColorButton("新" + (addButtonsArray.length + 1), 46, 204, 113);
addButtonsArray.push(newBtn);
dynamicHorizontal.addView(newBtn);
addStatus.setText("当前控件数量: " + addButtonsArray.length);
printl("添加控件，当前数量: " + addButtonsArray.length);
});
addContainer.addView(dynamicHorizontal);
addContainer.addView(addBtn);
dynamicPage.addView(addContainer);
// 动态移除演示
var removeSection = createSubSection("动态移除控件");
dynamicPage.addView(removeSection);
var removeContainer = new Vertical();
removeContainer.setSpacing(10);
var removeHorizontal = new Horizontal();
removeHorizontal.setSpacing(10);
removeHorizontal.setAlignment("center");
removeHorizontal.setBackgroundColor(240, 240, 240);
var removeButtonsArray = [];
for (var j = 1; j <= 5; j++) {
var itemBtn = createColorButton("项目" + j, 52, 152, 219);
removeButtonsArray.push(itemBtn);
removeHorizontal.addView(itemBtn);
}
var removeStatus = new Label();
removeStatus.setText("当前控件数量: " + removeButtonsArray.length);
removeStatus.setTextColor(231, 76, 60);
removeStatus.setFontSize(14);
var removeBtn = new Button();
removeBtn.setText("移除第一个");
removeBtn.setColor(231, 76, 60);
removeBtn.setTextColor(255, 255, 255);
removeBtn.setWidth(120);
removeBtn.setHeight(40);
removeBtn.onClick(function() {
if (removeButtonsArray.length > 0) {
removeButtonsArray.shift();
removeHorizontal.clearAllViews();
for (var k = 0; k < removeButtonsArray.length; k++) {
removeHorizontal.addView(removeButtonsArray[k]);
}
removeStatus.setText("当前控件数量: " + removeButtonsArray.length);
printl("移除控件，剩余数量: " + removeButtonsArray.length);
}
});
removeContainer.addView(removeHorizontal);
removeContainer.addView(removeStatus);
removeContainer.addView(removeBtn);
dynamicPage.addView(removeContainer);
// 清空控件演示
var clearSection = createSubSection("清空所有控件");
dynamicPage.addView(clearSection);
var clearContainer = new Vertical();
clearContainer.setSpacing(10);
var clearHorizontal = new Horizontal();
clearHorizontal.setSpacing(10);
clearHorizontal.setAlignment("center");
clearHorizontal.setBackgroundColor(240, 240, 240);
var clearButtonsArray = [];
for (var k = 1; k <= 4; k++) {
var clearItemBtn = createColorButton("清" + k, 155, 89, 182);
clearButtonsArray.push(clearItemBtn);
clearHorizontal.addView(clearItemBtn);
}
var clearStatus = new Label();
clearStatus.setText("当前控件数量: " + clearButtonsArray.length);
clearStatus.setTextColor(155, 89, 182);
clearStatus.setFontSize(14);
var clearBtn = new Button();
clearBtn.setText("清空所有");
clearBtn.setColor(155, 89, 182);
clearBtn.setTextColor(255, 255, 255);
clearBtn.setWidth(120);
clearBtn.setHeight(40);
clearBtn.onClick(function() {
clearButtonsArray = [];
clearHorizontal.clearAllViews();
clearStatus.setText("当前控件数量: " + clearButtonsArray.length);
var emptyLabel = new Label();
emptyLabel.setText("已清空所有控件");
emptyLabel.setTextColor(150, 150, 150);
emptyLabel.setFontSize(12);
clearHorizontal.addView(emptyLabel);
printl("清空所有控件");
});
clearContainer.addView(clearHorizontal);
clearContainer.addView(clearStatus);
clearContainer.addView(clearBtn);
dynamicPage.addView(clearContainer);
// 获取控件数量演示
var countSection = createSubSection("获取控件数量");
dynamicPage.addView(countSection);
var countContainer = new Vertical();
countContainer.setSpacing(10);
var countHorizontal = new Horizontal();
countHorizontal.setSpacing(10);
countHorizontal.setAlignment("center");
countHorizontal.setBackgroundColor(240, 240, 240);
var countButtonsArray = [];
for (var m = 1; m <= 3; m++) {
var countItemBtn = createColorButton("计数" + m, 241, 196, 15);
countButtonsArray.push(countItemBtn);
countHorizontal.addView(countItemBtn);
}
var countResult = new Label();
countResult.setText("点击按钮查看数量");
countResult.setTextColor(241, 196, 15);
countResult.setFontSize(14);
var countBtn = new Button();
countBtn.setText("获取数量");
countBtn.setColor(241, 196, 15);
countBtn.setTextColor(255, 255, 255);
countBtn.setWidth(120);
countBtn.setHeight(40);
countBtn.onClick(function() {
countResult.setText("当前控件数量: " + countButtonsArray.length);
printl("获取控件数量: " + countButtonsArray.length);
});
countContainer.addView(countHorizontal);
countContainer.addView(countResult);
countContainer.addView(countBtn);
dynamicPage.addView(countContainer);
tab.addView(2, dynamicPage);
// ====================== 第四页：嵌套布局 ======================
var nestedPage = new Vertical();
nestedPage.setSpacing(8);
nestedPage.setBackgroundColor(248, 252, 250);
var nestedHeader = createSectionHeader("嵌套布局演示", 230, 126, 34);
nestedPage.addView(nestedHeader);
var nestedDesc = new Label();
nestedDesc.setText("展示Horizontal与Vertical容器的嵌套组合，实现复杂布局");
nestedDesc.setTextColor(100, 100, 100);
nestedDesc.setFontSize(13);
nestedDesc.setTextAlignment("center");
nestedPage.addView(nestedDesc);
// 卡片式布局
var cardSection = createSubSection("卡片式布局");
nestedPage.addView(cardSection);
var cardContainer = new Vertical();
cardContainer.setSpacing(12);
for (var n = 1; n <= 3; n++) {
var card = new Vertical();
card.setSpacing(8);
card.setBackgroundColor(255, 255, 255);
var cardHeader = new Horizontal();
cardHeader.setSpacing(10);
cardHeader.setBackgroundColor(52, 152, 219);
var cardTitle = new Label();
cardTitle.setText("卡片标题 " + n);
cardTitle.setTextColor(255, 255, 255);
cardTitle.setFontSize(16);
cardHeader.addView(cardTitle);
var cardContent = new Horizontal();
cardContent.setSpacing(15);
cardContent.setAlignment("center");
var content1 = createCardItem("图标" + n + "A", 52, 152, 219);
var content2 = createCardItem("图标" + n + "B", 46, 204, 113);
var content3 = createCardItem("图标" + n + "C", 155, 89, 182);
cardContent.addView(content1);
cardContent.addView(content2);
cardContent.addView(content3);
card.addView(cardHeader);
card.addView(cardContent);
cardContainer.addView(card);
}
nestedPage.addView(cardContainer);
// 表格式布局
var tableSection = createSubSection("表格式布局");
nestedPage.addView(tableSection);
var tableContainer = new Vertical();
tableContainer.setSpacing(8);
tableContainer.setBackgroundColor(255, 255, 255);
var tableHeader = new Horizontal();
tableHeader.setSpacing(5);
tableHeader.setBackgroundColor(52, 73, 94);
var headers = ["列1", "列2", "列3", "列4"];
for (var p = 0; p < headers.length; p++) {
var headerLabel = new Label();
headerLabel.setText(headers[p]);
headerLabel.setTextColor(255, 255, 255);
headerLabel.setFontSize(14);
headerLabel.setTextAlignment("center");
headerLabel.setWidth(80);
tableHeader.addView(headerLabel);
}
tableContainer.addView(tableHeader);
for (var q = 1; q <= 4; q++) {
var tableRow = new Horizontal();
tableRow.setSpacing(5);
if (q % 2 === 0) {
tableRow.setBackgroundColor(248, 249, 250);
} else {
tableRow.setBackgroundColor(255, 255, 255);
}
for (var r = 1; r <= 4; r++) {
var cellLabel = new Label();
cellLabel.setText("数据" + q + "-" + r);
cellLabel.setTextColor(80, 80, 80);
cellLabel.setFontSize(12);
cellLabel.setTextAlignment("center");
cellLabel.setWidth(80);
tableRow.addView(cellLabel);
}
tableContainer.addView(tableRow);
}
nestedPage.addView(tableContainer);
// 工具栏布局
var toolbarSection = createSubSection("工具栏布局");
nestedPage.addView(toolbarSection);
var toolbarContainer = new Vertical();
toolbarContainer.setSpacing(10);
var toolbar = new Horizontal();
toolbar.setSpacing(5);
toolbar.setAlignment("center");
toolbar.setBackgroundColor(44, 62, 80);
var tools = [
{text: "新建", color: 46, g: 204, b: 113},
{text: "打开", color: 52, g: 152, b: 219},
{text: "保存", color: 241, g: 196, b: 15},
{text: "删除", color: 231, g: 76, b: 60}
];
for (var s = 0; s < tools.length; s++) {
var toolBtn = new Button();
toolBtn.setText(tools[s].text);
toolBtn.setColor(tools[s].color, tools[s].g, tools[s].b);
toolBtn.setTextColor(255, 255, 255);
toolBtn.setWidth(70);
toolBtn.setHeight(35);
// 添加点击事件
var btnText = tools[s].text;
toolBtn.onClick(function() {
printl("工具栏按钮点击: " + btnText);
// 显示提示信息
var toast = new Toast();
toast.setText(btnText + " 被点击");
toast.show(1000);
});
toolbar.addView(toolBtn);
}
toolbarContainer.addView(toolbar);
nestedPage.addView(toolbarContainer);
tab.addView(3, nestedPage);
// ====================== 第五页：实战应用 ======================
var appPage = new Vertical();
appPage.setSpacing(8);
appPage.setBackgroundColor(250, 248, 252);
var appHeader = createSectionHeader("实战应用演示", 231, 76, 60);
appPage.addView(appHeader);
var appDesc = new Label();
appDesc.setText("展示Horizontal容器在实际应用中的典型场景");
appDesc.setTextColor(100, 100, 100);
appDesc.setFontSize(13);
appDesc.setTextAlignment("center");
appPage.addView(appDesc);
// 场景1：底部导航栏
var navSection = createSubSection("底部导航栏");
appPage.addView(navSection);
var navBar = new Horizontal();
navBar.setSpacing(0);
navBar.setBackgroundColor(255, 255, 255);
var navItems = [
{icon: "首页", color: 52, g: 152, b: 219},
{icon: "发现", color: 150, g: 150, b: 150},
{icon: "消息", color: 150, g: 150, b: 150},
{icon: "我的", color: 150, g: 150, b: 150}
];
for (var t = 0; t < navItems.length; t++) {
var navItem = new Vertical();
navItem.setSpacing(3);
navItem.setAlignment("center");
navItem.setBackgroundColor(255, 255, 255);
var navIcon = new Label();
navIcon.setText(navItems[t].icon);
navIcon.setTextColor(navItems[t].color, navItems[t].g, navItems[t].b);
navIcon.setFontSize(12);
navIcon.setTextAlignment("center");
navItem.addView(navIcon);
navBar.addView(navItem);
}
appPage.addView(navBar);
// 场景2：用户信息栏
var userInfoSection = createSubSection("用户信息栏");
appPage.addView(userInfoSection);
var userInfoBar = new Horizontal();
userInfoBar.setSpacing(15);
userInfoBar.setBackgroundColor(255, 255, 255);
var avatar = new Label();
avatar.setText("头像");
avatar.setTextColor(255, 255, 255);
avatar.setFontSize(14);
avatar.setTextAlignment("center");
avatar.setBackgroundColor(52, 152, 219);
avatar.setWidth(60);
avatar.setHeight(60);
var userInfoText = new Vertical();
userInfoText.setSpacing(5);
userInfoText.setAlignment("left");
var userName = new Label();
userName.setText("用户名称");
userName.setTextColor(50, 50, 50);
userName.setFontSize(16);
var userDesc = new Label();
userDesc.setText("这是用户的个人简介描述");
userDesc.setTextColor(150, 150, 150);
userDesc.setFontSize(12);
userInfoText.addView(userName);
userInfoText.addView(userDesc);
var followBtn = new Button();
followBtn.setText("关注");
followBtn.setColor(231, 76, 60);
followBtn.setTextColor(255, 255, 255);
followBtn.setWidth(80);
followBtn.setHeight(35);
userInfoBar.addView(avatar);
userInfoBar.addView(userInfoText);
userInfoBar.addView(followBtn);
appPage.addView(userInfoBar);
// 场景3：标签选择器
var tagSection = createSubSection("标签选择器");
appPage.addView(tagSection);
var tagContainer = new Horizontal();
tagContainer.setSpacing(10);
tagContainer.setAlignment("center");
tagContainer.setBackgroundColor(255, 255, 255);
var tags = ["热门", "推荐", "最新", "精选", "关注"];
var tagColors = [
[231, 76, 60],
[46, 204, 113],
[52, 152, 219],
[155, 89, 182],
[241, 196, 15]
];
for (var u = 0; u < tags.length; u++) {
var tagBtn = new Button();
tagBtn.setText(tags[u]);
tagBtn.setColor(tagColors[u][0], tagColors[u][1], tagColors[u][2]);
tagBtn.setTextColor(255, 255, 255);
tagBtn.setWidth(60);
tagBtn.setHeight(30);
tagContainer.addView(tagBtn);
}
appPage.addView(tagContainer);
// 场景4：评分组件
var ratingSection = createSubSection("评分组件");
appPage.addView(ratingSection);
var ratingContainer = new Horizontal();
ratingContainer.setSpacing(5);
ratingContainer.setAlignment("center");
ratingContainer.setBackgroundColor(255, 255, 255);
for (var v = 1; v <= 5; v++) {
var star = new Label();
star.setText("★");
if (v <= 4) {
star.setTextColor(241, 196, 15);
} else {
star.setTextColor(200, 200, 200);
}
star.setFontSize(24);
star.setTextAlignment("center");
ratingContainer.addView(star);
}
var ratingText = new Label();
ratingText.setText("4.0分");
ratingText.setTextColor(80, 80, 80);
ratingText.setFontSize(14);
ratingContainer.addView(ratingText);
appPage.addView(ratingContainer);
// 场景5：进度指示器
var progressSection = createSubSection("步骤指示器");
appPage.addView(progressSection);
var progressContainer = new Horizontal();
progressContainer.setSpacing(10);
progressContainer.setAlignment("center");
progressContainer.setBackgroundColor(255, 255, 255);
var steps = ["步骤1", "步骤2", "步骤3", "步骤4"];
var stepStatus = [true, true, false, false];
for (var w = 0; w < steps.length; w++) {
if (w > 0) {
var line = new Label();
line.setText("→");
line.setTextColor(200, 200, 200);
line.setFontSize(16);
progressContainer.addView(line);
}
var stepLabel = new Label();
stepLabel.setText(steps[w]);
if (stepStatus[w]) {
stepLabel.setTextColor(46, 204, 113);
} else {
stepLabel.setTextColor(200, 200, 200);
}
stepLabel.setFontSize(12);
progressContainer.addView(stepLabel);
}
appPage.addView(progressContainer);
// 退出按钮
var exitContainer = new Horizontal();
exitContainer.setAlignment("center");
exitContainer.setBackgroundColor(250, 248, 252);
var exitBtn = new Button();
exitBtn.setText("退出示例");
exitBtn.setColor(231, 76, 60);
exitBtn.setTextColor(255, 255, 255);
exitBtn.setWidth(150);
exitBtn.setHeight(45);
exitBtn.onClick(function() {
printl("退出按钮被点击");
tab.dismiss();
});
exitContainer.addView(exitBtn);
appPage.addView(exitContainer);
tab.addView(4, appPage);
printl("Horizontal水平容器示例界面构建完成");
});
// ====================== 辅助函数 ======================
function createSectionHeader(text, r, g, b) {
var header = new Horizontal();
header.setAlignment("center");
header.setBackgroundColor(r, g, b);
var label = new Label();
label.setText(text);
label.setTextColor(255, 255, 255);
label.setFontSize(18);
label.setHeight(35);
header.addView(label);
return header;
}
function createSubSection(text) {
var section = new Horizontal();
section.setAlignment("center");
section.setBackgroundColor(220, 220, 225);
var label = new Label();
label.setText(text);
label.setTextColor(60, 60, 60);
label.setFontSize(15);
section.addView(label);
return section;
}
function createColorButton(text, r, g, b) {
var btn = new Button();
btn.setText(text);
btn.setColor(r, g, b);
btn.setTextColor(255, 255, 255);
btn.setWidth(80);
btn.setHeight(40);
btn.onClick(function() {
printl("按钮[" + text + "]被点击");
});
return btn;
}
function createAlignLabel(text, r, g, b) {
var label = new Label();
label.setText(text);
label.setTextColor(255, 255, 255);
label.setFontSize(14);
label.setTextAlignment("center");
label.setBackgroundColor(r, g, b);
label.setWidth(60);
label.setHeight(35);
return label;
}
function addDemoLabels(container, labels) {
for (var i = 0; i < labels.length; i++) {
var label = new Label();
label.setText(labels[i]);
label.setTextColor(80, 80, 80);
label.setFontSize(12);
label.setTextAlignment("center");
label.setWidth(120);
label.setHeight(30);
container.addView(label);
}
}
function addWhiteLabels(container, labels) {
for (var i = 0; i < labels.length; i++) {
var label = new Label();
label.setText(labels[i]);
label.setTextColor(255, 255, 255);
label.setFontSize(12);
label.setTextAlignment("center");
label.setWidth(120);
label.setHeight(30);
container.addView(label);
}
}
function createCardItem(text, r, g, b) {
var item = new Vertical();
item.setSpacing(5);
item.setAlignment("center");
item.setBackgroundColor(r, g, b);
var icon = new Label();
icon.setText(text);
icon.setTextColor(255, 255, 255);
icon.setFontSize(14);
icon.setTextAlignment("center");
item.addView(icon);
return item;
}
printl("Horizontal水平容器完整示例已启动");

复制代码