AIWROKÈí¼þÆ»¹ûʵÀýUI-´¹Ö±ÈÝÆ÷[Vertical]

YYPOSTȺ·¢Èí¼þ

AIWROKÈí¼þÆ»¹ûʵÀýUI-´¹Ö±ÈÝÆ÷[Vertical]

1. // 🎨UI-´¹Ö±ÈÝÆ÷[Vertical]¸ß¼¶×ÛºÏʾÀý
   
2. // È«ÃæչʾVerticalÈÝÆ÷µÄËùÓй¦Äܺͷ½·¨
   
3. // 🍎½»Á÷QQȺ711841924Ⱥһ£¬Æ»¹ûÄÚ²âȺ£¬528816639
   
4. 
   
5. printl("=== VerticalÈÝÆ÷¸ß¼¶×ÛºÏʾÀýÆô¶¯ ===");
   
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(15);
    
17.     basicPage.setBackgroundColor(245, 248, 250);
    
18.    
    
19.     var basicHeader = new Horizontal();
    
20.     basicHeader.setAlignment("center");
    
21.     basicHeader.setBackgroundColor(70, 130, 180);
    
22.    
    
23.     var basicHeaderLabel = new Label();
    
24.     basicHeaderLabel.setText("»ù´¡²¼¾ÖÑÝʾ");
    
25.     basicHeaderLabel.setTextColor(255, 255, 255);
    
26.     basicHeaderLabel.setFontSize(20);
    
27.     basicHeader.addView(basicHeaderLabel);
    
28.    
    
29.     basicPage.addView(basicHeader);
    
30.    
    
31.     var basicDesc = new Label();
    
32.     basicDesc.setText("չʾVerticalÈÝÆ÷µÄ»ù±¾²¼¾Ö¹¦ÄÜ£¬°üÀ¨¼ä¾à¡¢±³¾°É«¡¢ÈÝÆ÷´óСµÈ»ù´¡ÊôÐÔ");
    
33.     basicDesc.setTextColor(100, 100, 100);
    
34.     basicDesc.setFontSize(13);
    
35.     basicDesc.setTextAlignment("center");
    
36.     basicPage.addView(basicDesc);
    
37.    
    
38.     var basicSection1 = new Horizontal();
    
39.     basicSection1.setAlignment("center");
    
40.     basicSection1.setBackgroundColor(220, 220, 225);
    
41.    
    
42.     var basicSection1Label = new Label();
    
43.     basicSection1Label.setText("ÈÝÆ÷ÊôÐÔÉèÖÃ");
    
44.     basicSection1Label.setTextColor(60, 60, 60);
    
45.     basicSection1Label.setFontSize(15);
    
46.     basicSection1.addView(basicSection1Label);
    
47.    
    
48.     basicPage.addView(basicSection1);
    
49.    
    
50.     var basicDemo1 = new Vertical();
    
51.     basicDemo1.setSpacing(10);
    
52.     basicDemo1.setBackgroundColor(255, 255, 255);
    
53.     basicDemo1.setContainerSize(350, 120);
    
54.    
    
55.     var basicLabel1 = new Label();
    
56.     basicLabel1.setText("¼ä¾à: 10px | ±³¾°É«: °×É«");
    
57.     basicLabel1.setTextColor(60, 60, 60);
    
58.     basicLabel1.setFontSize(14);
    
59.     basicDemo1.addView(basicLabel1);
    
60.    
    
61.     var basicLabel2 = new Label();
    
62.     basicLabel2.setText("ÈÝÆ÷´óС: 350x120");
    
63.     basicLabel2.setTextColor(100, 100, 100);
    
64.     basicLabel2.setFontSize(12);
    
65.     basicDemo1.addView(basicLabel2);
    
66.    
    
67.     var basicBtn1 = new Button();
    
68.     basicBtn1.setText("²âÊÔ°´Å¥");
    
69.     basicBtn1.setColor(70, 130, 180);
    
70.     basicBtn1.setTextColor(255, 255, 255);
    
71.     basicBtn1.onClick(function() {
    
72.         printl("²âÊÔ°´Å¥±»µã»÷ÁË£¡");
    
73.         var feedbackLabel = new Label();
    
74.         feedbackLabel.setText("°´Å¥µã»÷³É¹¦£¡");
    
75.         feedbackLabel.setTextColor(0, 128, 0);
    
76.         feedbackLabel.setFontSize(12);
    
77.         basicDemo1.addView(feedbackLabel);
    
78.     });
    
79.     basicDemo1.addView(basicBtn1);
    
80.    
    
81.     basicPage.addView(basicDemo1);
    
82.    
    
83.     var basicSection2 = new Horizontal();
    
84.     basicSection2.setAlignment("center");
    
85.     basicSection2.setBackgroundColor(220, 220, 225);
    
86.    
    
87.     var basicSection2Label = new Label();
    
88.     basicSection2Label.setText("²»Í¬¼ä¾à¶Ô±È");
    
89.     basicSection2Label.setTextColor(60, 60, 60);
    
90.     basicSection2Label.setFontSize(15);
    
91.     basicSection2.addView(basicSection2Label);
    
92.    
    
93.     basicPage.addView(basicSection2);
    
94.    
    
95.     var basicSpacingContainer = new Vertical();
    
96.     basicSpacingContainer.setSpacing(8);
    
97.     basicSpacingContainer.setBackgroundColor(255, 255, 255);
    
98.    
    
99.     var basicSpacingDemo1 = new Vertical();
    
100.     basicSpacingDemo1.setSpacing(5);
     
101.     basicSpacingDemo1.setBackgroundColor(245, 245, 245);
     
102.    
     
103.     var basicSpacingDemo1Label = new Label();
     
104.     basicSpacingDemo1Label.setText("¼ä¾à5px");
     
