B2B网络软件

标题: AIWROK苹果脚本实例1界面UI输入框类[Input] [打印本页]

---

作者: YYPOST群发软件    时间: 2026-3-4 06:37
标题: AIWROK苹果脚本实例1界面UI输入框类[Input]

AIWROK苹果脚本实例1界面UI输入框类[Input]

1. 
   
2. // =============================================================================
   
3. // 🎨 UI-输入框类[Input]全新系统化示例
   
4. // 📱 适用于苹果iOS系统 - AIWROK IDE
   
5. //🍎交流QQ群711841924群一，苹果内测群，528816639
   
6. // =============================================================================
   
7. //
   
8. // 本示例全面展示Input控件的所有功能，采用TabView多页面架构，
   
9. // 系统化地演示每个方法的使用场景和最佳实践。
   
10. //
    
11. // Input控件方法清单：
    
12. // 1. setText(text) - 设置输入框文本内容
    
13. // 2. getText() - 获取输入框文本内容
    
14. // 3. setID(id) - 设置控件唯一标识符
    
15. // 4. setDefultText(text) - 设置默认文本（配合config使用）
    
16. // 5. setTextColor(r, g, b) - 设置文本颜色
    
17. // 6. setFontSize(size) - 设置字体大小
    
18. // 7. setBackgroundColor(r, g, b) - 设置背景颜色
    
19. // 8. setWidth(width) - 设置控件宽度
    
20. // 9. setHeight(height) - 设置控件高度
    
21. // 10. setPlaceholder(text) - 设置占位提示文本
    
22. // 11. setTextAlignment(align) - 设置文本对齐方式
    
23. // 12. setInputStyle(isLineStyle) - 设置输入框样式
    
24. // =============================================================================
    
25. 
    
26. printl("=== Input输入框控件全新系统化示例启动 ===");
    
27. 
    
28. // 创建TabView主容器
    
29. var tab = new TabView();
    
30. 
    
31. // 设置Tab页面标题
    
32. var tabTitles = [
    
33.     "基础",
    
34.     "样式",
    
35.     "高级",
    
36.     "综合",
    
37.     "关于"
    
38. ];
    
39. tab.setTitles(tabTitles);
    
40. 
    
41. // 显示TabView并初始化所有页面
    
42. tab.show(function() {
    
43.     // 构建各个页面
    
44.     buildBasicPage();
    
45.     buildStylePage();
    
46.     buildAdvancedPage();
    
47.     buildApplicationPage();
    
48.     buildAboutPage();
    
49. });
    
50. 
    
51. // =============================================================================
    
52. // 第一页：基础方法演示
    
53. // =============================================================================
    
54. function buildBasicPage() {
    
55.     var page = new Vertical();
    
56.     page.setSpacing(0);
    
57.     page.setBackgroundColor(245, 245, 250);
    
58. 
    
59.     // 方法1：setText - 设置文本
    
60.     var section1 = createMethodSection(
    
61.         "方法1：setText",
    
62.         "设置输入框的文本内容",
    
63.         "input.setText(\"Hello World\");"
    
64.     );
    
65.    
    
66.     var input1 = new Input();
    
67.     input1.setText("预设的文本内容");
    
68.     input1.setWidth(280);
    
69.     input1.setHeight(42);
    
70.     input1.setBackgroundColor(255, 255, 255);
    
71.     section1.addView(input1);
    
72.    
    
73.     var btn1 = createActionButton("修改文本", function() {
    
74.         input1.setText("文本已被修改！");
    
75.         printl("setText方法演示：文本已修改");
    
76.     });
    
77.     section1.addView(btn1);
    
78.     page.addView(section1);
    
79.    
    
80.     // 方法2：getText - 获取文本
    
81.     var section2 = createMethodSection(
    
82.         "方法2：getText",
    
83.         "获取输入框当前文本内容",
    
84.         "var text = input.getText();"
    
85.     );
    
86.    
    
87.     var input2 = new Input();
    
88.     input2.setPlaceholder("在此输入内容后点击获取");
    
89.     input2.setWidth(280);
    
90.     input2.setHeight(42);
    
91.     input2.setBackgroundColor(255, 255, 255);
    
92.     section2.addView(input2);
    
93.    
    
94.     var resultLabel2 = createResultLabel("等待获取...");
    
95.    
    
96.     var btn2 = createActionButton("获取文本", function() {
    
97.         var text = input2.getText();
    
98.         resultLabel2.setText("获取结果: \"" + text + "\"");
    
99.         printl("getText方法演示：获取到文本 \"" + text + "\"");
    
100.     });
     
101.     section2.addView(btn2);
     
102.     section2.addView(resultLabel2);
     
103.     page.addView(section2);
     
104.    
     
105.     // 方法3：setID - 设置控件ID
     
106.     var section3 = createMethodSection(
     
107.         "方法3：setID",
     
108.         "设置控件唯一标识符，用于配置存储",
     
109.         "input.setID(\"username\");"
     
110.     );
     
111.    
     
112.     var input3 = new Input();
     
113.     input3.setID("demo_input_id");
     
114.     input3.setPlaceholder("已设置ID: demo_input_id");
     
115.     input3.setWidth(280);
     
116.     input3.setHeight(42);
     
117.     input3.setBackgroundColor(255, 255, 255);
     
118.     section3.addView(input3);
     
119.    
     
120.     var btn3 = createActionButton("读取配置", function() {
     
121.         var configValue = config.getConfig("demo_input_id");
     
122.         printl("setID方法演示：从config读取到值 \"" + configValue + "\"");
     
123.     });
     
124.     section3.addView(btn3);
     
125.     page.addView(section3);
     
126.    
     
127.     // 方法4：setDefultText - 设置默认文本
     
128.     var section4 = createMethodSection(
     
129.         "方法4：setDefultText",
     
130.         "设置输入框的默认文本值",
     
131.         "input.setDefultText(\"默认值\");"
     
132.     );
     
133.    
     
134.     var input4 = new Input();
     
135.     input4.setID("default_text_demo");
     
136.     input4.setDefultText("这是默认文本");
     
137.     input4.setWidth(280);
     
138.     input4.setHeight(42);
     
139.     input4.setBackgroundColor(255, 255, 255);
     
140.     section4.addView(input4);
     
141.    
     
142.     var infoLabel4 = createInfoLabel("配合setID使用，可通过config保存/读取默认值");
     
143.     section4.addView(infoLabel4);
     
144.     page.addView(section4);
     
145.    
     
146.     // 添加到TabView
     
147.     tab.addView(0, page);
     
148.     printl("基础方法页面构建完成");
     
149. }
     
