AIWROK苹果系统实例演示1标签类[Label]方法

QQ896757558

AIWROK苹果系统实例演示1标签类[Label]方法

1. // 🔨🍎UI-标签类[Label]方法完整示例
   
2. // UI-标签类[Label]方法小结，交流QQ群711841924
   
3. 
   
4. // 创建 TabView
   
5. var tab = new TabView();
   
6. 
   
7. // 设置标签页标题
   
8. tab.setTitles(["文本与颜色", "尺寸与对齐", "综合演示"]);
   
9. 
   
10. // 显示 TabView，并在加载完成后执行回调函数
    
11. tab.show(function() {
    
12.     printl("Label示例 TabView 显示完成");
    
13. 
    
14.     // ====================== 第一页：文本与颜色设置 ======================
    
15.     var textColorPage = new Vertical();
    
16.     textColorPage.setSpacing(15);
    
17.     textColorPage.setBackgroundColor(240, 240, 240);
    
18. 
    
19.     // 标题
    
20.     var title = new Label();
    
21.     title.setText("Label文本与颜色设置演示");
    
22.     title.setFontSize(18.0);
    
23.     title.setTextColor(0, 0, 0);
    
24.     textColorPage.addView(title);
    
25. 
    
26.     // 基本文本设置
    
27.     var basicText = new Label();
    
28.     basicText.setText("基本文本设置示例");
    
29.     textColorPage.addView(basicText);
    
30. 
    
31.     // 红色文本
    
32.     var redText = new Label();
    
33.     redText.setText("这是红色文本");
    
34.     redText.setTextColor(255, 0, 0); // 红色
    
35.     redText.setFontSize(16.0);
    
36.     textColorPage.addView(redText);
    
37. 
    
38.     // 绿色文本
    
39.     var greenText = new Label();
    
40.     greenText.setText("这是绿色文本");
    
41.     greenText.setTextColor(0, 255, 0); // 绿色
    
42.     greenText.setFontSize(14.0);
    
43.     textColorPage.addView(greenText);
    
44. 
    
45.     // 蓝色文本
    
46.     var blueText = new Label();
    
47.     blueText.setText("这是蓝色文本");
    
48.     blueText.setTextColor(0, 0, 255); // 蓝色
    
49.     blueText.setFontSize(12.0);
    
50.     textColorPage.addView(blueText);
    
51. 
    
52.     // 带背景色的文本
    
53.     var bgText = new Label();
    
54.     bgText.setText("带背景色的文本");
    
55.     bgText.setTextColor(255, 255, 255); // 白色文本
    
56.     bgText.setBackgroundColor(100, 100, 100); // 灰色背景
    
57.     textColorPage.addView(bgText);
    
58. 
    
59.     // ====================== 第二页：尺寸与对齐设置 ======================
    
60.     var sizeAlignPage = new Vertical();
    
61.     sizeAlignPage.setSpacing(20);
    
62.     sizeAlignPage.setBackgroundColor(245, 245, 220);
    
63. 
    
64.     // 标题
    
65.     var title2 = new Label();
    
66.     title2.setText("Label尺寸与对齐设置演示");
    
67.     title2.setFontSize(18.0);
    
68.     title2.setTextColor(0, 0, 0);
    
69.     sizeAlignPage.addView(title2);
    
70. 
    
71.     // 不同尺寸的文本
    
72.     var largeText = new Label();
    
73.     largeText.setText("大号字体 (20px)");
    
74.     largeText.setFontSize(20.0);
    
75.     largeText.setWidth(300);
    
76.     largeText.setHeight(40);
    
77.     sizeAlignPage.addView(largeText);
    
78. 
    
79.     var mediumText = new Label();
    
80.     mediumText.setText("中号字体 (16px)");
    
81.     mediumText.setFontSize(16.0);
    
82.     mediumText.setWidth(250);
    
83.     mediumText.setHeight(35);
    
84.     sizeAlignPage.addView(mediumText);
    
85. 
    
86.     var smallText = new Label();
    
87.     smallText.setText("小号字体 (12px)");
    
88.     smallText.setFontSize(12.0);
    
89.     smallText.setWidth(200);
    
90.     smallText.setHeight(30);
    
91.     sizeAlignPage.addView(smallText);
    
92. 
    
93.     // 不同对齐方式
    
94.     var leftAlign = new Label();
    
95.     leftAlign.setText("左对齐文本");
    
96.     leftAlign.setTextAlignment("left");
    
97.     leftAlign.setWidth(250);
    
98.     leftAlign.setHeight(30);
    
99.     leftAlign.setBackgroundColor(220, 220, 255);
    
100.     sizeAlignPage.addView(leftAlign);
     
101. 
     
102.     var centerAlign = new Label();
     
103.     centerAlign.setText("居中对齐文本");
     
104.     centerAlign.setTextAlignment("center");
     
105.     centerAlign.setWidth(250);
     
106.     centerAlign.setHeight(30);
     
107.     centerAlign.setBackgroundColor(220, 255, 220);
     
108.     sizeAlignPage.addView(centerAlign);
     
109. 
     
110.     var rightAlign = new Label();
     
111.     rightAlign.setText("右对齐文本");
     
112.     rightAlign.setTextAlignment("right");
     
113.     rightAlign.setWidth(250);
     
114.     rightAlign.setHeight(30);
     
115.     rightAlign.setBackgroundColor(255, 220, 220);
     
116.     sizeAlignPage.addView(rightAlign);
     
117. 
     
118.     // ====================== 第三页：综合演示 ======================
     
119.     var comprehensivePage = new Vertical();
     
120.     comprehensivePage.setSpacing(15);
     
121.     comprehensivePage.setBackgroundColor(255, 240, 240);
     
122. 
     
123.     // 标题
     
124.     var title3 = new Label();
     
125.     title3.setText("Label综合演示");
     
126.     title3.setFontSize(20.0);
     
127.     title3.setTextColor(0, 0, 150);
     
128.     title3.setTextAlignment("center");
     
129.     title3.setWidth(350);
     
130.     title3.setHeight(50);
     
131.     title3.setBackgroundColor(200, 230, 255);
     
132.     comprehensivePage.addView(title3);
     
133. 
     
134.     // 多种属性组合
     
135.     var combo1 = new Label();
     
136.     combo1.setText("大字体+红色+居中+背景色");
     
137.     combo1.setFontSize(18.0);
     
138.     combo1.setTextColor(200, 0, 0);
     
139.     combo1.setTextAlignment("center");
     
140.     combo1.setWidth(350);
     
141.     combo1.setHeight(45);
     
142.     combo1.setBackgroundColor(255, 230, 230);
     
143.     comprehensivePage.addView(combo1);
     
144. 
     
145.     var combo2 = new Label();
     
146.     combo2.setText("中字体+蓝色+右对齐+背景色");
     
147.     combo2.setFontSize(15.0);
     
148.     combo2.setTextColor(0, 0, 200);
     
149.     combo2.setTextAlignment("right");
     
150.     combo2.setWidth(350);
     
151.     combo2.setHeight(40);
     
152.     combo2.setBackgroundColor(230, 230, 255);
     
153.     comprehensivePage.addView(combo2);
     
154. 
     
155.     var combo3 = new Label();
     
156.     combo3.setText("小字体+绿色+左对齐+背景色");
     
157.     combo3.setFontSize(12.0);
     
158.     combo3.setTextColor(0, 150, 0);
     
159.     combo3.setTextAlignment("left");
     
160.     combo3.setWidth(350);
     
161.     combo3.setHeight(35);
     
162.     combo3.setBackgroundColor(230, 255, 230);
     
163.     comprehensivePage.addView(combo3);
     
164. 
     
165.     // 信息展示标签
     
166.     var infoLabel = new Label();
     
167.     infoLabel.setText("Label控件支持7种方法：\n1. setText - 设置文本\n2. setTextColor - 设置文本颜色\n3. setFontSize - 设置字体大小\n4. setBackgroundColor - 设置背景色\n5. setWidth - 设置宽度\n6. setHeight - 设置高度\n7. setTextAlignment - 设置文本对齐");
     
168.     infoLabel.setFontSize(12.0);
     
169.     infoLabel.setTextColor(50, 50, 50);
     
170.     infoLabel.setTextAlignment("left");
     
171.     infoLabel.setWidth(350);
     
172.     infoLabel.setHeight(150);
     
173.     infoLabel.setBackgroundColor(255, 255, 200);
     
174.     comprehensivePage.addView(infoLabel);
     
175. 
     
176.     // 公共返回按钮
     
177.     var btnBack = new Button();
     
178.     btnBack.setText("返回");
     
179.     btnBack.setColor(255, 0, 0);
     
180.     btnBack.setTextColor(255, 255, 255);
     
181.     btnBack.onClick(function() {
     
182.         printl("返回键被点击");
     
183.         tab.dismiss();
     
184.     });
     
185. 
     
186.     // 添加所有页面到TabView
     
187.     tab.addView(0, textColorPage);
     
188.     tab.addView(1, sizeAlignPage);
     
189.     tab.addView(2, comprehensivePage);
     
190.     tab.addView(3, btnBack);
     
191. 
     
192.     printl("Label示例视图添加完成");
     
193. });
     
194. 
     
195. printl("Label控件方法演示程序启动");

复制代码