105.     basicSpacingDemo1Label.setTextColor(80, 80, 80);
     
106.     basicSpacingDemo1Label.setFontSize(13);
     
107.     basicSpacingDemo1.addView(basicSpacingDemo1Label);
     
108.    
     
109.     var basicSpacingDemo1Label2 = new Label();
     
110.     basicSpacingDemo1Label2.setText("ʾÀý±êÇ©");
     
111.     basicSpacingDemo1Label2.setTextColor(120, 120, 120);
     
112.     basicSpacingDemo1Label2.setFontSize(11);
     
113.     basicSpacingDemo1.addView(basicSpacingDemo1Label2);
     
114.    
     
115.     var basicSpacingDemo1Btn = new Button();
     
116.     basicSpacingDemo1Btn.setText("°´Å¥");
     
117.     basicSpacingDemo1Btn.setColor(150, 150, 150);
     
118.     basicSpacingDemo1Btn.setTextColor(255, 255, 255);
     
119.     basicSpacingDemo1Btn.setWidth(80);
     
120.     basicSpacingDemo1Btn.setHeight(30);
     
121.     basicSpacingDemo1.addView(basicSpacingDemo1Btn);
     
122.    
     
123.     basicSpacingContainer.addView(basicSpacingDemo1);
     
124.    
     
125.     var basicSpacingDemo2 = new Vertical();
     
126.     basicSpacingDemo2.setSpacing(15);
     
127.     basicSpacingDemo2.setBackgroundColor(245, 245, 245);
     
128.    
     
129.     var basicSpacingDemo2Label = new Label();
     
130.     basicSpacingDemo2Label.setText("¼ä¾à15px");
     
131.     basicSpacingDemo2Label.setTextColor(80, 80, 80);
     
132.     basicSpacingDemo2Label.setFontSize(13);
     
133.     basicSpacingDemo2.addView(basicSpacingDemo2Label);
     
134.    
     
135.     var basicSpacingDemo2Label2 = new Label();
     
136.     basicSpacingDemo2Label2.setText("ʾÀý±êÇ©");
     
137.     basicSpacingDemo2Label2.setTextColor(120, 120, 120);
     
138.     basicSpacingDemo2Label2.setFontSize(11);
     
139.     basicSpacingDemo2.addView(basicSpacingDemo2Label2);
     
140.    
     
141.     var basicSpacingDemo2Btn = new Button();
     
142.     basicSpacingDemo2Btn.setText("°´Å¥");
     
143.     basicSpacingDemo2Btn.setColor(150, 150, 150);
     
144.     basicSpacingDemo2Btn.setTextColor(255, 255, 255);
     
145.     basicSpacingDemo2Btn.setWidth(80);
     
146.     basicSpacingDemo2Btn.setHeight(30);
     
147.     basicSpacingDemo2.addView(basicSpacingDemo2Btn);
     
148.    
     
149.     basicSpacingContainer.addView(basicSpacingDemo2);
     
150.    
     
151.     var basicSpacingDemo3 = new Vertical();
     
152.     basicSpacingDemo3.setSpacing(25);
     
153.     basicSpacingDemo3.setBackgroundColor(245, 245, 245);
     
154.    
     
155.     var basicSpacingDemo3Label = new Label();
     
156.     basicSpacingDemo3Label.setText("¼ä¾à25px");
     
157.     basicSpacingDemo3Label.setTextColor(80, 80, 80);
     
158.     basicSpacingDemo3Label.setFontSize(13);
     
159.     basicSpacingDemo3.addView(basicSpacingDemo3Label);
     
160.    
     
161.     var basicSpacingDemo3Label2 = new Label();
     
162.     basicSpacingDemo3Label2.setText("ʾÀý±êÇ©");
     
163.     basicSpacingDemo3Label2.setTextColor(120, 120, 120);
     
164.     basicSpacingDemo3Label2.setFontSize(11);
     
165.     basicSpacingDemo3.addView(basicSpacingDemo3Label2);
     
166.    
     
167.     var basicSpacingDemo3Btn = new Button();
     
168.     basicSpacingDemo3Btn.setText("°´Å¥");
     
169.     basicSpacingDemo3Btn.setColor(150, 150, 150);
     
170.     basicSpacingDemo3Btn.setTextColor(255, 255, 255);
     
171.     basicSpacingDemo3Btn.setWidth(80);
     
172.     basicSpacingDemo3Btn.setHeight(30);
     
173.     basicSpacingDemo3.addView(basicSpacingDemo3Btn);
     
174.    
     
175.     basicSpacingContainer.addView(basicSpacingDemo3);
     
176.    
     
177.     basicPage.addView(basicSpacingContainer);
     
178.    
     
179.     // ====================== µÚ¶þÒ³£º¸ß¼¶¶ÔÆë ======================
     
180.     var alignPage = new Vertical();
     
181.     alignPage.setSpacing(15);
     
182.     alignPage.setBackgroundColor(250, 245, 248);
     
183.    
     
184.     var alignHeader = new Horizontal();
     
185.     alignHeader.setAlignment("center");
     
186.     alignHeader.setBackgroundColor(70, 130, 180);
     
187.    
     
188.     var alignHeaderLabel = new Label();
     
189.     alignHeaderLabel.setText("¸ß¼¶¶ÔÆëÑÝʾ");
     
190.     alignHeaderLabel.setTextColor(255, 255, 255);
     
191.     alignHeaderLabel.setFontSize(20);
     
192.     alignHeader.addView(alignHeaderLabel);
     
193.    
     
194.     alignPage.addView(alignHeader);
     
195.    
     
196.     var alignDesc = new Label();
     
