AIWROK软件IOS苹果Ul-垂直容器[Vertical]方法小结

QQ896757558

AIWROK软件IOS苹果Ul-垂直容器[Vertical]方法小结

1. //方法小结，交流QQ群711841924
   
2. 
   
3. //第一个方法：addView添加子控件
   
4. 
   
5. var label = new Label();
   
6. label.setText("Hello World");
   
7. 
   
8. //第二个方法：removeView移除视图
   
9. 
   
10. 
    
11. var v = new Vertical();
    
12. v.removeView(0); // 移除第一个子控件
    
13. 
    
14. 
    
15. //第三个方法：clearAllViews清空所有视图
    
16. 
    
17. 
    
18. var v = new Vertical();
    
19. v.clearAllViews(); // 清空所有控件
    
20. 
    
21. //第四个方法：getViewCount 获取视图数量
    
22. 
    
23. 
    
24. var v = new Vertical();
    
25. int count = v.getViewCount(); // 获取子控件的数量
    
26. 
    
27. 
    
28. 
    
29. 
    
30. //第五个方法：setSpacing设置控件间隔
    
31. 
    
32. var v = new Vertical();
    
33. v.setSpacing(10); // 设置控件间隔为10
    
34. 
    
35. 
    
36. 
    
37. //第六个方法：setContainerSize设置容器大小
    
38. 
    
39. 
    
40. 
    
41. var v = new Vertical();
    
42. v.setContainerSize(400, 600); // 设置容器大小为400x600
    
43. 
    
44. 
    
45. 
    
46. //第七个方法：setBackgroundColor 设置背景颜色
    
47. 
    
48. var v = new Vertical();
    
49. v.setBackgroundColor(50, 100, 150); // 设置背景颜色
    
50. 
    
51. 
    
52. 
    
53. 
    
54. //第八个方法：setAlignment 设置对齐方式
    
55. 
    
56. var v = new Vertical();
    
57. v.setAlignment("center"); // 设置对齐方式为居中
    
58. /*
    
59. 可选值如下：
    
60. - fill: 填充对齐
    
61. - left: 左对齐
    
62. - right: 右对齐
    
63. - top: 顶部对齐
    
64. - bottom: 底部对齐
    
65. - center: 居中对齐
    
66. 默认值为 fill。
    
67. */
    

复制代码

📌addView添加子控件

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

📌removeView移除视图

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

📌clearAllViews清空所有视图

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

📌getViewCount 获取视图数量

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

📌setSpacing设置控件间隔

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

📌setContainerSize设置容器大小

类别	详情说明
方法功能	设置容器的宽度和高度
方法签名	Void setContainerSize(Int32 width, Int32 height)
返回值	Void
参数	- Int32 width ：容器宽度 - Int32 height ：容器高度
案例	var v = new Vertical(); v.setContainerSize(400, 600); // 设置容器大小为400x600

📌setBackgroundColor 设置背景颜色

类别	详情说明
方法功能	根据提供的 RGB 值设置容器的背景颜色
方法签名	Void setBackgroundColor(Int32 red, Int32 green, Int32 blue)
返回值	Void
参数	- Int32 red ：红色分量 - Int32 green ：绿色分量 - Int32 blue ：蓝色分量
案例	var v = new Vertical(); v.setBackgroundColor(50, 100, 150); // 设置背景颜色

📌setAlignment 设置对齐方式

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

示例：

1. // 🔨Ul-垂直容器[Vertical]方法完整示例
   
2. // 方法小结，交流QQ群711841924
   
3. 
   
4. // 创建 TabView
   
5. var tab = new TabView();
   
6. 
   
7. // 设置标签页标题
   
8. tab.setTitles(["addView示例", "removeView示例", "其他方法示例"]);
   
9. 
   
10. // 显示 TabView，并在加载完成后执行回调函数
    