150. 
     
151. // =============================================================================
     
152. // 第二页：样式设置演示
     
153. // =============================================================================
     
154. function buildStylePage() {
     
155.     var page = new Vertical();
     
156.     page.setSpacing(0);
     
157.     page.setBackgroundColor(250, 245, 245);
     
158. 
     
159.     // 方法5：setTextColor - 文本颜色
     
160.     var section5 = createMethodSection(
     
161.         "方法5：setTextColor",
     
162.         "设置输入框文本颜色 (R, G, B)",
     
163.         "input.setTextColor(255, 0, 0); // 红色"
     
164.     );
     
165.    
     
166.     var colorContainer = new Horizontal();
     
167.     colorContainer.setSpacing(10);
     
168.    
     
169.     var redInput = new Input();
     
170.     redInput.setText("红色文本");
     
171.     redInput.setTextColor(255, 0, 0);
     
172.     redInput.setWidth(85);
     
173.     redInput.setHeight(40);
     
174.     redInput.setBackgroundColor(255, 235, 235);
     
175.     colorContainer.addView(redInput);
     
176.    
     
177.     var greenInput = new Input();
     
178.     greenInput.setText("绿色文本");
     
179.     greenInput.setTextColor(0, 150, 0);
     
180.     greenInput.setWidth(85);
     
181.     greenInput.setHeight(40);
     
182.     greenInput.setBackgroundColor(235, 255, 235);
     
183.     colorContainer.addView(greenInput);
     
184.    
     
185.     var blueInput = new Input();
     
186.     blueInput.setText("蓝色文本");
     
187.     blueInput.setTextColor(0, 100, 255);
     
188.     blueInput.setWidth(85);
     
189.     blueInput.setHeight(40);
     
190.     blueInput.setBackgroundColor(235, 235, 255);
     
191.     colorContainer.addView(blueInput);
     
192.    
     
193.     section5.addView(colorContainer);
     
194.     page.addView(section5);
     
195.    
     
196.     // 方法6：setFontSize - 字体大小
     
197.     var section6 = createMethodSection(
     
198.         "方法6：setFontSize",
     
199.         "设置输入框字体大小",
     
200.         "input.setFontSize(18);"
     
201.     );
     
202.    
     
203.     var fontContainer = new Vertical();
     
204.     fontContainer.setSpacing(8);
     
205.    
     
206.     var smallInput = new Input();
     
207.     smallInput.setText("小字体 (12px)");
     
208.     smallInput.setFontSize(12);
     
209.     smallInput.setWidth(280);
     
210.     smallInput.setHeight(35);
     
211.     smallInput.setBackgroundColor(255, 255, 255);
     
212.     fontContainer.addView(smallInput);
     
213.    
     
214.     var mediumInput = new Input();
     
215.     mediumInput.setText("中字体 (16px)");
     
216.     mediumInput.setFontSize(16);
     
217.     mediumInput.setWidth(280);
     
218.     mediumInput.setHeight(40);
     
219.     mediumInput.setBackgroundColor(255, 255, 255);
     
220.     fontContainer.addView(mediumInput);
     
221.    
     
222.     var largeInput = new Input();
     
223.     largeInput.setText("大字体 (20px)");
     
224.     largeInput.setFontSize(20);
     
225.     largeInput.setWidth(280);
     
226.     largeInput.setHeight(45);
     
227.     largeInput.setBackgroundColor(255, 255, 255);
     
228.     fontContainer.addView(largeInput);
     
229.    
     
230.     section6.addView(fontContainer);
     
231.     page.addView(section6);
     
232.    
     
233.     // 方法7：setBackgroundColor - 背景颜色
     
234.     var section7 = createMethodSection(
     
235.         "方法7：setBackgroundColor",
     
236.         "设置输入框背景颜色",
     
237.         "input.setBackgroundColor(240, 240, 240);"
     
238.     );
     
239.    
     
240.     var bgContainer = new Horizontal();
     
241.     bgContainer.setSpacing(10);
     
242.    
     
243.     var yellowBg = new Input();
     
244.     yellowBg.setText("黄色背景");
     
245.     yellowBg.setWidth(85);
     
246.     yellowBg.setHeight(40);
     
247.     yellowBg.setBackgroundColor(255, 255, 200);
     
248.     bgContainer.addView(yellowBg);
     
249.    
     
250.     var cyanBg = new Input();
     
251.     cyanBg.setText("青色背景");
     
252.     cyanBg.setWidth(85);
     
253.     cyanBg.setHeight(40);
     
254.     cyanBg.setBackgroundColor(200, 255, 255);
     
255.     bgContainer.addView(cyanBg);
     
256.    
     
257.     var pinkBg = new Input();
     
258.     pinkBg.setText("粉色背景");
     
259.     pinkBg.setWidth(85);
     
260.     pinkBg.setHeight(40);
     
261.     pinkBg.setBackgroundColor(255, 220, 230);
     
262.     bgContainer.addView(pinkBg);
     
263.    
     
264.     section7.addView(bgContainer);
     
265.     page.addView(section7);
     
266.    
     
267.     // 方法8&9：setWidth & setHeight - 尺寸设置
     
268.     var section8 = createMethodSection(
     
269.         "方法8&9：setWidth & setHeight",
     
270.         "设置输入框的宽度和高度",
     
271.         "input.setWidth(300);\ninput.setHeight(50);"
     
272.     );
     
273.    
     
274.     var sizeContainer = new Vertical();
     
275.     sizeContainer.setSpacing(8);
     
276.    
     
277.     var smallSize = new Input();
     
278.     smallSize.setText("小尺寸 (200x35)");
     
279.     smallSize.setWidth(200);
     
280.     smallSize.setHeight(35);
     
281.     smallSize.setBackgroundColor(255, 255, 255);
     
282.     sizeContainer.addView(smallSize);
     
283.    
     
284.     var mediumSize = new Input();
     
285.     mediumSize.setText("中尺寸 (250x42)");
     
286.     mediumSize.setWidth(250);
     
287.     mediumSize.setHeight(42);
     
288.     mediumSize.setBackgroundColor(255, 255, 255);
     
289.     sizeContainer.addView(mediumSize);
     
290.    
     
291.     var largeSize = new Input();
     
292.     largeSize.setText("大尺寸 (300x50)");
     
293.     largeSize.setWidth(300);
     
294.     largeSize.setHeight(50);
     
295.     largeSize.setBackgroundColor(255, 255, 255);
     
296.     sizeContainer.addView(largeSize);
     
297.    
     
298.     section8.addView(sizeContainer);
     
299.     page.addView(section8);
     
300.    
     
301.     // 添加到TabView
     
302.     tab.addView(1, page);
     
303.     printl("样式设置页面构建完成");
     
304. }
     