197.     alignDesc.setText("չʾVerticalÈÝÆ÷µÄ¸÷ÖÖ¶ÔÆ뷽ʽ£¬°üÀ¨left¡¢center¡¢right¡¢fillËÄÖÖ¶ÔÆëģʽ");
     
198.     alignDesc.setTextColor(100, 100, 100);
     
199.     alignDesc.setFontSize(13);
     
200.     alignDesc.setTextAlignment("center");
     
201.     alignPage.addView(alignDesc);
     
202.    
     
203.     var alignSection1 = new Horizontal();
     
204.     alignSection1.setAlignment("center");
     
205.     alignSection1.setBackgroundColor(220, 220, 225);
     
206.    
     
207.     var alignSection1Label = new Label();
     
208.     alignSection1Label.setText("¶ÔÆ뷽ʽ¶Ô±È");
     
209.     alignSection1Label.setTextColor(60, 60, 60);
     
210.     alignSection1Label.setFontSize(15);
     
211.     alignSection1.addView(alignSection1Label);
     
212.    
     
213.     alignPage.addView(alignSection1);
     
214.    
     
215.     var alignLeft = new Vertical();
     
216.     alignLeft.setSpacing(8);
     
217.     alignLeft.setAlignment("left");
     
218.     alignLeft.setBackgroundColor(230, 250, 230);
     
219.     alignLeft.setContainerSize(350, 80);
     
220.    
     
221.     var alignLeftLabel = new Label();
     
222.     alignLeftLabel.setText("×ó¶ÔÆë (left)");
     
223.     alignLeftLabel.setTextColor(60, 60, 60);
     
224.     alignLeftLabel.setFontSize(14);
     
225.     alignLeft.addView(alignLeftLabel);
     
226.    
     
227.     var alignLeftLabel2 = new Label();
     
228.     alignLeftLabel2.setText("¶ÔÆëЧ¹ûÑÝʾÎı¾");
     
229.     alignLeftLabel2.setTextColor(100, 100, 100);
     
230.     alignLeftLabel2.setFontSize(12);
     
231.     alignLeft.addView(alignLeftLabel2);
     
232.    
     
233.     alignPage.addView(alignLeft);
     
234.    
     
235.     var alignCenter = new Vertical();
     
236.     alignCenter.setSpacing(8);
     
237.     alignCenter.setAlignment("center");
     
238.     alignCenter.setBackgroundColor(250, 230, 230);
     
239.     alignCenter.setContainerSize(350, 80);
     
240.    
     
241.     var alignCenterLabel = new Label();
     
242.     alignCenterLabel.setText("¾ÓÖжÔÆë (center)");
     
243.     alignCenterLabel.setTextColor(60, 60, 60);
     
244.     alignCenterLabel.setFontSize(14);
     
245.     alignCenter.addView(alignCenterLabel);
     
246.    
     
247.     var alignCenterLabel2 = new Label();
     
248.     alignCenterLabel2.setText("¶ÔÆëЧ¹ûÑÝʾÎı¾");
     
249.     alignCenterLabel2.setTextColor(100, 100, 100);
     
250.     alignCenterLabel2.setFontSize(12);
     
251.     alignCenter.addView(alignCenterLabel2);
     
252.    
     
253.     alignPage.addView(alignCenter);
     
254.    
     
255.     var alignRight = new Vertical();
     
256.     alignRight.setSpacing(8);
     
257.     alignRight.setAlignment("right");
     
258.     alignRight.setBackgroundColor(230, 230, 250);
     
259.     alignRight.setContainerSize(350, 80);
     
260.    
     
261.     var alignRightLabel = new Label();
     
262.     alignRightLabel.setText("ÓÒ¶ÔÆë (right)");
     
263.     alignRightLabel.setTextColor(60, 60, 60);
     
264.     alignRightLabel.setFontSize(14);
     
265.     alignRight.addView(alignRightLabel);
     
266.    
     
267.     var alignRightLabel2 = new Label();
     
268.     alignRightLabel2.setText("¶ÔÆëЧ¹ûÑÝʾÎı¾");
     
269.     alignRightLabel2.setTextColor(100, 100, 100);
     
270.     alignRightLabel2.setFontSize(12);
     
271.     alignRight.addView(alignRightLabel2);
     
272.    
     
273.     alignPage.addView(alignRight);
     
274.    
     
275.     var alignFill = new Vertical();
     
276.     alignFill.setSpacing(8);
     
277.     alignFill.setAlignment("fill");
     
278.     alignFill.setBackgroundColor(250, 250, 230);
     
279.     alignFill.setContainerSize(350, 80);
     
280.    
     
281.     var alignFillLabel = new Label();
     
282.     alignFillLabel.setText("Ìî³ä¶ÔÆë (fill)");
     
283.     alignFillLabel.setTextColor(60, 60, 60);
     
284.     alignFillLabel.setFontSize(14);
     
285.     alignFill.addView(alignFillLabel);
     
286.    
     
287.     var alignFillLabel2 = new Label();
     
288.     alignFillLabel2.setText("¶ÔÆëЧ¹ûÑÝʾÎı¾");
     
289.     alignFillLabel2.setTextColor(100, 100, 100);
     
290.     alignFillLabel2.setFontSize(12);
     
291.     alignFill.addView(alignFillLabel2);
     
292.    
     
293.     alignPage.addView(alignFill);
     
294.    
     
295.     // ====================== µÚÈýÒ³£º¶¯Ì¬¹ÜÀí ======================
     
296.     var dynamicPage = new Vertical();
     
297.     dynamicPage.setSpacing(15);
     
298.     dynamicPage.setBackgroundColor(248, 250, 245);
     
299.    
     
300.     var dynamicHeader = new Horizontal();
     
301.     dynamicHeader.setAlignment("center");
     
302.     dynamicHeader.setBackgroundColor(70, 130, 180);
     
