B2B网络软件

标题: AIWROK软件苹果水平容器[Horizontal]小实例 [打印本页]

---

作者: YYPOST群发软件    时间: 2026-3-5 08:52
标题: AIWROK软件苹果水平容器[Horizontal]小实例
AIWROK软件苹果水平容器[Horizontal]小实例

1. // 🎨UI-水平容器[Horizontal]全新系统化示例
   
2. // 全面展示Horizontal容器的所有功能和方法
   
3. // 🍎交流QQ群711841924群一，苹果内测群，528816639
   
4. 
   
5. printl("=== Horizontal水平容器全新系统化示例启动 ===");
   
6. 
   
7. var tab = new TabView();
   
8. 
   
9. tab.setTitles(["基础", "对齐", "动态", "嵌套", "实战"]);
   
10. 
    
11. tab.show(function() {
    
12.     printl("TabView界面加载完成");
    
13.    
    
14.     // ====================== 第一页：基础布局 ======================
    
15.     var basicPage = new Vertical();
    
16.     basicPage.setSpacing(8);
    
17.     basicPage.setBackgroundColor(248, 250, 252);
    
18.    
    
19.     var basicHeader = createSectionHeader("基础布局演示", 70, 130, 180);
    
20.     basicPage.addView(basicHeader);
    
21.    
    
22.     var basicDesc = new Label();
    
23.     basicDesc.setText("展示Horizontal容器的基本功能：addView添加控件、setSpacing设置间距、setBackgroundColor设置背景色");
    
24.     basicDesc.setTextColor(100, 100, 100);
    
25.     basicDesc.setFontSize(13);
    
26.     basicDesc.setTextAlignment("center");
    
27.     basicPage.addView(basicDesc);
    
28.    
    
29.     // 演示1：基本按钮组
    
30.     var demo1Section = createSubSection("基本按钮组");
    
31.     basicPage.addView(demo1Section);
    
32.    
    
33.     var buttonGroup = new Horizontal();
    
34.     buttonGroup.setSpacing(12);
    
35.     buttonGroup.setAlignment("center");
    
36.     buttonGroup.setBackgroundColor(245, 245, 245);
    
37.    
    
38.     var btn1 = createColorButton("首页", 52, 152, 219);
    
39.     var btn2 = createColorButton("分类", 46, 204, 113);
    
40.     var btn3 = createColorButton("购物车", 241, 196, 15);
    
41.     var btn4 = createColorButton("我的", 155, 89, 182);
    
42.    
    
43.     buttonGroup.addView(btn1);
    
44.     buttonGroup.addView(btn2);
    
45.     buttonGroup.addView(btn3);
    
46.     buttonGroup.addView(btn4);
    
47.    
    
48.     basicPage.addView(buttonGroup);
    
49.    
    
50.     // 演示2：不同间距对比 - 重新设计，使用彩色方块直观展示
    
51.     var demo2Section = createSubSection("间距对比演示");
    
52.     basicPage.addView(demo2Section);
    
53.    
    
54.     var spacingContainer = new Vertical();
    
55.     spacingContainer.setSpacing(15);
    
56.     spacingContainer.setBackgroundColor(255, 255, 255);
    
57.    
    
58.     // 小间距演示
    
59.     var smallRow = new Vertical();
    
60.     smallRow.setSpacing(5);
    
61.    
    
62.     var smallLabel = new Label();
    
63.     smallLabel.setText("setSpacing(5) - 小间距");
    
64.     smallLabel.setTextColor(80, 80, 80);
    
65.     smallLabel.setFontSize(12);
    
66.     smallRow.addView(smallLabel);
    
67.    
    
68.     var smallSpacing = new Horizontal();
    
69.     smallSpacing.setSpacing(5);
    
70.     smallSpacing.setAlignment("center");
    
71.     smallSpacing.setBackgroundColor(240, 240, 240);
    
72.    
    
73.     for (var s1 = 1; s1 <= 4; s1++) {
    
74.         var box1 = new Label();
    
75.         box1.setText("");
    
76.         box1.setBackgroundColor(52, 152, 219);
    
77.         box1.setWidth(40);
    
78.         box1.setHeight(40);
    
79.         smallSpacing.addView(box1);
    
80.     }
    
81.     smallRow.addView(smallSpacing);
    
82.    
    
83.     // 中间距演示
    
84.     var mediumRow = new Vertical();
    
85.     mediumRow.setSpacing(5);
    
86.    
    
87.     var mediumLabel = new Label();
    
88.     mediumLabel.setText("setSpacing(15) - 中间距");
    
89.     mediumLabel.setTextColor(80, 80, 80);
    
90.     mediumLabel.setFontSize(12);
    
91.     mediumRow.addView(mediumLabel);
    
92.    
    
93.     var mediumSpacing = new Horizontal();
    
94.     mediumSpacing.setSpacing(15);
    
95.     mediumSpacing.setAlignment("center");
    
96.     mediumSpacing.setBackgroundColor(240, 240, 240);
    
97.    
    
98.     for (var s2 = 1; s2 <= 4; s2++) {
    
99.         var box2 = new Label();
    
100.         box2.setText("");
     
101.         box2.setBackgroundColor(46, 204, 113);
     
102.         box2.setWidth(40);
     
103.         box2.setHeight(40);
     
104.         mediumSpacing.addView(box2);
     
105.     }
     
106.     mediumRow.addView(mediumSpacing);
     
107.    
     
108.     // 大间距演示
     
109.     var largeRow = new Vertical();
     
110.     largeRow.setSpacing(5);
     
111.    
     
112.     var largeLabel = new Label();
     
113.     largeLabel.setText("setSpacing(25) - 大间距");
     
114.     largeLabel.setTextColor(80, 80, 80);
     
115.     largeLabel.setFontSize(12);
     
116.     largeRow.addView(largeLabel);
     
117.    
     
118.     var largeSpacing = new Horizontal();
     
119.     largeSpacing.setSpacing(25);
     
120.     largeSpacing.setAlignment("center");
     
121.     largeSpacing.setBackgroundColor(240, 240, 240);
     
122.    
     
123.     for (var s3 = 1; s3 <= 4; s3++) {
     
124.         var box3 = new Label();
     
125.         box3.setText("");
     
126.         box3.setBackgroundColor(155, 89, 182);
     
127.         box3.setWidth(40);
     
128.         box3.setHeight(40);
     
129.         largeSpacing.addView(box3);
     
130.     }
     
131.     largeRow.addView(largeSpacing);
     
132.    
     
133.     spacingContainer.addView(smallRow);
     
134.     spacingContainer.addView(mediumRow);
     
135.     spacingContainer.addView(largeRow);
     
136.    
     
137.     basicPage.addView(spacingContainer);
     
138.    
     
139.     // 演示3：背景色设置 - 重新设计，展示完整背景效果
     
140.     var demo3Section = createSubSection("背景色设置");
     
141.     basicPage.addView(demo3Section);
     
142.    
     
143.     var bgContainer = new Vertical();
     
144.     bgContainer.setSpacing(12);
     
145.    
     
146.     // 红色背景
     
147.     var bg1 = new Horizontal();
     
148.     bg1.setSpacing(10);
     
149.     bg1.setAlignment("center");
     
150.     bg1.setBackgroundColor(231, 76, 60);
     
151.    
     
152.     var bg1Label = new Label();
     
153.     bg1Label.setText("setBackgroundColor(231, 76, 60)");
     
154.     bg1Label.setTextColor(255, 255, 255);
     
155.     bg1Label.setFontSize(14);
     
156.     bg1Label.setTextAlignment("center");
     
157.     bg1Label.setHeight(40);
     
158.     bg1.addView(bg1Label);
     
159.    
     
160.     // 绿色背景
     
161.     var bg2 = new Horizontal();
     
162.     bg2.setSpacing(10);
     
163.     bg2.setAlignment("center");
     
164.     bg2.setBackgroundColor(46, 204, 113);
     
165.    
     
166.     var bg2Label = new Label();
     
167.     bg2Label.setText("setBackgroundColor(46, 204, 113)");
     
168.     bg2Label.setTextColor(255, 255, 255);
     
169.     bg2Label.setFontSize(14);
     
170.     bg2Label.setTextAlignment("center");
     
171.     bg2Label.setHeight(40);
     
172.     bg2.addView(bg2Label);
     
173.    
     
174.     // 蓝色背景
     
175.     var bg3 = new Horizontal();
     
176.     bg3.setSpacing(10);
     
177.     bg3.setAlignment("center");
     
178.     bg3.setBackgroundColor(52, 152, 219);
     
179.    
     
180.     var bg3Label = new Label();
     
181.     bg3Label.setText("setBackgroundColor(52, 152, 219)");
     
182.     bg3Label.setTextColor(255, 255, 255);
     
183.     bg3Label.setFontSize(14);
     
184.     bg3Label.setTextAlignment("center");
     
185.     bg3Label.setHeight(40);
     
186.     bg3.addView(bg3Label);
     
187.    
     
188.     bgContainer.addView(bg1);
     
189.     bgContainer.addView(bg2);
     
190.     bgContainer.addView(bg3);
     
191.    
     
192.     basicPage.addView(bgContainer);
     
193.    
     
194.     tab.addView(0, basicPage);
     
195.    
     
196.     // ====================== 第二页：对齐方式 ======================
     
197.     var alignPage = new Vertical();
     
198.     alignPage.setSpacing(8);
     
199.     alignPage.setBackgroundColor(252, 248, 250);
     
200.    
     
201.     var alignHeader = createSectionHeader("对齐方式演示", 155, 89, 182);
     
202.     alignPage.addView(alignHeader);
     
203.    
     
204.     var alignDesc = new Label();
     
205.     alignDesc.setText("展示Horizontal容器的三种对齐方式：left左对齐、center居中对齐、right右对齐");
     
206.     alignDesc.setTextColor(100, 100, 100);
     
207.     alignDesc.setFontSize(13);
     
208.     alignDesc.setTextAlignment("center");
     
209.     alignPage.addView(alignDesc);
     
210.    
     
211.     // 左对齐演示
     
212.     var leftSection = createSubSection("左对齐 (left)");
     
213.     alignPage.addView(leftSection);
     
214.    
     
215.     var leftContainer = new Horizontal();
     
216.     leftContainer.setSpacing(5);
     
217.     leftContainer.setAlignment("left");
     
218.    
     
219.     var leftBox = new Label();
     
220.     leftBox.setText("左对齐内容");
     
221.     leftBox.setTextColor(255, 255, 255);
     
222.     leftBox.setFontSize(14);
     
223.     leftBox.setTextAlignment("center");
     
224.     leftBox.setBackgroundColor(100, 100, 100);
     
225.     leftBox.setWidth(150);
     
226.     leftBox.setHeight(40);
     
227.    
     
228.     leftContainer.addView(leftBox);
     
229.    
     
230.     alignPage.addView(leftContainer);
     
231.    
     
232.     // 居中对齐演示
     
233.     var centerSection = createSubSection("居中对齐 (center)");
     
234.     alignPage.addView(centerSection);
     
235.    
     
236.     var centerContainer = new Horizontal();
     
237.     centerContainer.setSpacing(5);
     
238.     centerContainer.setAlignment("center");
     
239.    
     
240.     var centerBox = new Label();
     
241.     centerBox.setText("居中对齐内容");
     
242.     centerBox.setTextColor(255, 255, 255);
     
243.     centerBox.setFontSize(14);
     
244.     centerBox.setTextAlignment("center");
     
245.     centerBox.setBackgroundColor(155, 89, 182);
     
246.     centerBox.setWidth(150);
     
247.     centerBox.setHeight(40);
     
248.    
     
249.     centerContainer.addView(centerBox);
     
250.    
     
251.     alignPage.addView(centerContainer);
     
252.    
     
253.     // 右对齐演示
     
254.     var rightSection = createSubSection("右对齐 (right)");
     
255.     alignPage.addView(rightSection);
     
256.    
     
257.     var rightContainer = new Horizontal();
     
258.     rightContainer.setSpacing(5);
     
259.     rightContainer.setAlignment("right");
     
260.    
     
261.     var rightBox = new Label();
     
262.     rightBox.setText("右对齐内容");
     
263.     rightBox.setTextColor(255, 255, 255);
     
264.     rightBox.setFontSize(14);
     
265.     rightBox.setTextAlignment("center");
     
266.     rightBox.setBackgroundColor(52, 73, 94);
     
267.     rightBox.setWidth(150);
     
268.     rightBox.setHeight(40);
     
269.    
     
270.     rightContainer.addView(rightBox);
     
271.    
     
272.     alignPage.addView(rightContainer);
     
273.    
     
274.     // 对齐方式对比
     
275.     var compareSection = createSubSection("对齐效果对比");
     
276.     alignPage.addView(compareSection);
     
277.    
     
278.     var compareContainer = new Vertical();
     
279.     compareContainer.setSpacing(12);
     
280.    
     
281.     var compareLabel = new Label();
     
282.     compareLabel.setText("同一行内容在不同对齐方式下的显示效果：");
     
283.     compareLabel.setTextColor(80, 80, 80);
     
284.     compareLabel.setFontSize(12);
     
285.     compareContainer.addView(compareLabel);
     
286.    
     
287.     var alignTypes = ["left", "center", "right"];
     
288.     var alignNames = ["左对齐", "居中对齐", "右对齐"];
     
289.    
     
290.     for (var i = 0; i < alignTypes.length; i++) {
     
291.         var row = new Horizontal();
     
292.         row.setSpacing(10);
     
293.         row.setAlignment(alignTypes[i]);
     
294.         row.setBackgroundColor(230, 240, 250);
     
295.         
     
296.         var contentLabel = new Label();
     
297.         contentLabel.setText(alignNames[i] + "内容");
     
298.         contentLabel.setTextColor(255, 255, 255);
     
299.         contentLabel.setFontSize(14);
     
300.         contentLabel.setTextAlignment("center");
     
301.         contentLabel.setBackgroundColor(52, 152, 219);
     
302.         contentLabel.setWidth(150);
     
303.         contentLabel.setHeight(35);
     
304.         row.addView(contentLabel);
     
305.         
     
306.         compareContainer.addView(row);
     
307.     }
     
308.    
     
309.     alignPage.addView(compareContainer);
     
310.    
     
311.     tab.addView(1, alignPage);
     
312.    
     
313.     // ====================== 第三页：动态管理 ======================
     
314.     var dynamicPage = new Vertical();
     
315.     dynamicPage.setSpacing(8);
     
316.     dynamicPage.setBackgroundColor(250, 252, 248);
     
317.    
     
318.     var dynamicHeader = createSectionHeader("动态管理演示", 46, 204, 113);
     
319.     dynamicPage.addView(dynamicHeader);
     
320.    
     
321.     var dynamicDesc = new Label();
     
322.     dynamicDesc.setText("展示动态添加、移除、清空控件以及获取控件数量的功能");
     
323.     dynamicDesc.setTextColor(100, 100, 100);
     
324.     dynamicDesc.setFontSize(13);
     
325.     dynamicDesc.setTextAlignment("center");
     
326.     dynamicPage.addView(dynamicDesc);
     
327.    
     
328.     // 动态添加演示
     
329.     var addSection = createSubSection("动态添加控件");
     
330.     dynamicPage.addView(addSection);
     
331.    
     
332.     var addContainer = new Vertical();
     
333.     addContainer.setSpacing(10);
     
334.    
     
335.     var dynamicHorizontal = new Horizontal();
     
336.     dynamicHorizontal.setSpacing(10);
     
337.     dynamicHorizontal.setAlignment("center");
     
338.     dynamicHorizontal.setBackgroundColor(240, 240, 240);
     
339.    
     
340.     var addButtonsArray = [];
     
341.    
     
342.     var addStatus = new Label();
     
343.     addStatus.setText("当前控件数量: 0");
     
344.     addStatus.setTextColor(46, 204, 113);
     
345.     addStatus.setFontSize(14);
     
346.     addContainer.addView(addStatus);
     
347.    
     
348.     var addBtn = new Button();
     
349.     addBtn.setText("添加控件");
     
350.     addBtn.setColor(46, 204, 113);
     
351.     addBtn.setTextColor(255, 255, 255);
     
352.     addBtn.setWidth(120);
     
353.     addBtn.setHeight(40);
     
354.     addBtn.onClick(function() {
     
355.         var newBtn = createColorButton("新" + (addButtonsArray.length + 1), 46, 204, 113);
     
356.         addButtonsArray.push(newBtn);
     
357.         dynamicHorizontal.addView(newBtn);
     
358.         addStatus.setText("当前控件数量: " + addButtonsArray.length);
     
359.         printl("添加控件，当前数量: " + addButtonsArray.length);
     
360.     });
     
361.    
     
362.     addContainer.addView(dynamicHorizontal);
     
363.     addContainer.addView(addBtn);
     
364.    
     
365.     dynamicPage.addView(addContainer);
     
366.    
     
367.     // 动态移除演示
     
368.     var removeSection = createSubSection("动态移除控件");
     
369.     dynamicPage.addView(removeSection);
     
370.    
     
371.     var removeContainer = new Vertical();
     
372.     removeContainer.setSpacing(10);
     
373.    
     
374.     var removeHorizontal = new Horizontal();
     
375.     removeHorizontal.setSpacing(10);
     
376.     removeHorizontal.setAlignment("center");
     
377.     removeHorizontal.setBackgroundColor(240, 240, 240);
     
378.    
     
379.     var removeButtonsArray = [];
     
380.     for (var j = 1; j <= 5; j++) {
     
381.         var itemBtn = createColorButton("项目" + j, 52, 152, 219);
     
382.         removeButtonsArray.push(itemBtn);
     
383.         removeHorizontal.addView(itemBtn);
     
384.     }
     
385.    
     
386.     var removeStatus = new Label();
     
387.     removeStatus.setText("当前控件数量: " + removeButtonsArray.length);
     
388.     removeStatus.setTextColor(231, 76, 60);
     
389.     removeStatus.setFontSize(14);
     
390.    
     
391.     var removeBtn = new Button();
     
392.     removeBtn.setText("移除第一个");
     
393.     removeBtn.setColor(231, 76, 60);
     
394.     removeBtn.setTextColor(255, 255, 255);
     
395.     removeBtn.setWidth(120);
     
396.     removeBtn.setHeight(40);
     
397.     removeBtn.onClick(function() {
     
398.         if (removeButtonsArray.length > 0) {
     
399.             removeButtonsArray.shift();
     
400.             removeHorizontal.clearAllViews();
     
401.             for (var k = 0; k < removeButtonsArray.length; k++) {
     
402.                 removeHorizontal.addView(removeButtonsArray[k]);
     
403.             }
     
404.             removeStatus.setText("当前控件数量: " + removeButtonsArray.length);
     
405.             printl("移除控件，剩余数量: " + removeButtonsArray.length);
     
406.         }
     
407.     });
     
408.    
     
409.     removeContainer.addView(removeHorizontal);
     
410.     removeContainer.addView(removeStatus);
     
411.     removeContainer.addView(removeBtn);
     
412.    
     
413.     dynamicPage.addView(removeContainer);
     
414.    
     
415.     // 清空控件演示
     
416.     var clearSection = createSubSection("清空所有控件");
     
417.     dynamicPage.addView(clearSection);
     
418.    
     
419.     var clearContainer = new Vertical();
     
420.     clearContainer.setSpacing(10);
     
421.    
     
422.     var clearHorizontal = new Horizontal();
     
423.     clearHorizontal.setSpacing(10);
     
424.     clearHorizontal.setAlignment("center");
     
425.     clearHorizontal.setBackgroundColor(240, 240, 240);
     
426.    
     
427.     var clearButtonsArray = [];
     
428.     for (var k = 1; k <= 4; k++) {
     
429.         var clearItemBtn = createColorButton("清" + k, 155, 89, 182);
     
430.         clearButtonsArray.push(clearItemBtn);
     
431.         clearHorizontal.addView(clearItemBtn);
     
432.     }
     
433.    
     
434.     var clearStatus = new Label();
     
435.     clearStatus.setText("当前控件数量: " + clearButtonsArray.length);
     
436.     clearStatus.setTextColor(155, 89, 182);
     
437.     clearStatus.setFontSize(14);
     
438.    
     
439.     var clearBtn = new Button();
     
440.     clearBtn.setText("清空所有");
     
441.     clearBtn.setColor(155, 89, 182);
     
442.     clearBtn.setTextColor(255, 255, 255);
     
443.     clearBtn.setWidth(120);
     
444.     clearBtn.setHeight(40);
     
445.     clearBtn.onClick(function() {
     
446.         clearButtonsArray = [];
     
447.         clearHorizontal.clearAllViews();
     
448.         clearStatus.setText("当前控件数量: " + clearButtonsArray.length);
     
449.         
     
450.         var emptyLabel = new Label();
     
451.         emptyLabel.setText("已清空所有控件");
     
452.         emptyLabel.setTextColor(150, 150, 150);
     
453.         emptyLabel.setFontSize(12);
     
454.         clearHorizontal.addView(emptyLabel);
     
455.         
     
456.         printl("清空所有控件");
     
457.     });
     
458.    
     
459.     clearContainer.addView(clearHorizontal);
     
460.     clearContainer.addView(clearStatus);
     
461.     clearContainer.addView(clearBtn);
     
462.    
     
463.     dynamicPage.addView(clearContainer);
     
464.    
     
465.     // 获取控件数量演示
     
466.     var countSection = createSubSection("获取控件数量");
     
467.     dynamicPage.addView(countSection);
     
468.    
     
469.     var countContainer = new Vertical();
     
470.     countContainer.setSpacing(10);
     
471.    
     
472.     var countHorizontal = new Horizontal();
     
473.     countHorizontal.setSpacing(10);
     
474.     countHorizontal.setAlignment("center");
     
475.     countHorizontal.setBackgroundColor(240, 240, 240);
     
476.    
     
477.     var countButtonsArray = [];
     
478.     for (var m = 1; m <= 3; m++) {
     
479.         var countItemBtn = createColorButton("计数" + m, 241, 196, 15);
     
480.         countButtonsArray.push(countItemBtn);
     
481.         countHorizontal.addView(countItemBtn);
     
482.     }
     
483.    
     
484.     var countResult = new Label();
     
485.     countResult.setText("点击按钮查看数量");
     
486.     countResult.setTextColor(241, 196, 15);
     
487.     countResult.setFontSize(14);
     
488.    
     
489.     var countBtn = new Button();
     
490.     countBtn.setText("获取数量");
     
491.     countBtn.setColor(241, 196, 15);
     
492.     countBtn.setTextColor(255, 255, 255);
     
493.     countBtn.setWidth(120);
     
494.     countBtn.setHeight(40);
     
495.     countBtn.onClick(function() {
     
496.         countResult.setText("当前控件数量: " + countButtonsArray.length);
     
497.         printl("获取控件数量: " + countButtonsArray.length);
     
498.     });
     
499.    
     
500.     countContainer.addView(countHorizontal);
     
501.     countContainer.addView(countResult);
     
502.     countContainer.addView(countBtn);
     
503.    
     
504.     dynamicPage.addView(countContainer);
     
505.    
     
506.     tab.addView(2, dynamicPage);
     
507.    
     
508.     // ====================== 第四页：嵌套布局 ======================
     
509.     var nestedPage = new Vertical();
     
510.     nestedPage.setSpacing(8);
     
511.     nestedPage.setBackgroundColor(248, 252, 250);
     
512.    
     
513.     var nestedHeader = createSectionHeader("嵌套布局演示", 230, 126, 34);
     
514.     nestedPage.addView(nestedHeader);
     
515.    
     
516.     var nestedDesc = new Label();
     
517.     nestedDesc.setText("展示Horizontal与Vertical容器的嵌套组合，实现复杂布局");
     
518.     nestedDesc.setTextColor(100, 100, 100);
     
519.     nestedDesc.setFontSize(13);
     
520.     nestedDesc.setTextAlignment("center");
     
521.     nestedPage.addView(nestedDesc);
     
522.    
     
523.     // 卡片式布局
     
524.     var cardSection = createSubSection("卡片式布局");
     
525.     nestedPage.addView(cardSection);
     
526.    
     
527.     var cardContainer = new Vertical();
     
528.     cardContainer.setSpacing(12);
     
529.    
     
530.     for (var n = 1; n <= 3; n++) {
     
531.         var card = new Vertical();
     
532.         card.setSpacing(8);
     
533.         card.setBackgroundColor(255, 255, 255);
     
534.         
     
535.         var cardHeader = new Horizontal();
     
536.         cardHeader.setSpacing(10);
     
537.         cardHeader.setBackgroundColor(52, 152, 219);
     
538.         
     
539.         var cardTitle = new Label();
     
540.         cardTitle.setText("卡片标题 " + n);
     
541.         cardTitle.setTextColor(255, 255, 255);
     
542.         cardTitle.setFontSize(16);
     
543.         cardHeader.addView(cardTitle);
     
544.         
     
545.         var cardContent = new Horizontal();
     
546.         cardContent.setSpacing(15);
     
547.         cardContent.setAlignment("center");
     
548.         
     
549.         var content1 = createCardItem("图标" + n + "A", 52, 152, 219);
     
550.         var content2 = createCardItem("图标" + n + "B", 46, 204, 113);
     
551.         var content3 = createCardItem("图标" + n + "C", 155, 89, 182);
     
552.         
     
553.         cardContent.addView(content1);
     
554.         cardContent.addView(content2);
     
555.         cardContent.addView(content3);
     
556.         
     
557.         card.addView(cardHeader);
     
558.         card.addView(cardContent);
     
559.         
     
560.         cardContainer.addView(card);
     
561.     }
     
562.    
     
563.     nestedPage.addView(cardContainer);
     
564.    
     
565.     // 表格式布局
     
566.     var tableSection = createSubSection("表格式布局");
     
567.     nestedPage.addView(tableSection);
     
568.    
     
569.     var tableContainer = new Vertical();
     
570.     tableContainer.setSpacing(8);
     
571.     tableContainer.setBackgroundColor(255, 255, 255);
     
572.    
     
573.     var tableHeader = new Horizontal();
     
574.     tableHeader.setSpacing(5);
     
575.     tableHeader.setBackgroundColor(52, 73, 94);
     
576.    
     
577.     var headers = ["列1", "列2", "列3", "列4"];
     
578.     for (var p = 0; p < headers.length; p++) {
     
579.         var headerLabel = new Label();
     
580.         headerLabel.setText(headers[p]);
     
581.         headerLabel.setTextColor(255, 255, 255);
     
582.         headerLabel.setFontSize(14);
     
583.         headerLabel.setTextAlignment("center");
     
584.         headerLabel.setWidth(80);
     
585.         tableHeader.addView(headerLabel);
     
586.     }
     
587.    
     
588.     tableContainer.addView(tableHeader);
     
589.    
     
590.     for (var q = 1; q <= 4; q++) {
     
591.         var tableRow = new Horizontal();
     
592.         tableRow.setSpacing(5);
     
593.         if (q % 2 === 0) {
     
594.             tableRow.setBackgroundColor(248, 249, 250);
     
595.         } else {
     
596.             tableRow.setBackgroundColor(255, 255, 255);
     
597.         }
     
598.         
     
599.         for (var r = 1; r <= 4; r++) {
     
600.             var cellLabel = new Label();
     
601.             cellLabel.setText("数据" + q + "-" + r);
     
602.             cellLabel.setTextColor(80, 80, 80);
     
603.             cellLabel.setFontSize(12);
     
604.             cellLabel.setTextAlignment("center");
     
605.             cellLabel.setWidth(80);
     
606.             tableRow.addView(cellLabel);
     
607.         }
     
608.         
     
609.         tableContainer.addView(tableRow);
     
610.     }
     
611.    
     
612.     nestedPage.addView(tableContainer);
     
613.    
     
614.     // 工具栏布局
     
615.     var toolbarSection = createSubSection("工具栏布局");
     
616.     nestedPage.addView(toolbarSection);
     
617.    
     
618.     var toolbarContainer = new Vertical();
     
619.     toolbarContainer.setSpacing(10);
     
620.    
     
621.     var toolbar = new Horizontal();
     
622.     toolbar.setSpacing(5);
     
623.     toolbar.setAlignment("center");
     
624.     toolbar.setBackgroundColor(44, 62, 80);
     
625.    
     
626.     var tools = [
     
627.         {text: "新建", color: 46, g: 204, b: 113},
     
628.         {text: "打开", color: 52, g: 152, b: 219},
     
629.         {text: "保存", color: 241, g: 196, b: 15},
     
630.         {text: "删除", color: 231, g: 76, b: 60}
     
631.     ];
     
632.    
     
633.     for (var s = 0; s < tools.length; s++) {
     
634.         var toolBtn = new Button();
     
635.         toolBtn.setText(tools[s].text);
     
636.         toolBtn.setColor(tools[s].color, tools[s].g, tools[s].b);
     
637.         toolBtn.setTextColor(255, 255, 255);
     
638.         toolBtn.setWidth(70);
     
639.         toolBtn.setHeight(35);
     
640.         
     
641.         // 添加点击事件
     
642.         var btnText = tools[s].text;
     
643.         toolBtn.onClick(function() {
     
644.             printl("工具栏按钮点击: " + btnText);
     
645.             
     
646.             // 显示提示信息
     
647.             var toast = new Toast();
     
648.             toast.setText(btnText + " 被点击");
     
649.             toast.show(1000);
     
650.         });
     
651.         
     
652.         toolbar.addView(toolBtn);
     
653.     }
     
654.    
     
655.     toolbarContainer.addView(toolbar);
     
656.    
     
657.     nestedPage.addView(toolbarContainer);
     
658.    
     
659.     tab.addView(3, nestedPage);
     
660.    
     
661.     // ====================== 第五页：实战应用 ======================
     
662.     var appPage = new Vertical();
     
663.     appPage.setSpacing(8);
     
664.     appPage.setBackgroundColor(250, 248, 252);
     
665.    
     
666.     var appHeader = createSectionHeader("实战应用演示", 231, 76, 60);
     
667.     appPage.addView(appHeader);
     
668.    
     
669.     var appDesc = new Label();
     
670.     appDesc.setText("展示Horizontal容器在实际应用中的典型场景");
     
671.     appDesc.setTextColor(100, 100, 100);
     
672.     appDesc.setFontSize(13);
     
673.     appDesc.setTextAlignment("center");
     
674.     appPage.addView(appDesc);
     
675.    
     
676.     // 场景1：底部导航栏
     
677.     var navSection = createSubSection("底部导航栏");
     
678.     appPage.addView(navSection);
     
679.    
     
680.     var navBar = new Horizontal();
     
681.     navBar.setSpacing(0);
     
682.     navBar.setBackgroundColor(255, 255, 255);
     
683.    
     
684.     var navItems = [
     
685.         {icon: "首页", color: 52, g: 152, b: 219},
     
686.         {icon: "发现", color: 150, g: 150, b: 150},
     
687.         {icon: "消息", color: 150, g: 150, b: 150},
     
688.         {icon: "我的", color: 150, g: 150, b: 150}
     
689.     ];
     
690.    
     
691.     for (var t = 0; t < navItems.length; t++) {
     
692.         var navItem = new Vertical();
     
693.         navItem.setSpacing(3);
     
694.         navItem.setAlignment("center");
     
695.         navItem.setBackgroundColor(255, 255, 255);
     
696.         
     
697.         var navIcon = new Label();
     
698.         navIcon.setText(navItems[t].icon);
     
699.         navIcon.setTextColor(navItems[t].color, navItems[t].g, navItems[t].b);
     
700.         navIcon.setFontSize(12);
     
701.         navIcon.setTextAlignment("center");
     
702.         
     
703.         navItem.addView(navIcon);
     
704.         navBar.addView(navItem);
     
705.     }
     
706.    
     
707.     appPage.addView(navBar);
     
708.    
     
709.     // 场景2：用户信息栏
     
710.     var userInfoSection = createSubSection("用户信息栏");
     
711.     appPage.addView(userInfoSection);
     
712.    
     
713.     var userInfoBar = new Horizontal();
     
714.     userInfoBar.setSpacing(15);
     
715.     userInfoBar.setBackgroundColor(255, 255, 255);
     
716.    
     
717.     var avatar = new Label();
     
718.     avatar.setText("头像");
     
719.     avatar.setTextColor(255, 255, 255);
     
720.     avatar.setFontSize(14);
     
721.     avatar.setTextAlignment("center");
     
722.     avatar.setBackgroundColor(52, 152, 219);
     
723.     avatar.setWidth(60);
     
724.     avatar.setHeight(60);
     
725.    
     
726.     var userInfoText = new Vertical();
     
727.     userInfoText.setSpacing(5);
     
728.     userInfoText.setAlignment("left");
     
729.    
     
730.     var userName = new Label();
     
731.     userName.setText("用户名称");
     
732.     userName.setTextColor(50, 50, 50);
     
733.     userName.setFontSize(16);
     
734.    
     
735.     var userDesc = new Label();
     
736.     userDesc.setText("这是用户的个人简介描述");
     
737.     userDesc.setTextColor(150, 150, 150);
     
738.     userDesc.setFontSize(12);
     
739.    
     
740.     userInfoText.addView(userName);
     
741.     userInfoText.addView(userDesc);
     
742.    
     
743.     var followBtn = new Button();
     
744.     followBtn.setText("关注");
     
745.     followBtn.setColor(231, 76, 60);
     
746.     followBtn.setTextColor(255, 255, 255);
     
747.     followBtn.setWidth(80);
     
748.     followBtn.setHeight(35);
     
749.    
     
750.     userInfoBar.addView(avatar);
     
751.     userInfoBar.addView(userInfoText);
     
752.     userInfoBar.addView(followBtn);
     
753.    
     
754.     appPage.addView(userInfoBar);
     
755.    
     
756.     // 场景3：标签选择器
     
757.     var tagSection = createSubSection("标签选择器");
     
758.     appPage.addView(tagSection);
     
759.    
     
760.     var tagContainer = new Horizontal();
     
761.     tagContainer.setSpacing(10);
     
762.     tagContainer.setAlignment("center");
     
763.     tagContainer.setBackgroundColor(255, 255, 255);
     
764.    
     
765.     var tags = ["热门", "推荐", "最新", "精选", "关注"];
     
766.     var tagColors = [
     
767.         [231, 76, 60],
     
768.         [46, 204, 113],
     
769.         [52, 152, 219],
     
770.         [155, 89, 182],
     
771.         [241, 196, 15]
     
772.     ];
     
773.    
     
774.     for (var u = 0; u < tags.length; u++) {
     
775.         var tagBtn = new Button();
     
776.         tagBtn.setText(tags[u]);
     
777.         tagBtn.setColor(tagColors[u][0], tagColors[u][1], tagColors[u][2]);
     
778.         tagBtn.setTextColor(255, 255, 255);
     
779.         tagBtn.setWidth(60);
     
780.         tagBtn.setHeight(30);
     
781.         tagContainer.addView(tagBtn);
     
782.     }
     
783.    
     
784.     appPage.addView(tagContainer);
     
785.    
     
786.     // 场景4：评分组件
     
787.     var ratingSection = createSubSection("评分组件");
     
788.     appPage.addView(ratingSection);
     
789.    
     
790.     var ratingContainer = new Horizontal();
     
791.     ratingContainer.setSpacing(5);
     
792.     ratingContainer.setAlignment("center");
     
793.     ratingContainer.setBackgroundColor(255, 255, 255);
     
794.    
     
795.     for (var v = 1; v <= 5; v++) {
     
796.         var star = new Label();
     
797.         star.setText("★");
     
798.         if (v <= 4) {
     
799.             star.setTextColor(241, 196, 15);
     
800.         } else {
     
801.             star.setTextColor(200, 200, 200);
     
802.         }
     
803.         star.setFontSize(24);
     
804.         star.setTextAlignment("center");
     
805.         ratingContainer.addView(star);
     
806.     }
     
807.    
     
808.     var ratingText = new Label();
     
809.     ratingText.setText("4.0分");
     
810.     ratingText.setTextColor(80, 80, 80);
     
811.     ratingText.setFontSize(14);
     
812.     ratingContainer.addView(ratingText);
     
813.    
     
814.     appPage.addView(ratingContainer);
     
815.    
     
816.     // 场景5：进度指示器
     
817.     var progressSection = createSubSection("步骤指示器");
     
818.     appPage.addView(progressSection);
     
819.    
     
820.     var progressContainer = new Horizontal();
     
821.     progressContainer.setSpacing(10);
     
822.     progressContainer.setAlignment("center");
     
823.     progressContainer.setBackgroundColor(255, 255, 255);
     
824.    
     
825.     var steps = ["步骤1", "步骤2", "步骤3", "步骤4"];
     
826.     var stepStatus = [true, true, false, false];
     
827.    
     
828.     for (var w = 0; w < steps.length; w++) {
     
829.         if (w > 0) {
     
830.             var line = new Label();
     
831.             line.setText("→");
     
832.             line.setTextColor(200, 200, 200);
     
833.             line.setFontSize(16);
     
834.             progressContainer.addView(line);
     
835.         }
     
836.         
     
837.         var stepLabel = new Label();
     
838.         stepLabel.setText(steps[w]);
     
839.         if (stepStatus[w]) {
     
840.             stepLabel.setTextColor(46, 204, 113);
     
841.         } else {
     
842.             stepLabel.setTextColor(200, 200, 200);
     
843.         }
     
844.         stepLabel.setFontSize(12);
     
845.         progressContainer.addView(stepLabel);
     
846.     }
     
847.    
     
848.     appPage.addView(progressContainer);
     
849.    
     
850.     // 退出按钮
     
851.     var exitContainer = new Horizontal();
     
852.     exitContainer.setAlignment("center");
     
853.     exitContainer.setBackgroundColor(250, 248, 252);
     
854.    
     
855.     var exitBtn = new Button();
     
856.     exitBtn.setText("退出示例");
     
857.     exitBtn.setColor(231, 76, 60);
     
858.     exitBtn.setTextColor(255, 255, 255);
     
859.     exitBtn.setWidth(150);
     
860.     exitBtn.setHeight(45);
     
861.     exitBtn.onClick(function() {
     
862.         printl("退出按钮被点击");
     
863.         tab.dismiss();
     
864.     });
     
865.    
     
866.     exitContainer.addView(exitBtn);
     
867.     appPage.addView(exitContainer);
     
868.    
     
869.     tab.addView(4, appPage);
     
870.    
     
871.     printl("Horizontal水平容器示例界面构建完成");
     
872. });
     
