B2B网络软件

标题: AIWROK软件苹果TAB界面视图示例 [打印本页]

---

作者: YYPOST群发软件    时间: 昨天 09:39
标题: AIWROK软件苹果TAB界面视图示例

AIWROK软件苹果TAB界面视图示例

1. // 全新TabView案例 - 基于AIWROK文档实现
   
2. // 该示例展示了如何创建一个功能完整的TabView界面，包含多个标签页和交互元素
   
3. // 🍎交流QQ群711841924群一，苹果内测群：528816639
   
4. // 创建TabView实例
   
5. var tab = new TabView();
   
6. 
   
7. // 设置Tab标题
   
8. var tabTitles = ["首页", "工具", "数据", "设置"];
   
9. tab.setTitles(tabTitles);
   
10. 
    
11. // 显示TabView界面
    
12. tab.show(() => {
    
13.     printl("TabView界面已加载完成");
    
14.    
    
15.     // 为每个Tab添加内容
    
16.     for (var i = 0; i < tabTitles.length; i++) {
    
17.         tab.addView(i, createTabContent(i, tabTitles[i]));
    
18.     }
    
19. });
    
20. 
    
21. // 创建Tab内容的函数
    
22. function createTabContent(index, title) {
    
23.     var v = new Vertical();
    
24.     v.setBackgroundColor(245, 245, 245); // 浅灰色背景
    
25.    
    
26.     // 添加标题区域
    
27.     var titleHeader = new Horizontal();
    
28.     titleHeader.setAlignment("center");
    
29.     titleHeader.setSpacing(20);
    
30.    
    
31.     var titleLabel = new Label();
    
32.     titleLabel.setText(title + "页面");
    
33.     titleLabel.setTextColor(50, 100, 150); // 蓝色文字
    
34.     titleLabel.setFontSize(24);
    
35.     titleHeader.addView(titleLabel);
    
36.    
    
37.     v.addView(titleHeader);
    
38.    
    
39.     // 添加分隔线
    
40.     var divider = new Label();
    
41.     divider.setHeight(2);
    
42.     divider.setBackgroundColor(200, 200, 200);
    
43.     v.addView(divider);
    
44.    
    
45.     // 添加内容区域
    
46.     var contentArea = new Vertical();
    
47.     contentArea.setSpacing(20);
    
48.    
    
49.     // 根据不同Tab添加不同内容
    
50.     if (index === 0) { // 首页Tab
    
51.         addHomeContent(contentArea);
    
52.     } else if (index === 1) { // 工具Tab
    
53.         addToolsContent(contentArea);
    
54.     } else if (index === 2) { // 数据Tab
    
55.         addDataContent(contentArea);
    
56.     } else if (index === 3) { // 设置Tab
    
57.         addSettingsContent(contentArea);
    
58.     }
    
59.    
    
60.     v.addView(contentArea);
    
61.    
    
62.     // 添加底部按钮区域
    
63.     var buttonArea = new Horizontal();
    
64.     buttonArea.setAlignment("center");
    
65.     buttonArea.setSpacing(20);
    
66.     buttonArea.setBackgroundColor(230, 230, 230);
    
67.    
    
68.     var refreshButton = new Button();
    
69.     refreshButton.setText("刷新");
    
70.     refreshButton.setColor(50, 100, 150); // 蓝色背景
    
71.     refreshButton.setTextColor(255, 255, 255); // 白色文字
    
72.     refreshButton.setWidth(100);
    
73.     refreshButton.setHeight(40);
    
74.     refreshButton.onClick(() => {
    
75.         printl(title + "页面刷新按钮被点击");
    
76.         showToast("页面已刷新");
    
77.     });
    
78.     buttonArea.addView(refreshButton);
    
79.    
    
80.     var closeButton = new Button();
    
81.     closeButton.setText("关闭");
    
82.     closeButton.setColor(200, 50, 50); // 红色背景
    
83.     closeButton.setTextColor(255, 255, 255); // 白色文字
    
84.     closeButton.setWidth(100);
    
85.     closeButton.setHeight(40);
    
86.     closeButton.onClick(() => {
    
87.         printl("关闭按钮被点击");
    
88.         tab.dismiss();
    
89.     });
    
90.     buttonArea.addView(closeButton);
    
91.    
    
92.     v.addView(buttonArea);
    
93.    
    
94.     return v;
    
95. }
    