11. tab.show(function() {
    
12.     printl("TabView 显示完成");
    
13. 
    
14.     // ====================== 第一页：addView示例 ======================
    
15.     var addViewDemo = new Vertical();
    
16.     addViewDemo.setSpacing(10); // 设置控件间隔
    
17.     addViewDemo.setBackgroundColor(240, 240, 240); // 设置背景颜色
    
18. 
    
19.     // 创建说明标签
    
20.     var titleLabel = new Label();
    
21.     titleLabel.setText("addView方法演示");
    
22.     addViewDemo.addView(titleLabel);
    
23. 
    
24.     // 使用addView添加各种控件
    
25.     var label1 = new Label();
    
26.     label1.setText("这是第一个通过addView添加的标签");
    
27.     addViewDemo.addView(label1);
    
28. 
    
29.     var button1 = new Button();
    
30.     button1.setText("这是通过addView添加的按钮");
    
31.     button1.setColor(70, 130, 180);
    
32.     button1.onClick(function() {
    
33.         printl("第一页按钮被点击");
    
34.     });
    
35.     addViewDemo.addView(button1);
    
36. 
    
37.     var countLabel1 = new Label();
    
38.     countLabel1.setText("当前控件数量: " + addViewDemo.getViewCount());
    
39.     addViewDemo.addView(countLabel1);
    
40. 
    
41.     function updateViewCount(container, label) {
    
42.         label.setText("当前控件数量: " + container.getViewCount());
    
43.     }
    
44. 
    
45.     // ====================== 第二页：removeView和clearAllViews示例 ======================
    
46.     var removeViewDemo = new Vertical();
    
47.     removeViewDemo.setSpacing(10);
    
48.     removeViewDemo.setBackgroundColor(245, 220, 220);
    
49. 
    
50.     // 添加多个控件用于演示删除
    
51.     for (var i = 1; i <= 5; i++) {
    
52.         var tempLabel = new Label();
    
53.         tempLabel.setText("动态标签 " + i);
    
54.         removeViewDemo.addView(tempLabel);
    
55.     }
    
56. 
    
57.     var removeFirstBtn = new Button();
    
58.     removeFirstBtn.setText("移除第一个控件 (removeView)");
    
59.     removeFirstBtn.setColor(220, 20, 60);
    
60.     removeFirstBtn.onClick(function() {
    
61.         if (removeViewDemo.getViewCount() > 2) { // 留下至少一个控件和按钮
    
62.             removeViewDemo.removeView(0);
    
63.             printl("已移除第一个控件，剩余控件数: " + removeViewDemo.getViewCount());
    
64.             updateViewCount(removeViewDemo, countLabel2);
    
65.         } else {
    
66.             printl("控件不足，无法继续移除");
    
67.         }
    
68.     });
    
69.     removeViewDemo.addView(removeFirstBtn);
    
70. 
    
71.     var clearAllBtn = new Button();
    
72.     clearAllBtn.setText("清空所有控件 (clearAllViews)");
    
73.     clearAllBtn.setColor(180, 20, 220);
    
74.     clearAllBtn.onClick(function() {
    
75.         removeViewDemo.clearAllViews();
    
76.         printl("已清空所有控件");
    
77.         
    
78.         // 重新添加一些控件
    
79.         var emptyLabel = new Label();
    
80.         emptyLabel.setText("所有控件已清空");
    
81.         removeViewDemo.addView(emptyLabel);
    
82.         
    
83.         var countLabel = new Label();
    
84.         countLabel.setText("当前控件数量: " + removeViewDemo.getViewCount());
    
85.         removeViewDemo.addView(countLabel);
    
86.         
    
87.         removeViewDemo.addView(removeFirstBtn);
    
88.         removeViewDemo.addView(clearAllBtn);
    
89.         updateViewCount(removeViewDemo, countLabel2);
    
90.     });
    
91.     removeViewDemo.addView(clearAllBtn);
    
92. 
    
93.     var countLabel2 = new Label();
    
94.     countLabel2.setText("当前控件数量: " + removeViewDemo.getViewCount());
    
95.     removeViewDemo.addView(countLabel2);
    
96. 
    
97.     // ====================== 第三页：其他方法示例 ======================
    
98.     var otherMethodsDemo = new Vertical();
    
99.     otherMethodsDemo.setContainerSize(400, 600); // 设置容器大小
    
100.     otherMethodsDemo.setBackgroundColor(220, 245, 220); // 设置背景颜色
     
101. 
     
102.     // 演示不同对齐方式
     
103.     var alignmentTitle = new Label();
     
104.     alignmentTitle.setText("setAlignment对齐方式演示");
     
105.     otherMethodsDemo.addView(alignmentTitle);
     
106. 
     
107.     // 默认对齐(fill)
     
108.     var fillContainer = new Vertical();
     
109.     fillContainer.setContainerSize(300, 60);
     
110.     fillContainer.setBackgroundColor(230, 230, 250);
     
111.     fillContainer.setSpacing(5);
     
112.    
     
113.     var fillLabel = new Label();
     
114.     fillLabel.setText("默认填充对齐(fill)");
     
115.     fillContainer.addView(fillLabel);
     
116.    
     
117.     otherMethodsDemo.addView(fillContainer);
     
118. 
     
119.     // 居中对齐(center)
     
120.     var centerContainer = new Vertical();
     
121.     centerContainer.setContainerSize(300, 60);
     
122.     centerContainer.setBackgroundColor(250, 230, 230);
     
123.     centerContainer.setAlignment("center"); // 设置居中对齐
     
124.     centerContainer.setSpacing(5);
     
125.    
     
126.     var centerLabel = new Label();
     
127.     centerLabel.setText("居中对齐(center)");
     
128.     centerContainer.addView(centerLabel);
     
129.    
     
130.     otherMethodsDemo.addView(centerContainer);
     
131. 
     
132.     // 左对齐(left)
     
133.     var leftContainer = new Vertical();
     
134.     leftContainer.setContainerSize(300, 60);
     
135.     leftContainer.setBackgroundColor(230, 250, 230);
     
136.     leftContainer.setAlignment("left"); // 设置左对齐
     
137.     leftContainer.setSpacing(5);
     
138.    
     
139.     var leftLabel = new Label();
     
140.     leftLabel.setText("左对齐(left)");
     
141.     leftContainer.addView(leftLabel);
     
142.    
     
143.     otherMethodsDemo.addView(leftContainer);
     
144. 
     
145.     // 右对齐(right)
     
146.     var rightContainer = new Vertical();
     
147.     rightContainer.setContainerSize(300, 60);
     
148.     rightContainer.setBackgroundColor(250, 250, 230);
     
149.     rightContainer.setAlignment("right"); // 设置右对齐
     
150.     rightContainer.setSpacing(5);
     
151.    
     
152.     var rightLabel = new Label();
     
153.     rightLabel.setText("右对齐(right)");
     
154.     rightContainer.addView(rightLabel);
     
155.    
     
156.     otherMethodsDemo.addView(rightContainer);
     
157. 
     
158.     // 显示属性信息
     
159.     var infoLabel = new Label();
     
160.     infoLabel.setText("容器大小: 400x600\n背景颜色: RGB(220, 245, 220)\n控件间隔: 默认值");
     
161.     otherMethodsDemo.addView(infoLabel);
     
162. 
     
163.     // 公共返回按钮
     
164.     var btnBack = new Button();
     
165.     btnBack.setText("返回");
     
166.     btnBack.setColor(255, 0, 0);
     
167.     btnBack.onClick(function() {
     
168.         printl("返回键被点击");
     
169.         tab.dismiss();
     
170.     });
     
171. 
     
172.     // 添加所有页面到TabView
     
173.     tab.addView(0, addViewDemo);
     
174.     tab.addView(1, removeViewDemo);
     
175.     tab.addView(2, otherMethodsDemo);
     
176.     tab.addView(3, btnBack);
     
177. 
     
178.     printl("视图添加完成");
     
179. });
     
180. 
     
181. printl("Vertical容器方法演示程序启动");

复制代码