303.    
     
304.     var dynamicHeaderLabel = new Label();
     
305.     dynamicHeaderLabel.setText("¶¯Ì¬¹ÜÀíÑÝʾ");
     
306.     dynamicHeaderLabel.setTextColor(255, 255, 255);
     
307.     dynamicHeaderLabel.setFontSize(20);
     
308.     dynamicHeader.addView(dynamicHeaderLabel);
     
309.    
     
310.     dynamicPage.addView(dynamicHeader);
     
311.    
     
312.     var dynamicDesc = new Label();
     
313.     dynamicDesc.setText("չʾ¶¯Ì¬Ìí¼Ó¡¢É¾³ý¡¢Çå¿Õ¿Ø¼þµÄ¹¦ÄÜ£¬ÒÔ¼°¿Ø¼þÊýÁ¿Í³¼Æ");
     
314.     dynamicDesc.setTextColor(100, 100, 100);
     
315.     dynamicDesc.setFontSize(13);
     
316.     dynamicDesc.setTextAlignment("center");
     
317.     dynamicPage.addView(dynamicDesc);
     
318.    
     
319.     var dynamicSection1 = new Horizontal();
     
320.     dynamicSection1.setAlignment("center");
     
321.     dynamicSection1.setBackgroundColor(220, 220, 225);
     
322.    
     
323.     var dynamicSection1Label = new Label();
     
324.     dynamicSection1Label.setText("¶¯Ì¬Ìí¼Ó¿Ø¼þ");
     
325.     dynamicSection1Label.setTextColor(60, 60, 60);
     
326.     dynamicSection1Label.setFontSize(15);
     
327.     dynamicSection1.addView(dynamicSection1Label);
     
328.    
     
329.     dynamicPage.addView(dynamicSection1);
     
330.    
     
331.     var dynamicAddContainer = new Vertical();
     
332.     dynamicAddContainer.setSpacing(10);
     
333.     dynamicAddContainer.setBackgroundColor(255, 255, 255);
     
334.    
     
335.     var dynamicAddStatus = new Label();
     
336.     dynamicAddStatus.setText("µ±Ç°¿Ø¼þÊýÁ¿: 0");
     
337.     dynamicAddStatus.setTextColor(80, 80, 80);
     
338.     dynamicAddStatus.setFontSize(14);
     
339.     dynamicAddContainer.addView(dynamicAddStatus);
     
340.    
     
341.     var dynamicAddButton = new Button();
     
342.     dynamicAddButton.setText("Ìí¼Óпؼþ");
     
343.     dynamicAddButton.setColor(46, 139, 87);
     
344.     dynamicAddButton.setTextColor(255, 255, 255);
     
345.     dynamicAddButton.onClick(function() {
     
346.         var newLabel = new Label();
     
347.         var count = dynamicAddContainer.getViewCount();
     
348.         newLabel.setText("¶¯Ì¬Ìí¼ÓµÄ±êÇ© #" + (count - 1));
     
349.         newLabel.setTextColor(100, 100, 100);
     
350.         newLabel.setFontSize(12);
     
351.         dynamicAddContainer.addView(newLabel);
     
352.         dynamicAddStatus.setText("µ±Ç°¿Ø¼þÊýÁ¿: " + dynamicAddContainer.getViewCount());
     
353.         printl("ÒÑÌí¼Ó¿Ø¼þ£¬µ±Ç°ÊýÁ¿: " + dynamicAddContainer.getViewCount());
     
354.     });
     
355.     dynamicAddContainer.addView(dynamicAddButton);
     
356.    
     
357.     dynamicPage.addView(dynamicAddContainer);
     
358.    
     
359.     var dynamicSection2 = new Horizontal();
     
360.     dynamicSection2.setAlignment("center");
     
361.     dynamicSection2.setBackgroundColor(220, 220, 225);
     
362.    
     
363.     var dynamicSection2Label = new Label();
     
364.     dynamicSection2Label.setText("¶¯Ì¬É¾³ý¿Ø¼þ");
     
365.     dynamicSection2Label.setTextColor(60, 60, 60);
     
366.     dynamicSection2Label.setFontSize(15);
     
367.     dynamicSection2.addView(dynamicSection2Label);
     
368.    
     
369.     dynamicPage.addView(dynamicSection2);
     
370.    
     
371.     var dynamicRemoveContainer = new Vertical();
     
372.     dynamicRemoveContainer.setSpacing(10);
     
373.     dynamicRemoveContainer.setBackgroundColor(255, 255, 255);
     
374.    
     
375.     var dynamicRemoveLabels = [];
     
376.     for (var i = 1; i <= 5; i++) {
     
377.         var tempLabel = new Label();
     
378.         tempLabel.setText("¿Éɾ³ý±êÇ© " + i);
     
379.         tempLabel.setTextColor(100, 100, 100);
     
380.         tempLabel.setFontSize(12);
     
381.         dynamicRemoveLabels.push(tempLabel);
     
382.         dynamicRemoveContainer.addView(tempLabel);
     
383.     }
     
384.    
     
385.     var dynamicRemoveStatus = new Label();
     
386.     dynamicRemoveStatus.setText("µ±Ç°¿Ø¼þÊýÁ¿: " + dynamicRemoveContainer.getViewCount());
     
387.     dynamicRemoveStatus.setTextColor(80, 80, 80);
     
388.     dynamicRemoveStatus.setFontSize(14);
     
389.     dynamicRemoveContainer.addView(dynamicRemoveStatus);
     
390.    
     
391.     var dynamicRemoveButton = new Button();
     
392.     dynamicRemoveButton.setText("ɾ³ýµÚÒ»¸ö¿Ø¼þ");
     
393.     dynamicRemoveButton.setColor(220, 20, 60);
     
