B2B网络软件

标题: AIWROK软件苹果UI按钮Button方法示例 [打印本页]

---

作者: YYPOST群发软件    时间: 3 小时前
标题: AIWROK软件苹果UI按钮Button方法示例

AIWROK软件苹果UI按钮Button方法示例

1. // Button综合示例 - 全面展示Button的各种用法和样式
   
2. // // 🍎交流QQ群711841924群一，苹果内测群：528816639
   
3. 
   
4. // 创建TabView
   
5. var tab = new TabView();
   
6. 
   
7. // 设置Tab标题
   
8. var titles = ["Button示例"];
   
9. tab.setTitles(titles);
   
10. 
    
11. // 创建主界面
    
12. var mainView = new Vertical();
    
13. mainView.setBackgroundColor(245, 245, 245);
    
14. mainView.setSpacing(20);
    
15. 
    
16. // 添加标题
    
17. var titleLabel = new Label();
    
18. titleLabel.setText("Button综合示例");
    
19. titleLabel.setTextColor(50, 100, 150);
    
20. titleLabel.setFontSize(24);
    
21. mainView.addView(titleLabel);
    
22. 
    
23. // 添加基本按钮示例
    
24. addSection(mainView, "基本按钮示例");
    
25. addBasicButtonExample(mainView);
    
26. 
    
27. // 添加彩色按钮示例
    
28. addSection(mainView, "彩色按钮示例");
    
29. addColorButtonExample(mainView);
    
30. 
    
31. // 添加交互按钮示例
    
32. addSection(mainView, "交互按钮示例");
    
33. addInteractiveButtonExample(mainView);
    
34. 
    
35. // 添加状态按钮示例
    
36. addSection(mainView, "状态按钮示例");
    
37. addStateButtonExample(mainView);
    
38. 
    
39. // 添加布局按钮示例
    
40. addSection(mainView, "布局按钮示例");
    
41. addLayoutButtonExample(mainView);
    
42. 
    
43. // 添加高级按钮示例
    
44. addSection(mainView, "高级按钮示例");
    
45. addAdvancedButtonExample(mainView);
    
46. 
    
47. // 显示主界面
    
48. tab.show(() => {
    
49.     printl("Button示例界面已加载完成");
    
50.     tab.addView(0, mainView);
    
51. });
    
52. 
    
53. // 添加 section 标题
    
54. function addSection(container, title) {
    
55.     var sectionLabel = new Label();
    
56.     sectionLabel.setText(title);
    
57.     sectionLabel.setTextColor(80, 80, 80);
    
58.     sectionLabel.setFontSize(18);
    
59.     // 添加间距标签作为替代
    
60.     var spacing = new Label();
    
61.     spacing.setHeight(20);
    
62.     container.addView(spacing);
    
63.     container.addView(sectionLabel);
    
64.     var bottomSpacing = new Label();
    
65.     bottomSpacing.setHeight(10);
    
66.     container.addView(bottomSpacing);
    
67. }
    
68. 
    
69. // 基本按钮示例
    
70. function addBasicButtonExample(container) {
    
71.     var buttonContainer = new Horizontal();
    
72.     buttonContainer.setSpacing(20);
    
73.    
    
74.     // 基本按钮
    
75.     var basicBtn = new Button();
    
76.     basicBtn.setText("基本按钮");
    
77.     basicBtn.setWidth(120);
    
78.     basicBtn.setHeight(40);
    
79.     basicBtn.onClick(() => {
    
80.         printl("基本按钮被点击");
    
81.         showToast("基本按钮被点击");
    
82.     });
    
83.     buttonContainer.addView(basicBtn);
    
84.    
    
85.     // 获取按钮文本
    
86.     var getTextBtn = new Button();
    
87.     getTextBtn.setText("获取文本");
    
88.     getTextBtn.setWidth(120);
    
89.     getTextBtn.setHeight(40);
    
90.     getTextBtn.onClick(() => {
    
91.         var text = getTextBtn.getText();
    
92.         printl("按钮文本: " + text);
    
93.         showToast("按钮文本: " + text);
    
94.     });
    
95.     buttonContainer.addView(getTextBtn);
    
96.    
    
97.     container.addView(buttonContainer);
    
98. }
    