305. 
     
306. // =============================================================================
     
307. // 第三页：高级功能演示
     
308. // =============================================================================
     
309. function buildAdvancedPage() {
     
310.     var page = new Vertical();
     
311.     page.setSpacing(0);
     
312.     page.setBackgroundColor(245, 250, 245);
     
313. 
     
314.     // 方法10：setPlaceholder - 占位符
     
315.     var section10 = createMethodSection(
     
316.         "方法10：setPlaceholder",
     
317.         "设置占位提示文本（输入框为空时显示）",
     
318.         "input.setPlaceholder(\"请输入用户名...\");"
     
319.     );
     
320.    
     
321.     var placeholderInput = new Input();
     
322.     placeholderInput.setPlaceholder("这是一个占位提示文本...");
     
323.     placeholderInput.setWidth(280);
     
324.     placeholderInput.setHeight(42);
     
325.     placeholderInput.setBackgroundColor(255, 255, 255);
     
326.     section10.addView(placeholderInput);
     
327.     page.addView(section10);
     
328.    
     
329.     // 方法11：setTextAlignment - 文本对齐
     
330.     var section11 = createMethodSection(
     
331.         "方法11：setTextAlignment",
     
332.         "设置文本对齐方式 (left/center/right)",
     
333.         "input.setTextAlignment(\"center\");"
     
334.     );
     
335.    
     
336.     var alignContainer = new Vertical();
     
337.     alignContainer.setSpacing(8);
     
338.    
     
339.     var leftAlign = new Input();
     
340.     leftAlign.setText("左对齐 (left)");
     
341.     leftAlign.setTextAlignment("left");
     
342.     leftAlign.setWidth(280);
     
343.     leftAlign.setHeight(40);
     
344.     leftAlign.setBackgroundColor(255, 240, 240);
     
345.     alignContainer.addView(leftAlign);
     
346.    
     
347.     var centerAlign = new Input();
     
348.     centerAlign.setText("居中对齐 (center)");
     
349.     centerAlign.setTextAlignment("center");
     
350.     centerAlign.setWidth(280);
     
351.     centerAlign.setHeight(40);
     
352.     centerAlign.setBackgroundColor(240, 255, 240);
     
353.     alignContainer.addView(centerAlign);
     
354.    
     
355.     var rightAlign = new Input();
     
356.     rightAlign.setText("右对齐 (right)");
     
357.     rightAlign.setTextAlignment("right");
     
358.     rightAlign.setWidth(280);
     
359.     rightAlign.setHeight(40);
     
360.     rightAlign.setBackgroundColor(240, 240, 255);
     
361.     alignContainer.addView(rightAlign);
     
362.    
     
363.     section11.addView(alignContainer);
     
364.     page.addView(section11);
     
365.    
     
366.     // 方法12：setInputStyle - 输入框样式
     
367.     var section12 = createMethodSection(
     
368.         "方法12：setInputStyle",
     
369.         "设置输入框样式 (true=底部线条样式)",
     
370.         "input.setInputStyle(true); // 底部线条样式"
     
371.     );
     
372.    
     
373.     var styleContainer = new Vertical();
     
374.     styleContainer.setSpacing(15);
     
375.    
     
376.     var normalStyle = new Input();
     
377.     normalStyle.setText("普通样式 (默认)");
     
378.     normalStyle.setWidth(280);
     
379.     normalStyle.setHeight(42);
     
380.     normalStyle.setBackgroundColor(255, 255, 255);
     
381.     styleContainer.addView(normalStyle);
     
382.    
     
383.     var lineStyle = new Input();
     
384.     lineStyle.setText("底部线条样式");
     
385.     lineStyle.setInputStyle(true);
     
386.     lineStyle.setWidth(280);
     
387.     lineStyle.setHeight(42);
     
388.     styleContainer.addView(lineStyle);
     
389.    
     
390.     section12.addView(styleContainer);
     
391.     page.addView(section12);
     
392.    
     
393.     // 动态样式切换演示
     
394.     var sectionDynamic = createMethodSection(
     
395.         "动态样式切换",
     
396.         "实时修改输入框的各种属性",
     
397.         "通过按钮交互动态改变样式"
     
398.     );
     
399.    
     
400.     var dynamicInput = new Input();
     
401.     dynamicInput.setText("动态样式输入框");
     
402.     dynamicInput.setWidth(280);
     
403.     dynamicInput.setHeight(45);
     
404.     dynamicInput.setBackgroundColor(255, 255, 255);
     
405.     sectionDynamic.addView(dynamicInput);
     
406.    
     
407.     var btnContainer = new Horizontal();
     
408.     btnContainer.setSpacing(8);
     
409.    
     
410.     var colorBtn = createSmallButton("变色", function() {
     
411.         var colors = [
     
412.             [255, 200, 200], [200, 255, 200], [200, 200, 255],
     
413.             [255, 255, 200], [255, 200, 255], [200, 255, 255]
     
414.         ];
     
415.         var randomColor = colors[Math.floor(Math.random() * colors.length)];
     
416.         dynamicInput.setBackgroundColor(randomColor[0], randomColor[1], randomColor[2]);
     
417.         printl("动态样式：背景色已变更");
     
418.     });
     
419.     btnContainer.addView(colorBtn);
     
420.    
     
421.     var alignBtn = createSmallButton("切换对齐", function() {
     
422.         var aligns = ["left", "center", "right"];
     
423.         var currentText = dynamicInput.getText();
     
424.         var currentAlign = "left";
     
425.         if (currentText.indexOf("居中") !== -1) currentAlign = "center";
     
426.         if (currentText.indexOf("右对齐") !== -1) currentAlign = "right";
     
427.         
     
428.         var nextIndex = (aligns.indexOf(currentAlign) + 1) % 3;
     
429.         var nextAlign = aligns[nextIndex];
     
430.         
     
431.         var alignLabels = { "left": "左对齐", "center": "居中对齐", "right": "右对齐" };
     
432.         dynamicInput.setText(alignLabels[nextAlign]);
     
433.         dynamicInput.setTextAlignment(nextAlign);
     
434.         printl("动态样式：对齐方式已切换为 " + nextAlign);
     
435.     });
     
436.     btnContainer.addView(alignBtn);
     
437.    
     
438.     var sizeBtn = createSmallButton("调整大小", function() {
     
439.         var sizes = [[200, 35], [250, 42], [300, 50]];
     
440.         var currentWidth = dynamicInput.getWidth ? 250 : 250; // 默认中尺寸
     
441.         var nextSize = sizes[Math.floor(Math.random() * sizes.length)];
     
442.         dynamicInput.setWidth(nextSize[0]);
     
443.         dynamicInput.setHeight(nextSize[1]);
     
444.         printl("动态样式：尺寸已调整为 " + nextSize[0] + "x" + nextSize[1]);
     
445.     });
     
446.     btnContainer.addView(sizeBtn);
     
447.    
     
448.     sectionDynamic.addView(btnContainer);
     
449.     page.addView(sectionDynamic);
     
450.    
     
451.     // 添加到TabView
     
452.     tab.addView(2, page);
     
453.     printl("高级功能页面构建完成");
     
454. }
     
