AIWROK软件苹果水平容器[Horizontal]小实例

群发软件

	AIWROK软件苹果水平容器[Horizontal]小实例 // &#127912;UI-水平容器[Horizontal]全新系统化示例 // 全面展示Horizontal容器的所有功能和方法 // &#127822;交流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水平容器完整示例已启动"); 复制代码