99. 
    
100. // 彩色按钮示例
     
101. function addColorButtonExample(container) {
     
102.     var buttonContainer = new Horizontal();
     
103.     buttonContainer.setSpacing(15);
     
104.    
     
105.     // 蓝色按钮
     
106.     var blueBtn = new Button();
     
107.     blueBtn.setText("蓝色按钮");
     
108.     blueBtn.setColor(50, 100, 150);
     
109.     blueBtn.setTextColor(255, 255, 255);
     
110.     blueBtn.setWidth(100);
     
111.     blueBtn.setHeight(40);
     
112.     blueBtn.onClick(() => {
     
113.         showToast("蓝色按钮被点击");
     
114.     });
     
115.     buttonContainer.addView(blueBtn);
     
116.    
     
117.     // 红色按钮
     
118.     var redBtn = new Button();
     
119.     redBtn.setText("红色按钮");
     
120.     redBtn.setColor(200, 50, 50);
     
121.     redBtn.setTextColor(255, 255, 255);
     
122.     redBtn.setWidth(100);
     
123.     redBtn.setHeight(40);
     
124.     redBtn.onClick(() => {
     
125.         showToast("红色按钮被点击");
     
126.     });
     
127.     buttonContainer.addView(redBtn);
     
128.    
     
129.     // 绿色按钮
     
130.     var greenBtn = new Button();
     
131.     greenBtn.setText("绿色按钮");
     
132.     greenBtn.setColor(50, 150, 50);
     
133.     greenBtn.setTextColor(255, 255, 255);
     
134.     greenBtn.setWidth(100);
     
135.     greenBtn.setHeight(40);
     
136.     greenBtn.onClick(() => {
     
137.         showToast("绿色按钮被点击");
     
138.     });
     
139.     buttonContainer.addView(greenBtn);
     
140.    
     
141.     container.addView(buttonContainer);
     
142. }
     
143. 
     
144. // 交互按钮示例
     
145. function addInteractiveButtonExample(container) {
     
146.     var buttonContainer = new Vertical();
     
147.     buttonContainer.setSpacing(15);
     
148.    
     
149.     // 计数器按钮
     
150.     var count = 0;
     
151.     var countBtn = new Button();
     
152.     countBtn.setText("点击次数: " + count);
     
153.     countBtn.setWidth(200);
     
154.     countBtn.setHeight(45);
     
155.     countBtn.setColor(70, 130, 180);
     
156.     countBtn.setTextColor(255, 255, 255);
     
157.     countBtn.onClick(() => {
     
158.         count++;
     
159.         countBtn.setText("点击次数: " + count);
     
160.         showToast("点击次数: " + count);
     
161.     });
     
162.     buttonContainer.addView(countBtn);
     
163.    
     
164.     // 切换文本按钮
     
165.     var toggleBtn = new Button();
     
166.     toggleBtn.setText("显示更多");
     
167.     toggleBtn.setWidth(150);
     
168.     toggleBtn.setHeight(40);
     
169.     toggleBtn.onClick(() => {
     
170.         var currentText = toggleBtn.getText();
     
171.         if (currentText === "显示更多") {
     
172.             toggleBtn.setText("显示更少");
     
173.         } else {
     
174.             toggleBtn.setText("显示更多");
     
175.         }
     
176.         showToast("按钮文本已切换");
     
177.     });
     
178.     buttonContainer.addView(toggleBtn);
     
179.    
     
180.     container.addView(buttonContainer);
     
181. }
     
182. 
     
183. // 状态按钮示例
     