455. 
     
456. // =============================================================================
     
457. // 第四页：综合应用演示
     
458. // =============================================================================
     
459. function buildApplicationPage() {
     
460.     var page = new Vertical();
     
461.     page.setSpacing(0);
     
462.     page.setBackgroundColor(250, 250, 245);
     
463. 
     
464.     // 应用场景1：登录表单
     
465.     var loginSection = createAppSection("场景1：用户登录表单");
     
466.    
     
467.     // 用户名输入
     
468.     var usernameLabel = new Label();
     
469.     usernameLabel.setText("用户名:");
     
470.     usernameLabel.setFontSize(14);
     
471.     usernameLabel.setTextColor(60, 60, 60);
     
472.     loginSection.addView(usernameLabel);
     
473.    
     
474.     var usernameInput = new Input();
     
475.     usernameInput.setID("login_username");
     
476.     usernameInput.setPlaceholder("请输入用户名");
     
477.     usernameInput.setWidth(280);
     
478.     usernameInput.setHeight(42);
     
479.     usernameInput.setBackgroundColor(255, 255, 255);
     
480.     usernameInput.setTextColor(50, 50, 50);
     
481.     loginSection.addView(usernameInput);
     
482.    
     
483.     // 密码输入
     
484.     var passwordLabel = new Label();
     
485.     passwordLabel.setText("密码:");
     
486.     passwordLabel.setFontSize(14);
     
487.     passwordLabel.setTextColor(60, 60, 60);
     
488.     loginSection.addView(passwordLabel);
     
489.    
     
490.     var passwordInput = new Input();
     
491.     passwordInput.setID("login_password");
     
492.     passwordInput.setPlaceholder("请输入密码");
     
493.     passwordInput.setWidth(280);
     
494.     passwordInput.setHeight(42);
     
495.     passwordInput.setBackgroundColor(255, 255, 255);
     
496.     passwordInput.setInputStyle(true); // 使用底部线条样式
     
497.     loginSection.addView(passwordInput);
     
498.    
     
499.     // 登录结果标签
     
500.     var loginResult = createResultLabel("等待操作...");
     
501.     loginSection.addView(loginResult);
     
502.    
     
503.     // 按钮区域
     
504.     var loginBtnContainer = new Horizontal();
     
505.     loginBtnContainer.setSpacing(15);
     
506.    
     
507.     var loginBtn = createActionButton("登录", function() {
     
508.         var username = usernameInput.getText();
     
509.         var password = passwordInput.getText();
     
510.         
     
511.         if (username === "" || password === "") {
     
512.             loginResult.setText("❌ 请填写完整信息！");
     
513.             loginResult.setTextColor(255, 0, 0);
     
514.         } else {
     
515.             loginResult.setText("✅ 登录成功！欢迎 " + username);
     
516.             loginResult.setTextColor(0, 150, 0);
     
517.             printl("登录演示：用户名=" + username + ", 密码长度=" + password.length);
     
518.         }
     
519.     });
     
520.     loginBtnContainer.addView(loginBtn);
     
521.    
     
522.     var resetBtn = createSecondaryButton("重置", function() {
     
523.         usernameInput.setText("");
     
524.         passwordInput.setText("");
     
525.         loginResult.setText("已重置，请重新输入");
     
526.         loginResult.setTextColor(100, 100, 100);
     
527.         printl("登录演示：表单已重置");
     
528.     });
     
529.     loginBtnContainer.addView(resetBtn);
     
530.    
     
531.     loginSection.addView(loginBtnContainer);
     
532.     page.addView(loginSection);
     
533.    
     
534.     // 应用场景2：个人信息编辑
     
535.     var profileSection = createAppSection("场景2：个人信息编辑");
     
536.    
     
537.     // 昵称
     
538.     var nicknameRow = createInputRow("昵称", "nickname_field", "请输入昵称");
     
539.     profileSection.addView(nicknameRow);
     
540.    
     
541.     // 邮箱
     
542.     var emailRow = createInputRow("邮箱", "email_field", "请输入邮箱地址");
     
543.     profileSection.addView(emailRow);
     
544.    
     
545.     // 电话
     
546.     var phoneRow = createInputRow("电话", "phone_field", "请输入电话号码");
     
547.     profileSection.addView(phoneRow);
     
548.    
     
549.     // 保存按钮
     
550.     var saveBtn = createActionButton("保存信息", function() {
     
551.         var nickname = config.getConfig("nickname_field");
     
552.         var email = config.getConfig("email_field");
     
553.         var phone = config.getConfig("phone_field");
     
554.         
     
555.         printl("保存信息：昵称=" + nickname + ", 邮箱=" + email + ", 电话=" + phone);
     
556.         
     
557.         var saveResult = createResultLabel("✅ 信息已保存到配置！");
     
558.         saveResult.setTextColor(0, 150, 0);
     
559.         profileSection.addView(saveResult);
     
560.         
     
561.         // 3秒后移除结果提示
     
562.         sleep(3000);
     
563.         // 注意：实际应用中可能需要使用定时器
     
564.     });
     
565.     profileSection.addView(saveBtn);
     
566.    
     
567.     page.addView(profileSection);
     
568.    
     
569.     // 应用场景3：搜索功能
     
570.     var searchSection = createAppSection("场景3：搜索功能");
     
571.    
     
572.     var searchContainer = new Horizontal();
     
573.     searchContainer.setSpacing(10);
     
574.    
     
575.     var searchInput = new Input();
     
576.     searchInput.setPlaceholder("请输入搜索关键词...");
     
577.     searchInput.setWidth(200);
     
578.     searchInput.setHeight(42);
     
579.     searchInput.setBackgroundColor(255, 255, 255);
     
580.     searchInput.setTextAlignment("left");
     
581.     searchContainer.addView(searchInput);
     
582.    
     
583.     var searchBtn = new Button();
     
584.     searchBtn.setText("🔍 搜索");
     
585.     searchBtn.setColor(0, 122, 255);
     
586.     searchBtn.setTextColor(255, 255, 255);
     
587.     searchBtn.setWidth(80);
     
588.     searchBtn.setHeight(42);
     
589.    
     
590.     var searchResult = createResultLabel("输入关键词后点击搜索");
     
591.    
     
592.     searchBtn.onClick(function() {
     
593.         var keyword = searchInput.getText();
     
594.         if (keyword === "") {
     
595.             searchResult.setText("⚠️ 请输入搜索关键词");
     
596.             searchResult.setTextColor(255, 150, 0);
     
597.         } else {
     
598.             searchResult.setText("🔍 正在搜索: \"" + keyword + "\"...");
     
599.             searchResult.setTextColor(0, 100, 200);
     
600.             printl("搜索演示：关键词=\"" + keyword + "\"");
     
601.         }
     
602.     });
     
603.     searchContainer.addView(searchBtn);
     
604.    
     
605.     searchSection.addView(searchContainer);
     
606.     searchSection.addView(searchResult);
     
607.     page.addView(searchSection);
     
608.    
     
609.     // 添加到TabView
     
610.     tab.addView(3, page);
     
611.     printl("综合应用页面构建完成");
     
612. }
     
