B2B网络软件

标题: AIWROK苹果系统简单的UI界面分享一下 [打印本页]

---

作者: YYPOST群发软件    时间: 7 小时前
标题: AIWROK苹果系统简单的UI界面分享一下
AIWROK苹果系统简单的UI界面分享一下

1. //🍎交流QQ群711841924群一，苹果内测群，528816639
   
2. // 优化界面美观度和用户体验
   
3. 
   
4. // 创建TabView
   
5. var tab = new TabView();
   
6. 
   
7. // 设置Tab标题，使用简洁标题
   
8. var titles = ["软件", "通用", "日常", "辅助", "设置"];
   
9. tab.setTitles(titles);
   
10. 
    
11. // 显示TabView
    
12. tab.show(() => {
    
13.     printl("TabView已启动，标题自适应调整完成");
    
14.    
    
15.     // 为每个Tab添加内容
    
16.     for (var i = 0; i < titles.length; i++) {
    
17.         tab.addView(i, createTabContent(i, titles[i]));
    
18.     }
    
19. });
    
20. 
    
21. // 创建Tab内容的函数
    
22. function createTabContent(index, title) {
    
23.     var v = new Vertical();
    
24.     v.setBackgroundColor(240, 240, 245); // 浅灰蓝色背景，更柔和
    
25.    
    
26.     // 添加标题区域
    
27.     var titleHeader = new Horizontal();
    
28.     titleHeader.setAlignment("center");
    
29.    
    
30.     var titleLabel = new Label();
    
31.     titleLabel.setText(title + "功能");
    
32.     titleLabel.setTextColor(70, 130, 180); // 钢蓝色文字
    
33.     titleLabel.setFontSize(22);
    
34.     titleHeader.addView(titleLabel);
    
35.    
    
36.     v.addView(titleHeader);
    
37.    
    
38.     // 添加分隔线
    
39.     var divider = new Label();
    
40.     divider.setHeight(2);
    
41.     divider.setBackgroundColor(220, 220, 225);
    
42.     v.addView(divider);
    
43.    
    
44.     // 添加操作按钮区域
    
45.     var buttonContainer = new Horizontal();
    
46.     buttonContainer.setAlignment("center");
    
47.    
    
48.     // 添加开始按钮
    
49.     var btnStart = new Button();
    
50.     btnStart.setText("开始");
    
51.     btnStart.setColor(70, 130, 180); // 钢蓝色背景
    
52.     btnStart.setTextColor(255, 255, 255); // 白色文字
    
53.     btnStart.setWidth(120);
    
54.     btnStart.setHeight(45);
    
55.     btnStart.onClick(() => {
    
56.         printl("开始按钮被点击");
    
57.     });
    
58.     buttonContainer.addView(btnStart);
    
59.    
    
60.     // 添加返回按钮
    
61.     var btnBack = new Button();
    
62.     btnBack.setText("返回");
    
63.     btnBack.setColor(255, 99, 71); // 番茄红色背景
    
64.     btnBack.setTextColor(255, 255, 255); // 白色文字
    
65.     btnBack.setWidth(120);
    
66.     btnBack.setHeight(45);
    
67.     btnBack.onClick(() => {
    
68.         printl("返回按钮被点击");
    
69.         tab.dismiss();
    
70.     });
    
71.     buttonContainer.addView(btnBack);
    
72.    
    
73.     v.addView(buttonContainer);
    
74.    
    
75.     // 添加标题标签
    
76.     var titleLabel = new Label();
    
77.     titleLabel.setText(title + "页面内容");
    
78.     titleLabel.setTextColor(0, 0, 0);
    
79.     titleLabel.setFontSize(18);
    
80.     v.addView(titleLabel);
    
81.    
    
82.     // 根据不同Tab添加不同内容
    
83.     if (index === 0) { // 软件Tab
    
84.         addSoftwareTasks(v);
    
85.     } else if (index === 1) { // 通用Tab
    
86.         addGeneralTasks(v);
    
87.     } else if (index === 2) { // 日常Tab
    
88.         addDailyTasks(v);
    
89.     } else if (index === 3) { // 辅助Tab
    
90.         addAuxiliaryTasks(v);
    
91.     } else if (index === 4) { // 设置Tab
    
92.         var settingsLabel = new Label();
    
93.           settingsLabel.setText("设置选项");
    
94.           settingsLabel.setTextColor(128, 0, 128); // 紫色文字
    
95.           settingsLabel.setFontSize(18);
    
96.           v.addView(settingsLabel);
    
97.         
    
98.         // 添加设置项容器
    
99.         var settingsContainer = new Vertical();
    
100.         settingsContainer.setBackgroundColor(255, 255, 255);
     
101.         
     
102.         // 添加设置项
     
103.         addTaskItem(settingsContainer, "通用设置");
     
104.         addTaskItem(settingsContainer, "个性化");
     
105.         addTaskItem(settingsContainer, "关于我们");
     
106.         
     
107.         v.addView(settingsContainer);
     
108.     }
     
109.    
     
110.     return v;
     
111. }
     