96. 
    
97. // 添加首页内容
    
98. function addHomeContent(container) {
    
99.     // 添加欢迎信息
    
100.     var welcomeLabel = new Label();
     
101.     welcomeLabel.setText("欢迎使用AIWROK开发工具");
     
102.     welcomeLabel.setTextColor(80, 80, 80);
     
103.     welcomeLabel.setFontSize(18);
     
104.     welcomeLabel.setTextAlignment("center");
     
105.     container.addView(welcomeLabel);
     
106.    
     
107.     // 添加间距
     
108.     var spacing = new Label();
     
109.     spacing.setHeight(30);
     
110.     container.addView(spacing);
     
111.    
     
112.     // 添加功能卡片
     
113.     addFeatureCard(container, "快速开发", "使用AIWROK快速构建应用");
     
114.     addFeatureCard(container, "跨平台支持", "同时支持iOS和Android");
     
115.     addFeatureCard(container, "丰富组件", "提供多种UI组件和工具");
     
116. }
     
117. 
     
118. // 添加工具内容
     
119. function addToolsContent(container) {
     
120.     // 添加工具列表
     
121.     var toolsList = new Vertical();
     
122.    
     
123.     addToolItem(toolsList, "OCR文字识别", "识别图片中的文字");
     
124.     addToolItem(toolsList, "找图功能", "在屏幕上查找指定图片");
     
125.     addToolItem(toolsList, "网络请求", "发送HTTP请求获取数据");
     
126.     addToolItem(toolsList, "文件操作", "读取和写入本地文件");
     
127.    
     
128.     container.addView(toolsList);
     
129. }
     
130. 
     
131. // 添加数据内容
     
132. function addDataContent(container) {
     
133.     // 添加数据展示
     
134.     var dataHeader = new Label();
     
135.     dataHeader.setText("应用数据统计");
     
136.     dataHeader.setTextColor(80, 80, 80);
     
137.     dataHeader.setFontSize(18);
     
138.     container.addView(dataHeader);
     
139.    
     
140.     // 添加间距
     
141.     var spacing = new Label();
     
142.     spacing.setHeight(20);
     
143.     container.addView(spacing);
     
144.    
     
145.     // 添加数据项
     
146.     addDataItem(container, "今日启动次数", "12");
     
147.     addDataItem(container, "总运行时间", "3小时25分钟");
     
148.     addDataItem(container, "成功执行任务", "48");
     
149.     addDataItem(container, "错误次数", "2");
     
150. }
     
151. 
     
152. // 添加设置内容
     
153. function addSettingsContent(container) {
     
154.     // 添加设置列表
     
155.     var settingsList = new Vertical();
     
156.    
     
157.     addSettingItem(settingsList, "通用设置", "基本应用配置");
     
158.     addSettingItem(settingsList, "外观设置", "调整应用外观");
     
159.     addSettingItem(settingsList, "通知设置", "管理应用通知");
     
160.     addSettingItem(settingsList, "关于我们", "应用信息和版本");
     
161.    
     
162.     container.addView(settingsList);
     
163. }
     
164. 
     
165. // 添加功能卡片
     
166. function addFeatureCard(container, title, description) {
     
167.     var card = new Vertical();
     
168.     card.setBackgroundColor(255, 255, 255);
     
169.     card.setSpacing(15);
     
170.    
     
171.     var cardTitle = new Label();
     
172.     cardTitle.setText(title);
     
173.     cardTitle.setTextColor(50, 100, 150);
     
174.     cardTitle.setFontSize(16);
     
175.     card.addView(cardTitle);
     
176.    
     
177.     var cardDesc = new Label();
     
178.     cardDesc.setText(description);
     
179.     cardDesc.setTextColor(100, 100, 100);
     
180.     cardDesc.setFontSize(14);
     
181.     card.addView(cardDesc);
     
182.    
     
183.     container.addView(card);
     
184. }
     
185. 
     
186. // 添加工具项
     