873. 
     
874. // ====================== 辅助函数 ======================
     
875. 
     
876. function createSectionHeader(text, r, g, b) {
     
877.     var header = new Horizontal();
     
878.     header.setAlignment("center");
     
879.     header.setBackgroundColor(r, g, b);
     
880.    
     
881.     var label = new Label();
     
882.     label.setText(text);
     
883.     label.setTextColor(255, 255, 255);
     
884.     label.setFontSize(18);
     
885.     label.setHeight(35);
     
886.     header.addView(label);
     
887.    
     
888.     return header;
     
889. }
     
890. 
     
891. function createSubSection(text) {
     
892.     var section = new Horizontal();
     
893.     section.setAlignment("center");
     
894.     section.setBackgroundColor(220, 220, 225);
     
895.    
     
896.     var label = new Label();
     
897.     label.setText(text);
     
898.     label.setTextColor(60, 60, 60);
     
899.     label.setFontSize(15);
     
900.     section.addView(label);
     
901.    
     
902.     return section;
     
903. }
     
904. 
     
905. function createColorButton(text, r, g, b) {
     
906.     var btn = new Button();
     
907.     btn.setText(text);
     
908.     btn.setColor(r, g, b);
     
909.     btn.setTextColor(255, 255, 255);
     
910.     btn.setWidth(80);
     
911.     btn.setHeight(40);
     
912.     btn.onClick(function() {
     
913.         printl("按钮[" + text + "]被点击");
     
914.     });
     
915.     return btn;
     
916. }
     