394.     dynamicRemoveButton.setTextColor(255, 255, 255);
     
395.     dynamicRemoveButton.onClick(function() {
     
396.         printl("ɾ³ý°´Å¥±»µã»÷£¬µ±Ç°¿Ø¼þÊýÁ¿: " + dynamicRemoveContainer.getViewCount());
     
397.         printl("dynamicRemoveLabelsÊý×鳤¶È: " + dynamicRemoveLabels.length);
     
398.         if (dynamicRemoveLabels.length > 0) {
     
399.             // ÒƳýµÚÒ»¸ö±êÇ©
     
400.             dynamicRemoveLabels.shift();
     
401.             
     
402.             // Çå¿ÕËùÓпؼþ
     
403.             dynamicRemoveContainer.clearAllViews();
     
404.             
     
405.             // ÖØÐÂÌí¼ÓÊ£ÓàµÄ±êÇ©
     
406.             for (var i = 0; i < dynamicRemoveLabels.length; i++) {
     
407.                 dynamicRemoveContainer.addView(dynamicRemoveLabels[i]);
     
408.             }
     
409.             
     
410.             // ÖØÐÂÌí¼Ó״̬±êÇ©ºÍ°´Å¥
     
411.             dynamicRemoveContainer.addView(dynamicRemoveStatus);
     
412.             dynamicRemoveContainer.addView(dynamicRemoveButton);
     
413.             dynamicRemoveContainer.addView(dynamicClearButton);
     
414.             
     
415.             // ¸üÐÂ״̬
     
416.             dynamicRemoveStatus.setText("µ±Ç°¿Ø¼þÊýÁ¿: " + dynamicRemoveContainer.getViewCount());
     
417.             printl("ÒÑɾ³ý¿Ø¼þ£¬Ê£ÓàÊýÁ¿: " + dynamicRemoveContainer.getViewCount());
     
418.         } else {
     
419.             printl("¿Ø¼þÊýÁ¿²»×㣬ÎÞ·¨¼ÌÐøɾ³ý");
     
420.         }
     
421.     });
     
422.     dynamicRemoveContainer.addView(dynamicRemoveButton);
     
423.    
     
424.     var dynamicClearButton = new Button();
     
425.     dynamicClearButton.setText("Çå¿ÕËùÓпؼþ");
     
426.     dynamicClearButton.setColor(148, 0, 211);
     
427.     dynamicClearButton.setTextColor(255, 255, 255);
     
428.     dynamicClearButton.onClick(function() {
     
429.         dynamicRemoveContainer.clearAllViews();
     
430.         dynamicRemoveLabels = [];
     
431.         var emptyLabel = new Label();
     
432.         emptyLabel.setText("ËùÓпؼþÒÑÇå¿Õ");
     
433.         emptyLabel.setTextColor(150, 150, 150);
     
434.         emptyLabel.setFontSize(12);
     
435.         dynamicRemoveContainer.addView(emptyLabel);
     
436.         dynamicRemoveContainer.addView(dynamicRemoveStatus);
     
437.         dynamicRemoveContainer.addView(dynamicRemoveButton);
     
438.         dynamicRemoveContainer.addView(dynamicClearButton);
     
439.         dynamicRemoveStatus.setText("µ±Ç°¿Ø¼þÊýÁ¿: " + dynamicRemoveContainer.getViewCount());
     
440.         printl("ÒÑÇå¿ÕËùÓпؼþ");
     
441.     });
     
442.     dynamicRemoveContainer.addView(dynamicClearButton);
     
443.    
     
444.     dynamicPage.addView(dynamicRemoveContainer);
     
445.    
     
446.     // ====================== µÚËÄÒ³£ºÇ¶Ì×ÈÝÆ÷ ======================
     
447.     var nestedPage = new Vertical();
     
448.     nestedPage.setSpacing(15);
     
449.     nestedPage.setBackgroundColor(245, 248, 250);
     
450.    
     
451.     var nestedHeader = new Horizontal();
     
452.     nestedHeader.setAlignment("center");
     
453.     nestedHeader.setBackgroundColor(70, 130, 180);
     
454.    
     
455.     var nestedHeaderLabel = new Label();
     
456.     nestedHeaderLabel.setText("ǶÌ×ÈÝÆ÷ÑÝʾ");
     
457.     nestedHeaderLabel.setTextColor(255, 255, 255);
     
458.     nestedHeaderLabel.setFontSize(20);
     
459.     nestedHeader.addView(nestedHeaderLabel);
     
460.    
     
461.     nestedPage.addView(nestedHeader);
     
462.    
     
463.     var nestedDesc = new Label();
     
464.     nestedDesc.setText("չʾVerticalÈÝÆ÷ÓëÆäËûÈÝÆ÷µÄǶÌ×ʹÓ㬰üÀ¨Vertical¡¢HorizontalµÄ×éºÏ²¼¾Ö");
     
465.     nestedDesc.setTextColor(100, 100, 100);
     
466.     nestedDesc.setFontSize(13);
     
467.     nestedDesc.setTextAlignment("center");
     
468.     nestedPage.addView(nestedDesc);
     
469.    
     
470.     var nestedSection1 = new Horizontal();
     
471.     nestedSection1.setAlignment("center");
     
472.     nestedSection1.setBackgroundColor(220, 220, 225);
     
473.    
     
474.     var nestedSection1Label = new Label();
     
475.     nestedSection1Label.setText("VerticalǶÌ×Horizontal");
     
476.     nestedSection1Label.setTextColor(60, 60, 60);
     
477.     nestedSection1Label.setFontSize(15);
     
478.     nestedSection1.addView(nestedSection1Label);
     
479.    
     
480.     nestedPage.addView(nestedSection1);
     
481.    
     
