B2B网络软件

标题: AIWROK软件苹果IOS系统Ul-空白站位[Space]方法小结 [打印本页]

---

作者: YYPOST群发软件    时间: 4 小时前
标题: AIWROK软件苹果IOS系统Ul-空白站位[Space]方法小结

1. //Ul-空白站位[Space]方法小结，交流QQ群711841924
   
2. 
   
3. //第一个方法：📌setWidth设置宽度
   
4. 
   
5. var space = new Space();
   
6. space.setWidth(100.0f); // 设置空间宽度为100
   
7. 
   
8. 
   
9. //第二个方法：📌setHeight设置高度
   
10. 
    
11. var space = new Space();
    
12. space.setHeight(50.0f); // 设置空间高度为50
    
13. 
    
14. 
    
15. 
    
16. //第三个方法：📌setBackgroundColor 设置背景颜色
    
17. 
    
18. var space = new Space();
    
19. space.setBackgroundColor(255, 255, 255); // 设置空间背景颜色为白色

复制代码

📌setHeight设置高度

类别	详情说明
方法功能	设置空间的高度
方法签名	Void setHeight(Single height)
返回值	Void
参数	- Single height ：要设置的空间高度（Single 为单精度浮点类型 ）
案例	var space = new Space(); space.setHeight(50.0f); // 设置空间高度为50

📌setWidth设置宽度

类别	详情说明
方法功能	设置空间的宽度
方法签名	Void setWidth(Single width)
返回值	Void
参数	- Single width ：要设置的空间宽度（Single 为单精度浮点类型 ）
案例	var space = new Space(); space.setWidth(100.0f); // 设置空间宽度为100

📌setBackgroundColor 设置背景颜色

类别	详情说明
方法功能	设置空间的背景颜色
方法签名	Void setBackgroundColor(Single red, Single green, Single blue)
返回值	Void
参数	- Single red ：红色分量（通常取值范围 0~255 的单精度浮点数） - Single green ：绿色分量（通常取值范围 0~255 的单精度浮点数） - Single blue ：蓝色分量（通常取值范围 0~255 的单精度浮点数）
案例	var space = new Space(); space.setBackgroundColor(255, 255, 255); // 设置空间背景颜色为白色

完整示例：

1. // 🔨🍎UI-空白站位[Space]方法完整示例
   
2. // UI-空白站位[Space]方法小结，交流QQ群711841924
   
3. 
   
4. printl("=== Space控件方法完整示例 ===");
   
5. 
   
6. var vc = new IOSView();
   