613. 
     
614. // =============================================================================
     
615. // 第五页：关于页面
     
616. // =============================================================================
     
617. function buildAboutPage() {
     
618.     var page = new Vertical();
     
619.     page.setSpacing(0);
     
620.     page.setBackgroundColor(240, 248, 255);
     
621.     page.setAlignment("center");
     
622. 
     
623.     // 应用图标区域（使用Label模拟）
     
624.     var iconLabel = new Label();
     
625.     iconLabel.setText("⌨️");
     
626.     iconLabel.setFontSize(40);
     
627.     page.addView(iconLabel);
     
628.    
     
629.     // 标题
     
630.     var appTitle = new Label();
     
631.     appTitle.setText("Input控件系统化示例");
     
632.     appTitle.setFontSize(22);
     
633.     appTitle.setTextColor(0, 100, 150);
     
634.     appTitle.setTextAlignment("center");
     
635.     page.addView(appTitle);
     
636.    
     
637.     // 版本信息
     
638.     var versionLabel = new Label();
     
639.     versionLabel.setText("版本: 2.0.0");
     
640.     versionLabel.setFontSize(14);
     
641.     versionLabel.setTextColor(100, 100, 100);
     
642.     versionLabel.setTextAlignment("center");
     
643.     page.addView(versionLabel);
     
644.    
     
645.     // 分隔线
     
646.     var line = new Label();
     
647.     line.setText("━━━━━━━━━━━━━━━━");
     
648.     line.setTextAlignment("center");
     
649.     line.setTextColor(200, 200, 200);
     
650.     page.addView(line);
     
651.    
     
652.     // 方法列表
     
653.     var methodListLabel = new Label();
     
654.     methodListLabel.setText("📋 Input控件方法清单");
     
655.     methodListLabel.setFontSize(16);
     
656.     methodListLabel.setTextColor(50, 50, 50);
     
657.     methodListLabel.setTextAlignment("center");
     
658.     page.addView(methodListLabel);
     
659.    
     
660.     var methodsInfo = new Label();
     
661.     methodsInfo.setText(
     
662.         "1. setText(text) - 设置文本\n" +
     
663.         "2. getText() - 获取文本\n" +
     
664.         "3. setID(id) - 设置控件ID\n" +
     
665.         "4. setDefultText(text) - 设置默认文本\n" +
     
666.         "5. setTextColor(r,g,b) - 设置文本颜色\n" +
     
667.         "6. setFontSize(size) - 设置字体大小\n" +
     
668.         "7. setBackgroundColor(r,g,b) - 设置背景色\n" +
     
669.         "8. setWidth(width) - 设置宽度\n" +
     
670.         "9. setHeight(height) - 设置高度\n" +
     
671.         "10. setPlaceholder(text) - 设置占位符\n" +
     
672.         "11. setTextAlignment(align) - 设置对齐\n" +
     
673.         "12. setInputStyle(bool) - 设置样式"
     
674.     );
     
675.     methodsInfo.setFontSize(11);
     
676.     methodsInfo.setTextColor(80, 80, 80);
     
677.     methodsInfo.setTextAlignment("left");
     
678.     methodsInfo.setBackgroundColor(255, 255, 255);
     
679.     methodsInfo.setWidth(300);
     
680.     methodsInfo.setHeight(180);
     
681.     page.addView(methodsInfo);
     
682.    
     
683.     // 分隔线
     
684.     var line2 = new Label();
     
685.     line2.setText("━━━━━━━━━━━━━━━━");
     
686.     line2.setTextAlignment("center");
     
687.     line2.setTextColor(200, 200, 200);
     
688.     page.addView(line2);
     
689.    
     
690. 
     
691.    
     
692.     // 退出按钮
     
693.     var exitBtn = new Button();
     
694.     exitBtn.setText("退出示例");
     
695.     exitBtn.setColor(255, 59, 48);
     
696.     exitBtn.setTextColor(255, 255, 255);
     
697.     exitBtn.setWidth(150);
     
698.     exitBtn.setHeight(45);
     
699.     exitBtn.onClick(function() {
     
700.         printl("用户退出示例");
     
701.         tab.dismiss();
     
702.     });
     
703.     page.addView(exitBtn);
     
704.    
     
705.     // 添加到TabView
     
706.     tab.addView(4, page);
     
707.     printl("关于页面构建完成");
     
708. }
     