187. function addToolItem(container, name, description) {
     
188.     var toolItem = new Horizontal();
     
189.     toolItem.setBackgroundColor(255, 255, 255);
     
190.     toolItem.setSpacing(15);
     
191.    
     
192.     var toolInfo = new Vertical();
     
193.     var toolName = new Label();
     
194.     toolName.setText(name);
     
195.     toolName.setTextColor(80, 80, 80);
     
196.     toolName.setFontSize(16);
     
197.     toolInfo.addView(toolName);
     
198.    
     
199.     var toolDesc = new Label();
     
200.     toolDesc.setText(description);
     
201.     toolDesc.setTextColor(120, 120, 120);
     
202.     toolDesc.setFontSize(14);
     
203.     toolInfo.addView(toolDesc);
     
204.    
     
205.     var toolButton = new Button();
     
206.     toolButton.setText("使用");
     
207.     toolButton.setColor(50, 100, 150);
     
208.     toolButton.setTextColor(255, 255, 255);
     
209.     toolButton.setWidth(80);
     
210.     toolButton.setHeight(35);
     
211.     toolButton.onClick(() => {
     
212.         printl(name + "工具被点击");
     
213.         showToast("正在启动" + name);
     
214.     });
     
215.    
     
216.     toolItem.addView(toolInfo);
     
217.     toolItem.addView(toolButton);
     
218.    
     
219.     container.addView(toolItem);
     
220. }
     
221. 
     
222. // 添加数据项
     
223. function addDataItem(container, label, value) {
     
224.     var dataItem = new Horizontal();
     
225.     dataItem.setAlignment("space_between");
     
226.     dataItem.setSpacing(10);
     
227.    
     
228.     var dataLabel = new Label();
     
229.     dataLabel.setText(label);
     
230.     dataLabel.setTextColor(80, 80, 80);
     
231.     dataLabel.setFontSize(16);
     
232.    
     
233.     var dataValue = new Label();
     
234.     dataValue.setText(value);
     
235.     dataValue.setTextColor(50, 100, 150);
     
236.     dataValue.setFontSize(16);
     
237.     dataValue.setTextAlignment("right");
     
238.    
     
239.     dataItem.addView(dataLabel);
     
240.     dataItem.addView(dataValue);
     
241.    
     
242.     container.addView(dataItem);
     
243. }
     
244. 
     
245. // 添加设置项
     
246. function addSettingItem(container, name, description) {
     
247.     var settingItem = new Horizontal();
     
248.     settingItem.setBackgroundColor(255, 255, 255);
     
249.     settingItem.setSpacing(15);
     
250.    
     
251.     var settingInfo = new Vertical();
     
252.     var settingName = new Label();
     
253.     settingName.setText(name);
     
254.     settingName.setTextColor(80, 80, 80);
     
255.     settingName.setFontSize(16);
     
256.     settingInfo.addView(settingName);
     
257.    
     
258.     var settingDesc = new Label();
     
259.     settingDesc.setText(description);
     
260.     settingDesc.setTextColor(120, 120, 120);
     
261.     settingDesc.setFontSize(14);
     
262.     settingInfo.addView(settingDesc);
     
263.    
     
264.     var arrowLabel = new Label();
     
265.     arrowLabel.setText(">");
     
266.     arrowLabel.setTextColor(150, 150, 150);
     
267.     arrowLabel.setFontSize(18);
     
268.    
     
269.     settingItem.addView(settingInfo);
     
270.     settingItem.addView(arrowLabel);
     
271.    
     
272.     container.addView(settingItem);
     
273. }
     
274. 
     
275. // 显示提示信息
     
276. function showToast(message) {
     
277.     printl("显示提示: " + message);
     
278.     // 实际应用中可以调用原生的toast功能
     
279. }
     
280. 
     
281. // 日志输出函数
     
282. function printl(message) {
     
283.     console.log("[TabView Example] " + message);
     
284. }
     
285. 
     
286. // 代码说明：
     
287. // 1. 本示例创建了一个包含4个标签页的TabView界面
     
288. // 2. 每个标签页都有不同的内容和布局
     
289. // 3. 添加了多种UI元素，如按钮、标签、水平/垂直容器等
     
290. // 4. 实现了基本的交互功能，如按钮点击事件
     
291. // 5. 代码遵循AIWROK平台的方法规范
     
292. // 6. 可以根据实际需求修改和扩展功能
     

复制代码

---

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

Powered by Discuz! X3.2