7. vc.show(() => {
   
8.     printl("Space示例界面已加载");
   
9.    
   
10.     // 获取当前视图
    
11.     var view = vc.getView();
    
12.    
    
13.     // 创建主容器
    
14.     var mainContainer = new Vertical();
    
15.     mainContainer.setSpacing(15);
    
16.     mainContainer.setBackgroundColor(245, 245, 245);
    
17.    
    
18.    // 标题区域
    
19. var titleContainer = new Vertical();
    
20. titleContainer.setAlignment("center");
    
21. titleContainer.setSpacing(0); // 调整间距
    
22. titleContainer.setBackgroundColor(0, 122, 255);
    
23. 
    
24. var titleLabel = new Label();
    
25. titleLabel.setText("🔨 Space控件演示");
    
26. titleLabel.setFontSize(20.0);
    
27. titleLabel.setTextColor(255, 255, 255);
    
28. titleLabel.setTextAlignment("center");
    
29. 
    
30. var subtitleLabel = new Label();
    
31. subtitleLabel.setText("空白站位控件的使用方法");
    
32. subtitleLabel.setFontSize(14.0);
    
33. subtitleLabel.setTextColor(255, 255, 255);
    
34. subtitleLabel.setTextAlignment("center");
    
35. 
    
36. titleContainer.addView(titleLabel);
    
37. titleContainer.addView(subtitleLabel);
    
38. mainContainer.addView(titleContainer);
    
39.    
    
40.     // Space方法演示区域
    
41.     var demoContainer = new Vertical();
    
42.     demoContainer.setBackgroundColor(255, 255, 255);
    
43.     demoContainer.setSpacing(10);
    
44.    
    
45.     var demoTitle = new Label();
    
46.     demoTitle.setText("Space控件功能演示");
    
47.     demoTitle.setFontSize(16.0);
    
48.     demoTitle.setTextColor(0, 0, 0);
    
49.     demoTitle.setTextAlignment("center");
    
50.     demoContainer.addView(demoTitle);
    
51.    
    
52.     // 第一个方法：setWidth设置宽度演示
    
53.     var widthDemo = new Vertical();
    
54.     widthDemo.setSpacing(5);
    
55.    
    
56.     var widthLabel = new Label();
    
57.     widthLabel.setText("📌 setWidth设置宽度");
    
58.     widthLabel.setFontSize(14.0);
    
59.     widthLabel.setTextColor(0, 122, 255);
    
60.     widthDemo.addView(widthLabel);
    
61.    
    
62.     var widthDesc = new Label();
    
63.     widthDesc.setText("创建不同宽度的空白占位:");
    
64.     widthDesc.setFontSize(12.0);
    
65.     widthDesc.setTextColor(100, 100, 100);
    
66.     widthDemo.addView(widthDesc);
    
67.    
    
68.     // 水平容器展示不同宽度的Space
    
69.     var widthContainer = new Horizontal();
    
70.     widthContainer.setSpacing(5);
    
71.     widthContainer.setBackgroundColor(240, 240, 240);
    
72.    
    
73.     var label1 = new Label();
    
74.     label1.setText("W20");
    
75.     label1.setFontSize(10.0);
    
76.     label1.setBackgroundColor(0, 122, 255);
    
77.     label1.setTextColor(255, 255, 255);
    
78.    
    
79.     // 第一个方法：setWidth设置宽度
    
80.     var space1 = new Space();
    
81.     space1.setWidth(20.0); // 设置空间宽度为20
    
82.     space1.setBackgroundColor(200, 200, 200); // 设置背景色以便观察
    
83.    
    
84.     var label2 = new Label();
    
85.     label2.setText("W50");
    
86.     label2.setFontSize(10.0);
    
87.     label2.setBackgroundColor(52, 199, 89);
    
88.     label2.setTextColor(255, 255, 255);
    
89.    
    
90.     // 第一个方法：setWidth设置宽度
    
91.     var space2 = new Space();
    
92.     space2.setWidth(50.0); // 设置空间宽度为50
    
93.     space2.setBackgroundColor(200, 200, 200); // 设置背景色以便观察
    
94.    
    
95.     var label3 = new Label();
    
96.     label3.setText("W30");
    
97.     label3.setFontSize(10.0);
    
98.     label3.setBackgroundColor(255, 149, 0);
    
99.     label3.setTextColor(255, 255, 255);
    
100.    
     
101.     widthContainer.addView(label1);
     
102.     widthContainer.addView(space1);
     
103.     widthContainer.addView(label2);
     
104.     widthContainer.addView(space2);
     
105.     widthContainer.addView(label3);
     
106.     widthDemo.addView(widthContainer);
     
107.     demoContainer.addView(widthDemo);
     
108.    
     
109.     // 添加分割空间
     
110.     var separator1 = new Space();
     
111.     separator1.setHeight(10.0);
     
112.     demoContainer.addView(separator1);
     
113.    
     
114.     // 第二个方法：setHeight设置高度演示
     
115.     var heightDemo = new Vertical();
     
116.     heightDemo.setSpacing(5);
     
117.    
     
118.     var heightLabel = new Label();
     
119.     heightLabel.setText("📌 setHeight设置高度");
     
120.     heightLabel.setFontSize(14.0);
     
121.     heightLabel.setTextColor(0, 122, 255);
     
122.     heightDemo.addView(heightLabel);
     
123.    
     
124.     var heightDesc = new Label();
     
125.     heightDesc.setText("创建不同高度的空白占位:");
     
126.     heightDesc.setFontSize(12.0);
     
127.     heightDesc.setTextColor(100, 100, 100);
     
128.     heightDemo.addView(heightDesc);
     
129.    
     
130.     // 垂直容器展示不同高度的Space
     
131.     var heightContainer = new Vertical();
     
132.     heightContainer.setBackgroundColor(240, 240, 240);
     
133.    
     
134.     var hLabel1 = new Label();
     
135.     hLabel1.setText("H10");
     
136.     hLabel1.setFontSize(10.0);
     
137.     hLabel1.setBackgroundColor(0, 122, 255);
     
138.     hLabel1.setTextColor(255, 255, 255);
     
139.     hLabel1.setTextAlignment("center");
     
140.    
     
141.     // 第二个方法：setHeight设置高度
     
142.     var space3 = new Space();
     
143.     space3.setHeight(10.0); // 设置空间高度为10
     
144.     space3.setBackgroundColor(200, 200, 200); // 设置背景色以便观察
     
145.    
     
146.     var hLabel2 = new Label();
     
147.     hLabel2.setText("H25");
     
148.     hLabel2.setFontSize(10.0);
     
149.     hLabel2.setBackgroundColor(52, 199, 89);
     
150.     hLabel2.setTextColor(255, 255, 255);
     
151.     hLabel2.setTextAlignment("center");
     
152.    
     
153.     // 第二个方法：setHeight设置高度
     
154.     var space4 = new Space();
     
155.     space4.setHeight(25.0); // 设置空间高度为25
     
156.     space4.setBackgroundColor(200, 200, 200); // 设置背景色以便观察
     
157.    
     
158.     var hLabel3 = new Label();
     
159.     hLabel3.setText("H15");
     
160.     hLabel3.setFontSize(10.0);
     
161.     hLabel3.setBackgroundColor(255, 149, 0);
     
162.     hLabel3.setTextColor(255, 255, 255);
     
163.     hLabel3.setTextAlignment("center");
     
164.    
     
165.     heightContainer.addView(hLabel1);
     
166.     heightContainer.addView(space3);
     
167.     heightContainer.addView(hLabel2);
     
168.     heightContainer.addView(space4);
     
169.     heightContainer.addView(hLabel3);
     
170.     heightDemo.addView(heightContainer);
     
171.     demoContainer.addView(heightDemo);
     
172.    
     
173.     // 添加分割空间
     
174.     var separator2 = new Space();
     
175.     separator2.setHeight(10.0);
     
176.     demoContainer.addView(separator2);
     
177.    
     
178.     // 第三个方法：setBackgroundColor 设置背景颜色演示
     
179.     var colorDemo = new Vertical();
     
180.     colorDemo.setSpacing(5);
     
181.    
     
182.     var colorLabel = new Label();
     
183.     colorLabel.setText("📌 setBackgroundColor设置背景颜色");
     
184.     colorLabel.setFontSize(14.0);
     
185.     colorLabel.setTextColor(0, 122, 255);
     
186.     colorDemo.addView(colorLabel);
     
187.    
     
188.     var colorDesc = new Label();
     
189.     colorDesc.setText("创建不同背景颜色的空白占位:");
     
190.     colorDesc.setFontSize(12.0);
     
191.     colorDesc.setTextColor(100, 100, 100);
     
192.     colorDemo.addView(colorDesc);
     
193.    
     
194.     // 水平容器展示不同背景色的Space
     
195.     var colorContainer = new Horizontal();
     
196.     colorContainer.setSpacing(5);
     
197.    
     
198.     // 第三个方法：setBackgroundColor 设置背景颜色
     
199.     var space5 = new Space();
     
200.     space5.setWidth(40.0);
     
201.     space5.setHeight(40.0);
     
202.     space5.setBackgroundColor(255, 0, 0); // 红色
     
203.    
     
204.     // 第三个方法：setBackgroundColor 设置背景颜色
     
205.     var space6 = new Space();
     
206.     space6.setWidth(40.0);
     
207.     space6.setHeight(40.0);
     
208.     space6.setBackgroundColor(0, 255, 0); // 绿色
     
209.    
     
210.     // 第三个方法：setBackgroundColor 设置背景颜色
     
211.     var space7 = new Space();
     
212.     space7.setWidth(40.0);
     
213.     space7.setHeight(40.0);
     
214.     space7.setBackgroundColor(0, 0, 255); // 蓝色
     
215.    
     
216.     // 第三个方法：setBackgroundColor 设置背景颜色
     
217.     var space8 = new Space();
     
218.     space8.setWidth(40.0);
     
219.     space8.setHeight(40.0);
     
220.     space8.setBackgroundColor(255, 255, 0); // 黄色
     
221.    
     
222.     colorContainer.addView(space5);
     
223.     colorContainer.addView(space6);
     
224.     colorContainer.addView(space7);
     
225.     colorContainer.addView(space8);
     
226.     colorDemo.addView(colorContainer);
     
227.     demoContainer.addView(colorDemo);
     
228.    
     
229.     mainContainer.addView(demoContainer);
     
230.    
     
231.     // Space实际应用示例
     
232.     var applicationContainer = new Vertical();
     
233.     applicationContainer.setBackgroundColor(255, 255, 255);
     
234.     applicationContainer.setSpacing(10);
     
235.    
     
236.     var appTitle = new Label();
     
237.     appTitle.setText("Space实际应用示例");
     
238.     appTitle.setFontSize(16.0);
     
239.     appTitle.setTextColor(0, 0, 0);
     
240.     appTitle.setTextAlignment("center");
     
241.     applicationContainer.addView(appTitle);
     
242.    
     
243.     var appDesc = new Label();
     
244.     appDesc.setText("使用Space控件优化界面布局:");
     
245.     appDesc.setFontSize(12.0);
     
246.     appDesc.setTextColor(100, 100, 100);
     
247.     applicationContainer.addView(appDesc);
     
248.    
     
249.     // 表单布局示例
     
250.     var formContainer = new Vertical();
     
251.     formContainer.setSpacing(10);
     
252.    
     
253.     // 用户名行
     
254.     var usernameRow = new Horizontal();
     
255.     usernameRow.setSpacing(10);
     
256.    
     
257.     var usernameLabel = new Label();
     
258.     usernameLabel.setText("用户名:");
     
259.     usernameLabel.setWidth(60);
     
260.     usernameLabel.setTextColor(0, 0, 0);
     
261.    
     
262.     var usernameInput = new Label();
     
263.     usernameInput.setText("ZhangSan");
     
264.     usernameInput.setBackgroundColor(240, 240, 240);
     
265.    
     
266.     usernameRow.addView(usernameLabel);
     
267.     usernameRow.addView(usernameInput);
     
268.     formContainer.addView(usernameRow);
     
269.    
     
270.     // 添加垂直间距
     
271.     var formSpace = new Space();
     
272.     formSpace.setHeight(15.0);
     
273.     formContainer.addView(formSpace);
     
274.    
     
275.     // 密码行
     
276.     var passwordRow = new Horizontal();
     
277.     passwordRow.setSpacing(10);
     
278.    
     
279.     var passwordLabel = new Label();
     
280.     passwordLabel.setText("密码:");
     
281.     passwordLabel.setWidth(60);
     
282.     passwordLabel.setTextColor(0, 0, 0);
     
283.    
     
284.     var passwordInput = new Label();
     
285.     passwordInput.setText("********");
     
286.     passwordInput.setBackgroundColor(240, 240, 240);
     
287.    
     
288.     passwordRow.addView(passwordLabel);
     
289.     passwordRow.addView(passwordInput);
     
290.     formContainer.addView(passwordRow);
     
291.    
     
292.     applicationContainer.addView(formContainer);
     
293.    
     
294.     // 按钮区域
     
295.     var buttonContainer = new Horizontal();
     
296.     buttonContainer.setSpacing(10);
     
297.     buttonContainer.setAlignment("center");
     
298.    
     
299.     // 使用Space创建左右间距
     
300.     var leftSpace = new Space();
     
301.     leftSpace.setWidth(20.0);
     
302.    
     
303.     var loginBtn = new Button();
     
304.     loginBtn.setText("登录");
     
305.     loginBtn.setColor(0, 122, 255);
     
306.     loginBtn.setTextColor(255, 255, 255);
     
307.     loginBtn.setWidth(100);
     
308.     loginBtn.setHeight(40);
     
309.    
     
310.     var registerBtn = new Button();
     
311.     registerBtn.setText("注册");
     
312.     registerBtn.setColor(52, 199, 89);
     
313.     registerBtn.setTextColor(255, 255, 255);
     
314.     registerBtn.setWidth(100);
     
315.     registerBtn.setHeight(40);
     
316.    
     
317.     var rightSpace = new Space();
     
318.     rightSpace.setWidth(20.0);
     
319.    
     
320.     buttonContainer.addView(leftSpace);
     
321.     buttonContainer.addView(loginBtn);
     
322.     buttonContainer.addView(registerBtn);
     
323.     buttonContainer.addView(rightSpace);
     
324.    
     
325.     applicationContainer.addView(buttonContainer);
     
326.     mainContainer.addView(applicationContainer);
     
327.    
     
328.     // 控件信息区域
     
329.     var infoContainer = new Vertical();
     
330.     infoContainer.setBackgroundColor(236, 245, 255);
     
331.     infoContainer.setSpacing(8);
     
332.    
     
333.     var infoTitle = new Label();
     
334.     infoTitle.setText("ℹ️ Space控件说明");
     
335.     infoTitle.setFontSize(16.0);
     
336.     infoTitle.setTextColor(0, 122, 255);
     
337.     infoContainer.addView(infoTitle);
     
338.    
     
339.     var info1 = new Label();
     
340.     info1.setText("• Space控件用于创建空白占位区域");
     
341.     info1.setFontSize(12.0);
     
342.     info1.setTextColor(52, 58, 64);
     
343.     infoContainer.addView(info1);
     
344.    
     
345.     var info2 = new Label();
     
346.     info2.setText("• 可通过setWidth/setHeight设置尺寸");
     
347.     info2.setFontSize(12.0);
     
348.     info2.setTextColor(52, 58, 64);
     
349.     infoContainer.addView(info2);
     
350.    
     
351.     var info3 = new Label();
     
352.     info3.setText("• 可通过setBackgroundColor设置背景色");
     
353.     info3.setFontSize(12.0);
     
354.     info3.setTextColor(52, 58, 64);
     
355.     infoContainer.addView(info3);
     
356.    
     
357.     var info4 = new Label();
     
358.     info4.setText("• 常用于界面布局优化和元素间距控制");
     
359.     info4.setFontSize(12.0);
     
360.     info4.setTextColor(52, 58, 64);
     
361.     infoContainer.addView(info4);
     
362.    
     
363.     mainContainer.addView(infoContainer);
     
364.    
     
365.     // 底部按钮
     
366.     var bottomContainer = new Horizontal();
     
367.     bottomContainer.setSpacing(10);
     
368.     bottomContainer.setAlignment("center");
     
369.    
     
370.     var exitBtn = new Button();
     
371.     exitBtn.setText("退出示例");
     
372.     exitBtn.setColor(255, 59, 48);
     
373.     exitBtn.setTextColor(255, 255, 255);
     
374.     exitBtn.setHeight(40);
     
375.    
     
376.     exitBtn.onClick(() => {
     
377.         printl("退出按钮被点击");
     
378.         vc.dismiss();
     
379.     });
     
380.    
     
381.     bottomContainer.addView(exitBtn);
     
382.     mainContainer.addView(bottomContainer);
     
383.    
     
384.     // 添加到主视图
     
385.     view.addView(mainContainer);
     
386.    
     
387.     printl("Space示例界面构建完成");
     
388. });
     
389. 
     
390. printl("Space控件完整示例已启动");

复制代码

AIWROK软件苹果IOS系统Ul-空白站位[Space]方法小结

---

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

Powered by Discuz! X3.2