184. function addStateButtonExample(container) {
     
185.     var buttonContainer = new Horizontal();
     
186.     buttonContainer.setSpacing(20);
     
187.    
     
188.     // 启用/禁用按钮
     
189.     var enableBtn = new Button();
     
190.     enableBtn.setText("禁用按钮");
     
191.     enableBtn.setWidth(120);
     
192.     enableBtn.setHeight(40);
     
193.     enableBtn.setColor(150, 150, 150);
     
194.     enableBtn.setTextColor(255, 255, 255);
     
195.    
     
196.     var targetBtn = new Button();
     
197.     targetBtn.setText("目标按钮");
     
198.     targetBtn.setWidth(120);
     
199.     targetBtn.setHeight(40);
     
200.     targetBtn.onClick(() => {
     
201.         showToast("目标按钮被点击");
     
202.     });
     
203.    
     
204.     enableBtn.onClick(() => {
     
205.         var currentText = enableBtn.getText();
     
206.         if (currentText === "禁用按钮") {
     
207.             enableBtn.setText("启用按钮");
     
208.             targetBtn.setColor(150, 150, 150);
     
209.             targetBtn.setTextColor(200, 200, 200);
     
210.             // 实际应用中可能需要设置一个标志来禁用点击
     
211.             showToast("按钮已禁用");
     
212.         } else {
     
213.             enableBtn.setText("禁用按钮");
     
214.             targetBtn.setColor(50, 100, 150);
     
215.             targetBtn.setTextColor(255, 255, 255);
     
216.             showToast("按钮已启用");
     
217.         }
     
218.     });
     
219.    
     
220.     buttonContainer.addView(enableBtn);
     
221.     buttonContainer.addView(targetBtn);
     
222.    
     
223.     container.addView(buttonContainer);
     
224. }
     
225. 
     
226. // 布局按钮示例
     
227. function addLayoutButtonExample(container) {
     
228.     var buttonContainer = new Vertical();
     
229.     buttonContainer.setSpacing(15);
     
230.    
     
231.     // 水平布局按钮组
     
232.     var horizontalGroup = new Horizontal();
     
233.     horizontalGroup.setSpacing(10);
     
234.    
     
235.     var hBtn1 = new Button();
     
236.     hBtn1.setText("按钮1");
     
237.     hBtn1.setWidth(80);
     
238.     hBtn1.setHeight(40);
     
239.     hBtn1.onClick(() => showToast("按钮1被点击"));
     
240.    
     
241.     var hBtn2 = new Button();
     
242.     hBtn2.setText("按钮2");
     
243.     hBtn2.setWidth(80);
     
244.     hBtn2.setHeight(40);
     
245.     hBtn2.onClick(() => showToast("按钮2被点击"));
     
246.    
     
247.     var hBtn3 = new Button();
     
248.     hBtn3.setText("按钮3");
     
249.     hBtn3.setWidth(80);
     
250.     hBtn3.setHeight(40);
     
251.     hBtn3.onClick(() => showToast("按钮3被点击"));
     
252.    
     
253.     horizontalGroup.addView(hBtn1);
     
254.     horizontalGroup.addView(hBtn2);
     
255.     horizontalGroup.addView(hBtn3);
     
256.    
     
257.     buttonContainer.addView(horizontalGroup);
     
258.    
     
259.     // 垂直布局按钮组
     
260.     var verticalGroup = new Vertical();
     
261.     verticalGroup.setSpacing(10);
     
262.    
     
263.     var vBtn1 = new Button();
     
264.     vBtn1.setText("垂直按钮1");
     
265.     vBtn1.setWidth(150);
     
266.     vBtn1.setHeight(40);
     
267.     vBtn1.onClick(() => showToast("垂直按钮1被点击"));
     
268.    
     
269.     var vBtn2 = new Button();
     
270.     vBtn2.setText("垂直按钮2");
     
271.     vBtn2.setWidth(150);
     
272.     vBtn2.setHeight(40);
     
273.     vBtn2.onClick(() => showToast("垂直按钮2被点击"));
     
274.    
     
275.     verticalGroup.addView(vBtn1);
     
276.     verticalGroup.addView(vBtn2);
     
277.    
     
278.     buttonContainer.addView(verticalGroup);
     
279.    
     
280.     container.addView(buttonContainer);
     
281. }
     