482.     var nestedContainer1 = new Vertical();
     
483.     nestedContainer1.setSpacing(12);
     
484.     nestedContainer1.setBackgroundColor(255, 255, 255);
     
485.    
     
486.     for (var i = 1; i <= 3; i++) {
     
487.         var row = new Horizontal();
     
488.         row.setSpacing(10);
     
489.         row.setAlignment("center");
     
490.         row.setBackgroundColor(240, 240, 245);
     
491.         
     
492.         var rowLabel = new Label();
     
493.         rowLabel.setText("µÚ " + i + " ÐÐ");
     
494.         rowLabel.setTextColor(60, 60, 60);
     
495.         rowLabel.setFontSize(14);
     
496.         row.addView(rowLabel);
     
497.         
     
498.         var rowButton = new Button();
     
499.         rowButton.setText("°´Å¥" + i);
     
500.         rowButton.setColor(70, 130, 180);
     
501.         rowButton.setTextColor(255, 255, 255);
     
502.         rowButton.setWidth(80);
     
503.         rowButton.setHeight(35);
     
504.         rowButton.onClick(function() {
     
505.             printl("ǶÌ×ÈÝÆ÷Öеİ´Å¥±»µã»÷");
     
506.         });
     
507.         row.addView(rowButton);
     
508.         
     
509.         nestedContainer1.addView(row);
     
510.     }
     
511.    
     
512.     nestedPage.addView(nestedContainer1);
     
513.    
     
514.     var nestedSection2 = new Horizontal();
     
515.     nestedSection2.setAlignment("center");
     
516.     nestedSection2.setBackgroundColor(220, 220, 225);
     
517.    
     
518.     var nestedSection2Label = new Label();
     
519.     nestedSection2Label.setText("¶à²ãǶÌ׽ṹ");
     
520.     nestedSection2Label.setTextColor(60, 60, 60);
     
521.     nestedSection2Label.setFontSize(15);
     
522.     nestedSection2.addView(nestedSection2Label);
     
523.    
     
524.     nestedPage.addView(nestedSection2);
     
525.    
     
526.     var nestedMultiLevelContainer = new Vertical();
     
527.     nestedMultiLevelContainer.setSpacing(10);
     
528.     nestedMultiLevelContainer.setBackgroundColor(255, 255, 255);
     
529.    
     
530.     var nestedLevel1Label = new Label();
     
531.     nestedLevel1Label.setText("µÚÒ»²ã£ºVerticalÈÝÆ÷");
     
532.     nestedLevel1Label.setTextColor(80, 80, 80);
     
533.     nestedLevel1Label.setFontSize(13);
     
534.     nestedMultiLevelContainer.addView(nestedLevel1Label);
     
535.    
     
536.     var nestedLevel2Container = new Vertical();
     
537.     nestedLevel2Container.setSpacing(8);
     
538.     nestedLevel2Container.setBackgroundColor(245, 245, 245);
     
539.    
     
540.     var nestedLevel2Label = new Label();
     
541.     nestedLevel2Label.setText("µÚ¶þ²ã£ºÇ¶Ì×µÄVerticalÈÝÆ÷");
     
542.     nestedLevel2Label.setTextColor(100, 100, 100);
     
543.     nestedLevel2Label.setFontSize(12);
     
544.     nestedLevel2Container.addView(nestedLevel2Label);
     
545.    
     
546.     var nestedLevel3Container = new Horizontal();
     
547.     nestedLevel3Container.setSpacing(10);
     
548.     nestedLevel3Container.setAlignment("center");
     
549.     nestedLevel3Container.setBackgroundColor(240, 240, 240);
     
550.    
     
551.     var nestedLevel3Label = new Label();
     
552.     nestedLevel3Label.setText("µÚÈý²ã£ºHorizontalÈÝÆ÷");
     
553.     nestedLevel3Label.setTextColor(120, 120, 120);
     
554.     nestedLevel3Label.setFontSize(11);
     
555.     nestedLevel3Container.addView(nestedLevel3Label);
     
556.    
     
557.     var nestedLevel3Button = new Button();
     
558.     nestedLevel3Button.setText("²âÊÔ");
     
559.     nestedLevel3Button.setColor(100, 149, 237);
     
560.     nestedLevel3Button.setTextColor(255, 255, 255);
     
561.     nestedLevel3Button.setWidth(60);
     
562.     nestedLevel3Button.setHeight(30);
     
563.     nestedLevel3Container.addView(nestedLevel3Button);
     
564.    
     
565.     nestedLevel2Container.addView(nestedLevel3Container);
     
566.     nestedMultiLevelContainer.addView(nestedLevel2Container);
     
567.     nestedPage.addView(nestedMultiLevelContainer);
     
568.    
     
569.     // ====================== µÚÎåÒ³£º×ÛºÏÑÝʾ ======================
     
570.     var comprehensivePage = new Vertical();
     
571.     comprehensivePage.setSpacing(15);
     
572.     comprehensivePage.setBackgroundColor(248, 245, 250);
     
573.    
     
574.     var comprehensiveHeader = new Horizontal();
     
575.     comprehensiveHeader.setAlignment("center");
     
576.     comprehensiveHeader.setBackgroundColor(70, 130, 180);
     
577.    
     
578.     var comprehensiveHeaderLabel = new Label();
     
579.     comprehensiveHeaderLabel.setText("×ÛºÏÑÝʾ");
     
580.     comprehensiveHeaderLabel.setTextColor(255, 255, 255);
     
581.     comprehensiveHeaderLabel.setFontSize(20);
     
582.     comprehensiveHeader.addView(comprehensiveHeaderLabel);
     
583.    
     
584.     comprehensivePage.addView(comprehensiveHeader);
     
585.    
     
586.     var comprehensiveDesc = new Label();
     