112. 
     
113. // 添加软件任务列表
     
114. function addSoftwareTasks(container) {
     
115.     // 添加任务分类标题
     
116.     var categoryLabel = new Label();
     
117.     categoryLabel.setText("喜番任务");
     
118.     categoryLabel.setTextColor(128, 0, 128); // 紫色文字，更显优雅
     
119.     categoryLabel.setFontSize(18);
     
120.     container.addView(categoryLabel);
     
121.    
     
122.     // 添加任务项
     
123.     addTaskItem(container, "看短剧");
     
124.     addTaskItem(container, "宝箱");
     
125.     addTaskItem(container, "看视频");
     
126.    
     
127.     // 添加分隔和另一个分类
     
128.     var sectionDivider = new Label();
     
129.     sectionDivider.setHeight(1);
     
130.     sectionDivider.setBackgroundColor(220, 220, 225);
     
131.     container.addView(sectionDivider);
     
132.    
     
133.     categoryLabel = new Label();
     
134.     categoryLabel.setText("抖极任务");
     
135.     categoryLabel.setTextColor(128, 0, 128); // 紫色文字
     
136.     categoryLabel.setFontSize(18);
     
137.     container.addView(categoryLabel);
     
138.    
     
139.     addTaskItem(container, "宝箱");
     
140.     addTaskItem(container, "AD广");
     
141.     addTaskItem(container, "小猪");
     
142.    
     
143.     // 添加更多分类...
     
144.     sectionDivider = new Label();
     
145.     sectionDivider.setHeight(1);
     
146.     sectionDivider.setBackgroundColor(220, 220, 225);
     
147.     container.addView(sectionDivider);
     
148.    
     
149.     categoryLabel = new Label();
     
150.     categoryLabel.setText("红果任务");
     
151.     categoryLabel.setTextColor(128, 0, 128); // 紫色文字
     
152.     categoryLabel.setFontSize(18);
     
153.     container.addView(categoryLabel);
     
154.    
     
155.     addTaskItem(container, "宝箱");
     
156.     addTaskItem(container, "短剧");
     
157.     addTaskItem(container, "海量");
     
158. }
     
159. 
     
160. // 添加通用任务列表
     
161. function addGeneralTasks(container) {
     
162.     var categoryLabel = new Label();
     
163.     categoryLabel.setText("通用任务");
     
164.     categoryLabel.setTextColor(128, 0, 128); // 紫色文字
     
165.     categoryLabel.setFontSize(18);
     
166.     container.addView(categoryLabel);
     
167.    
     
168.     addTaskItem(container, "每日签到");
     
169.     addTaskItem(container, "邀请好友");
     
170.     addTaskItem(container, "分享内容");
     
171. }
     
172. 
     
173. // 添加日常任务列表
     
174. function addDailyTasks(container) {
     
175.     var categoryLabel = new Label();
     
176.     categoryLabel.setText("日常任务");
     
177.     categoryLabel.setTextColor(128, 0, 128); // 紫色文字
     
178.     categoryLabel.setFontSize(18);
     
179.     container.addView(categoryLabel);
     
180.    
     
181.     addTaskItem(container, "浏览资讯");
     
182.     addTaskItem(container, "观看视频");
     
183.     addTaskItem(container, "评论互动");
     
184. }
     
185. 
     
186. // 添加辅助任务列表
     
187. function addAuxiliaryTasks(container) {
     
188.     var categoryLabel = new Label();
     
189.     categoryLabel.setText("辅助功能");
     
190.     categoryLabel.setTextColor(128, 0, 128); // 紫色文字
     
191.     categoryLabel.setFontSize(18);
     
192.     container.addView(categoryLabel);
     
193.    
     
194.     addTaskItem(container, "设置");
     
195.     addTaskItem(container, "帮助");
     
196.     addTaskItem(container, "关于我们");
     
197. }
     
198. 
     
199. // 添加单个任务项
     
200. function addTaskItem(container, taskName) {
     
201.     var taskContainer = new Horizontal();
     
202.     taskContainer.setAlignment("center_vertical");
     
203.     taskContainer.setBackgroundColor(255, 255, 255); // 白色背景
     
204.    
     
205.     // 复选框
     
206.     var checkBox = new CheckBox();
     
207.     checkBox.setText(taskName);
     
208.     checkBox.setWidth(250); // 设置足够宽度以显示文字
     
209.    
     
210.     taskContainer.addView(checkBox);
     
211.     container.addView(taskContainer);
     
212. }
     
213. 
     
214. // UI优化说明：
     
215. // 1. 美化整体布局，添加内边距和合理间距
     
216. // 2. 优化按钮样式，添加圆角和阴影效果
     
217. // 3. 改进标题设计，使用更协调的颜色和更大的字号
     
218. // 4. 美化任务项，添加背景、圆角和阴影
     
219. // 5. 使用分隔线增强视觉层次
     
220. // 6. 优化颜色搭配，使界面更加和谐美观

复制代码

---

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

Powered by Discuz! X3.2