282. 
     
283. // 高级按钮示例
     
284. function addAdvancedButtonExample(container) {
     
285.     var buttonContainer = new Vertical();
     
286.     buttonContainer.setSpacing(15);
     
287.    
     
288.     // 带图标效果的按钮（模拟）
     
289.     var iconBtn = new Button();
     
290.     iconBtn.setText("🔍 搜索");
     
291.     iconBtn.setWidth(120);
     
292.     iconBtn.setHeight(40);
     
293.     iconBtn.setColor(70, 130, 180);
     
294.     iconBtn.setTextColor(255, 255, 255);
     
295.     iconBtn.onClick(() => {
     
296.         showToast("搜索按钮被点击");
     
297.     });
     
298.     buttonContainer.addView(iconBtn);
     
299.    
     
300.     // 长文本按钮
     
301.     var longTextBtn = new Button();
     
302.     longTextBtn.setText("这是一个很长很长的按钮文本示例");
     
303.     longTextBtn.setWidth(200);
     
304.     longTextBtn.setHeight(40);
     
305.     longTextBtn.onClick(() => {
     
306.         showToast("长文本按钮被点击");
     
307.     });
     
308.     buttonContainer.addView(longTextBtn);
     
309.    
     
310.     // 确认/取消按钮组
     
311.     var confirmGroup = new Horizontal();
     
312.     confirmGroup.setSpacing(20);
     
313.    
     
314.     var confirmBtn = new Button();
     
315.     confirmBtn.setText("确认");
     
316.     confirmBtn.setWidth(100);
     
317.     confirmBtn.setHeight(40);
     
318.     confirmBtn.setColor(50, 150, 50);
     
319.     confirmBtn.setTextColor(255, 255, 255);
     
320.     confirmBtn.onClick(() => {
     
321.         showToast("确认操作");
     
322.     });
     
323.    
     
324.     var cancelBtn = new Button();
     
325.     cancelBtn.setText("取消");
     
326.     cancelBtn.setWidth(100);
     
327.     cancelBtn.setHeight(40);
     
328.     cancelBtn.setColor(150, 150, 150);
     
329.     cancelBtn.setTextColor(255, 255, 255);
     
330.     cancelBtn.onClick(() => {
     
331.         showToast("取消操作");
     
332.     });
     
333.    
     
334.     confirmGroup.addView(confirmBtn);
     
335.     confirmGroup.addView(cancelBtn);
     
336.    
     
337.     buttonContainer.addView(confirmGroup);
     
338.    
     
339.     container.addView(buttonContainer);
     
340. }
     
341. 
     
342. // 显示提示信息
     
343. function showToast(message) {
     
344.     printl("提示: " + message);
     
345.     // 实际应用中可以调用原生的toast功能
     
346. }
     
347. 
     
348. // 日志输出函数
     
349. function printl(message) {
     
350.     console.log("[Button Example] " + message);
     
351. }
     
352. 
     
353. // 代码说明：
     
354. // 1. 本示例展示了Button的各种用法和样式
     
355. // 2. 包括基本按钮、彩色按钮、交互按钮、状态按钮、布局按钮和高级按钮
     
356. // 3. 实现了按钮点击事件、文本修改、颜色变化等交互功能
     
357. // 4. 代码遵循AIWROK平台的方法规范
     
358. // 5. 可以根据实际需求修改和扩展功能

复制代码

---

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

Powered by Discuz! X3.2