587.     comprehensiveDesc.setText("×ÛºÏչʾVerticalÈÝÆ÷µÄËùÓй¦ÄÜ£¬°üÀ¨ÊôÐÔÉèÖᢶÔÆë¡¢¶¯Ì¬¹ÜÀí¡¢Ç¶Ì×µÈ");
     
588.     comprehensiveDesc.setTextColor(100, 100, 100);
     
589.     comprehensiveDesc.setFontSize(13);
     
590.     comprehensiveDesc.setTextAlignment("center");
     
591.     comprehensivePage.addView(comprehensiveDesc);
     
592.    
     
593.     var comprehensiveSection1 = new Horizontal();
     
594.     comprehensiveSection1.setAlignment("center");
     
595.     comprehensiveSection1.setBackgroundColor(220, 220, 225);
     
596.    
     
597.     var comprehensiveSection1Label = new Label();
     
598.     comprehensiveSection1Label.setText("×ۺϹ¦ÄÜչʾ");
     
599.     comprehensiveSection1Label.setTextColor(60, 60, 60);
     
600.     comprehensiveSection1Label.setFontSize(15);
     
601.     comprehensiveSection1.addView(comprehensiveSection1Label);
     
602.    
     
603.     comprehensivePage.addView(comprehensiveSection1);
     
604.    
     
605.     var comprehensiveContainer = new Vertical();
     
606.     comprehensiveContainer.setSpacing(12);
     
607.     comprehensiveContainer.setBackgroundColor(255, 255, 255);
     
608.     comprehensiveContainer.setAlignment("center");
     
609.    
     
610.     var comprehensiveTitleLabel = new Label();
     
611.     comprehensiveTitleLabel.setText("×ۺϹ¦ÄÜÑÝʾÇøÓò");
     
612.     comprehensiveTitleLabel.setTextColor(50, 50, 50);
     
613.     comprehensiveTitleLabel.setFontSize(16);
     
614.     comprehensiveTitleLabel.setTextAlignment("center");
     
615.     comprehensiveContainer.addView(comprehensiveTitleLabel);
     
616.    
     
617.     var comprehensiveInfoPanel = new Horizontal();
     
618.     comprehensiveInfoPanel.setSpacing(15);
     
619.     comprehensiveInfoPanel.setAlignment("center");
     
620.     comprehensiveInfoPanel.setBackgroundColor(245, 245, 245);
     
621.    
     
622.     var comprehensiveInfo1 = new Label();
     
623.     comprehensiveInfo1.setText("¼ä¾à: 12px");
     
624.     comprehensiveInfo1.setTextColor(100, 100, 100);
     
625.     comprehensiveInfo1.setFontSize(12);
     
626.     comprehensiveInfoPanel.addView(comprehensiveInfo1);
     
627.    
     
628.     var comprehensiveInfo2 = new Label();
     
629.     comprehensiveInfo2.setText("¶ÔÆë: center");
     
630.     comprehensiveInfo2.setTextColor(100, 100, 100);
     
631.     comprehensiveInfo2.setFontSize(12);
     
632.     comprehensiveInfoPanel.addView(comprehensiveInfo2);
     
633.    
     
634.     var comprehensiveInfo3 = new Label();
     
635.     comprehensiveInfo3.setText("±³¾°: °×É«");
     
636.     comprehensiveInfo3.setTextColor(100, 100, 100);
     
637.     comprehensiveInfo3.setFontSize(12);
     
638.     comprehensiveInfoPanel.addView(comprehensiveInfo3);
     
639.    
     
640.     comprehensiveContainer.addView(comprehensiveInfoPanel);
     
641.    
     
642.     var comprehensiveButtonPanel = new Horizontal();
     
643.     comprehensiveButtonPanel.setSpacing(10);
     
644.     comprehensiveButtonPanel.setAlignment("center");
     
645.    
     
646.     var comprehensiveBtnAdd = new Button();
     
647.     comprehensiveBtnAdd.setText("Ìí¼Ó");
     
648.     comprehensiveBtnAdd.setColor(46, 139, 87);
     
649.     comprehensiveBtnAdd.setTextColor(255, 255, 255);
     
650.     comprehensiveBtnAdd.setWidth(70);
     
651.     comprehensiveBtnAdd.setHeight(40);
     
652.    
     
653.     var comprehensiveItems = [];
     
654.     comprehensiveBtnAdd.onClick(function() {
     
655.         var newItem = new Label();
     
656.         newItem.setText("¶¯Ì¬Ìí¼ÓÏî - " + new Date().getTime());
     
657.         newItem.setTextColor(80, 80, 80);
     
658.         newItem.setFontSize(12);
     
659.         comprehensiveItems.push(newItem);
     
660.         comprehensiveContainer.addView(newItem);
     
661.         printl("×ÛºÏÑÝʾ£ºÒÑÌí¼ÓÐÂÏî");
     
662.     });
     
663.     comprehensiveButtonPanel.addView(comprehensiveBtnAdd);
     
664.    
     
665.     var comprehensiveBtnRemove = new Button();
     
666.     comprehensiveBtnRemove.setText("ɾ³ý");
     
667.     comprehensiveBtnRemove.setColor(220, 20, 60);
     
668.     comprehensiveBtnRemove.setTextColor(255, 255, 255);
     
669.     comprehensiveBtnRemove.setWidth(70);
     
670.     comprehensiveBtnRemove.setHeight(40);
     