709. 
     
710. // =============================================================================
     
711. // 辅助函数 - UI组件创建
     
712. // =============================================================================
     
713. 
     
714. // 创建章节标题
     
715. function createSectionTitle(text) {
     
716.     var title = new Label();
     
717.     title.setText(text);
     
718.     title.setFontSize(18);
     
719.     title.setTextColor(0, 100, 150);
     
720.     title.setTextAlignment("center");
     
721.     title.setWidth(350);
     
722.     title.setHeight(30);
     
723.     return title;
     
724. }
     
725. 
     
726. // 创建方法演示区块
     
727. function createMethodSection(methodName, description, codeExample) {
     
728.     var section = new Vertical();
     
729.     section.setSpacing(0);
     
730.     section.setBackgroundColor(255, 255, 255);
     
731.    
     
732.     // 方法名称
     
733.     var nameLabel = new Label();
     
734.     nameLabel.setText(methodName);
     
735.     nameLabel.setFontSize(15);
     
736.     nameLabel.setTextColor(0, 122, 255);
     
737.     nameLabel.setTextAlignment("left");
     
738.     section.addView(nameLabel);
     
739.    
     
740.     // 方法描述
     
741.     var descLabel = new Label();
     
742.     descLabel.setText(description);
     
743.     descLabel.setFontSize(12);
     
744.     descLabel.setTextColor(80, 80, 80);
     
745.     section.addView(descLabel);
     
746.    
     
747.     // 代码示例
     
748.     var codeLabel = new Label();
     
749.     codeLabel.setText(codeExample);
     
750.     codeLabel.setFontSize(11);
     
751.     codeLabel.setTextColor(50, 50, 150);
     
752.     codeLabel.setBackgroundColor(245, 245, 255);
     
753.     codeLabel.setWidth(280);
     
754.     codeLabel.setHeight(35);
     
755.     section.addView(codeLabel);
     
756.    
     
757.     return section;
     
758. }
     