917. 
     
918. function createAlignLabel(text, r, g, b) {
     
919.     var label = new Label();
     
920.     label.setText(text);
     
921.     label.setTextColor(255, 255, 255);
     
922.     label.setFontSize(14);
     
923.     label.setTextAlignment("center");
     
924.     label.setBackgroundColor(r, g, b);
     
925.     label.setWidth(60);
     
926.     label.setHeight(35);
     
927.     return label;
     
928. }
     
929. 
     
930. function addDemoLabels(container, labels) {
     
931.     for (var i = 0; i < labels.length; i++) {
     
932.         var label = new Label();
     
933.         label.setText(labels[i]);
     
934.         label.setTextColor(80, 80, 80);
     
935.         label.setFontSize(12);
     
936.         label.setTextAlignment("center");
     
937.         label.setWidth(120);
     
938.         label.setHeight(30);
     
939.         container.addView(label);
     
940.     }
     
941. }
     
942. 
     
943. function addWhiteLabels(container, labels) {
     
944.     for (var i = 0; i < labels.length; i++) {
     
945.         var label = new Label();
     
946.         label.setText(labels[i]);
     
947.         label.setTextColor(255, 255, 255);
     
948.         label.setFontSize(12);
     
949.         label.setTextAlignment("center");
     
950.         label.setWidth(120);
     
951.         label.setHeight(30);
     
952.         container.addView(label);
     
953.     }
     
954. }
     
955. 
     
956. function createCardItem(text, r, g, b) {
     
957.     var item = new Vertical();
     
958.     item.setSpacing(5);
     
959.     item.setAlignment("center");
     
960.     item.setBackgroundColor(r, g, b);
     
961.    
     
962.     var icon = new Label();
     
963.     icon.setText(text);
     
964.     icon.setTextColor(255, 255, 255);
     
965.     icon.setFontSize(14);
     
966.     icon.setTextAlignment("center");
     
967.    
     
968.     item.addView(icon);
     
969.     return item;
     
970. }
     
971. 
     
972. printl("Horizontal水平容器完整示例已启动");
     

复制代码

---

欢迎光临 B2B网络软件 (http://bbs.niubt.cn/)

Powered by Discuz! X3.2