671.     comprehensiveBtnRemove.onClick(function() {
     
672.         printl("ɾ³ý°´Å¥±»µã»÷£¬µ±Ç°¿Ø¼þÊýÁ¿: " + comprehensiveContainer.getViewCount());
     
673.         printl("comprehensiveItemsÊý×鳤¶È: " + comprehensiveItems.length);
     
674.         if (comprehensiveItems.length > 0) {
     
675.             // ÒƳýµÚÒ»¸öÏî
     
676.             comprehensiveItems.shift();
     
677.             
     
678.             // Çå¿ÕËùÓпؼþ
     
679.             comprehensiveContainer.clearAllViews();
     
680.             
     
681.             // ÖØÐÂÌí¼Ó¹Ì¶¨¿Ø¼þ
     
682.             comprehensiveContainer.addView(comprehensiveTitleLabel);
     
683.             comprehensiveContainer.addView(comprehensiveInfoPanel);
     
684.             comprehensiveContainer.addView(comprehensiveButtonPanel);
     
685.             
     
686.             // ÖØÐÂÌí¼ÓÊ£ÓàµÄÏî
     
687.             for (var i = 0; i < comprehensiveItems.length; i++) {
     
688.                 comprehensiveContainer.addView(comprehensiveItems[i]);
     
689.             }
     
690.             
     
691.             printl("×ÛºÏÑÝʾ£ºÒÑɾ³ýµÚÒ»Ïî");
     
692.         } else {
     
693.             printl("×ÛºÏÑÝʾ£º¿Ø¼þÊýÁ¿²»×ã");
     
694.         }
     
695.     });
     
696.     comprehensiveButtonPanel.addView(comprehensiveBtnRemove);
     
697.    
     
698.     var comprehensiveBtnClear = new Button();
     
699.     comprehensiveBtnClear.setText("Çå¿Õ");
     
700.     comprehensiveBtnClear.setColor(148, 0, 211);
     
701.     comprehensiveBtnClear.setTextColor(255, 255, 255);
     
702.     comprehensiveBtnClear.setWidth(70);
     
703.     comprehensiveBtnClear.setHeight(40);
     
704.     comprehensiveBtnClear.onClick(function() {
     
705.         comprehensiveItems = [];
     
706.         comprehensiveContainer.clearAllViews();
     
707.         comprehensiveContainer.addView(comprehensiveTitleLabel);
     
708.         comprehensiveContainer.addView(comprehensiveInfoPanel);
     
709.         comprehensiveContainer.addView(comprehensiveButtonPanel);
     
710.         printl("×ÛºÏÑÝʾ£ºÒÑÇå¿ÕËùÓпؼþ");
     
711.     });
     
712.     comprehensiveButtonPanel.addView(comprehensiveBtnClear);
     
713.    
     
714.     comprehensiveContainer.addView(comprehensiveButtonPanel);
     
715.    
     
716.     var comprehensiveCountLabel = new Label();
     
717.     comprehensiveCountLabel.setText("µ±Ç°¿Ø¼þÊýÁ¿: " + comprehensiveContainer.getViewCount());
     
718.     comprehensiveCountLabel.setTextColor(80, 80, 80);
     
719.     comprehensiveCountLabel.setFontSize(12);
     
720.     comprehensiveContainer.addView(comprehensiveCountLabel);
     
721.    
     
722.     comprehensivePage.addView(comprehensiveContainer);
     
723.    
     
724.     var comprehensiveSection2 = new Horizontal();
     
725.     comprehensiveSection2.setAlignment("center");
     
726.     comprehensiveSection2.setBackgroundColor(220, 220, 225);
     
727.    
     
728.     var comprehensiveSection2Label = new Label();
     
729.     comprehensiveSection2Label.setText("·½·¨×ܽá");
     
730.     comprehensiveSection2Label.setTextColor(60, 60, 60);
     
731.     comprehensiveSection2Label.setFontSize(15);
     
732.     comprehensiveSection2.addView(comprehensiveSection2Label);
     
733.    
     
734.     comprehensivePage.addView(comprehensiveSection2);
     
735.    
     
736.     var comprehensiveSummaryContainer = new Vertical();
     
737.     comprehensiveSummaryContainer.setSpacing(8);
     
738.     comprehensiveSummaryContainer.setBackgroundColor(255, 255, 255);
     
739.    
     
740.     var comprehensiveSummaryItems = [
     
741.         "setSpacing(value) - ÉèÖÿؼþ¼ä¾à",
     
742.         "setBackgroundColor(r, g, b) - ÉèÖñ³¾°ÑÕÉ«",
     
743.         "setContainerSize(width, height) - ÉèÖÃÈÝÆ÷´óС",
     
744.         "setAlignment(alignment) - ÉèÖöÔÆ뷽ʽ",
     
745.         "addView(view) - Ìí¼Ó×ӿؼþ",
     
746.         "clearAllViews() - Çå¿ÕËùÓпؼþ",
     
747.         "getViewCount() - »ñÈ¡¿Ø¼þÊýÁ¿"
     
748.     ];
     
749.    
     
750.     for (var i = 0; i < comprehensiveSummaryItems.length; i++) {
     
751.         var itemLabel = new Label();
     
752.         itemLabel.setText(comprehensiveSummaryItems[i]);
     
753.         itemLabel.setTextColor(80, 80, 80);
     
754.         itemLabel.setFontSize(12);
     
755.         comprehensiveSummaryContainer.addView(itemLabel);
     
756.     }
     
757.    
     
758.     comprehensivePage.addView(comprehensiveSummaryContainer);
     
759.    
     
760.     // Ìí¼ÓËùÓÐÒ³Ãæµ½TabView
     
761.     tab.addView(0, basicPage);
     
762.     tab.addView(1, alignPage);
     
763.     tab.addView(2, dynamicPage);
     
764.     tab.addView(3, nestedPage);
     
765.     tab.addView(4, comprehensivePage);
     
766.    
     
767.     printl("ËùÓÐÒ³Ãæ³õʼ»¯Íê³É");
     
768. });

¸´ÖÆ´úÂë