759. 
     
760. // 创建应用场景区块
     
761. function createAppSection(title) {
     
762.     var section = new Vertical();
     
763.     section.setSpacing(2);
     
764.     section.setBackgroundColor(255, 255, 255);
     
765.    
     
766.     var titleLabel = new Label();
     
767.     titleLabel.setText(title);
     
768.     titleLabel.setFontSize(16);
     
769.     titleLabel.setTextColor(80, 80, 80);
     
770.     section.addView(titleLabel);
     
771.    
     
772.     return section;
     
773. }
     
774. 
     
775. // 创建输入行（标签+输入框）
     
776. function createInputRow(labelText, inputId, placeholder) {
     
777.     var row = new Vertical();
     
778.     row.setSpacing(5);
     
779.    
     
780.     var label = new Label();
     
781.     label.setText(labelText + ":");
     
782.     label.setFontSize(13);
     
783.     label.setTextColor(60, 60, 60);
     
784.     row.addView(label);
     
785.    
     
786.     var input = new Input();
     
787.     input.setID(inputId);
     
788.     input.setPlaceholder(placeholder);
     
789.     input.setWidth(280);
     
790.     input.setHeight(40);
     
791.     input.setBackgroundColor(250, 250, 250);
     
792.     row.addView(input);
     
793.    
     
794.     return row;
     
795. }
     
796. 
     
797. // 创建操作按钮
     
798. function createActionButton(text, onClickHandler) {
     
799.     var btn = new Button();
     
800.     btn.setText(text);
     
801.     btn.setColor(0, 122, 255);
     
802.     btn.setTextColor(255, 255, 255);
     
803.     btn.setWidth(120);
     
804.     btn.setHeight(40);
     
805.     btn.onClick(onClickHandler);
     
806.     return btn;
     
807. }
     
808. 
     
809. // 创建次要按钮
     
810. function createSecondaryButton(text, onClickHandler) {
     
811.     var btn = new Button();
     
812.     btn.setText(text);
     
813.     btn.setColor(150, 150, 150);
     
814.     btn.setTextColor(255, 255, 255);
     
815.     btn.setWidth(100);
     
816.     btn.setHeight(40);
     
817.     btn.onClick(onClickHandler);
     
818.     return btn;
     
819. }
     
820. 
     
821. // 创建小按钮
     
822. function createSmallButton(text, onClickHandler) {
     
823.     var btn = new Button();
     
824.     btn.setText(text);
     
825.     btn.setColor(100, 150, 200);
     
826.     btn.setTextColor(255, 255, 255);
     
827.     btn.setWidth(85);
     
828.     btn.setHeight(35);
     
829.     btn.onClick(onClickHandler);
     
830.     return btn;
     
831. }
     
832. 
     
833. // 创建结果标签
     
834. function createResultLabel(text) {
     
835.     var label = new Label();
     
836.     label.setText(text);
     
837.     label.setFontSize(12);
     
838.     label.setTextColor(100, 100, 100);
     
839.     label.setBackgroundColor(245, 245, 245);
     
840.     label.setWidth(280);
     
841.     label.setHeight(30);
     
842.     return label;
     
843. }
     
844. 
     
845. // 创建信息标签
     
846. function createInfoLabel(text) {
     
847.     var label = new Label();
     
848.     label.setText(text);
     
849.     label.setFontSize(11);
     
850.     label.setTextColor(120, 120, 120);
     
851.     label.setTextAlignment("center");
     
852.     return label;
     
853. }
     
854. 
     
855. // =============================================================================
     
856. // 程序入口
     
857. // =============================================================================
     
858. printl("=== Input控件全新系统化示例已启动 ===");
     
859. printl("本示例包含5个Tab页面，全面展示Input控件的12个方法");
     

复制代码

---

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

Powered by Discuz! X3.2