 | |  |  | AIWROK软件苹果IOS系统Ul-空白站位[Space]方法小结
- //Ul-空白站位[Space]方法小结,交流QQ群711841924
- //第一个方法:📌setWidth设置宽度
- var space = new Space();
- space.setWidth(100.0f); // 设置空间宽度为100
- //第二个方法:📌setHeight设置高度
- var space = new Space();
- space.setHeight(50.0f); // 设置空间高度为50
- //第三个方法:📌setBackgroundColor 设置背景颜色
- var space = new Space();
- space.setBackgroundColor(255, 255, 255); // 设置空间背景颜色为白色
复制代码📌setHeight设置高度 类别 | 详情说明 | 方法功能 | 设置空间的高度 | 方法签名 | Void setHeight(Single height) | 返回值 | Void | 参数 | - Single height :要设置的空间高度(Single 为单精度浮点类型 ) | 案例 | var space = new Space(); space.setHeight(50.0f); // 设置空间高度为50 |
📌setWidth设置宽度 类别 | 详情说明 | 方法功能 | 设置空间的宽度 | 方法签名 | Void setWidth(Single width) | 返回值 | Void | 参数 | - Single width :要设置的空间宽度(Single 为单精度浮点类型 ) | 案例 | var space = new Space(); space.setWidth(100.0f); // 设置空间宽度为100 |
📌setBackgroundColor 设置背景颜色 类别 | 详情说明 | 方法功能 | 设置空间的背景颜色 | 方法签名 | Void setBackgroundColor(Single red, Single green, Single blue) | 返回值 | Void | 参数 | - Single red :红色分量(通常取值范围 0~255 的单精度浮点数)
- Single green :绿色分量(通常取值范围 0~255 的单精度浮点数)
- Single blue :蓝色分量(通常取值范围 0~255 的单精度浮点数) | 案例 | var space = new Space(); space.setBackgroundColor(255, 255, 255); // 设置空间背景颜色为白色 |
完整示例: - // 🔨🍎UI-空白站位[Space]方法完整示例
- // UI-空白站位[Space]方法小结,交流QQ群711841924
- printl("=== Space控件方法完整示例 ===");
- var vc = new IOSView();
- vc.show(() => {
- printl("Space示例界面已加载");
-
- // 获取当前视图
- var view = vc.getView();
-
- // 创建主容器
- var mainContainer = new Vertical();
- mainContainer.setSpacing(15);
- mainContainer.setBackgroundColor(245, 245, 245);
-
- // 标题区域
- var titleContainer = new Vertical();
- titleContainer.setAlignment("center");
- titleContainer.setSpacing(0); // 调整间距
- titleContainer.setBackgroundColor(0, 122, 255);
- var titleLabel = new Label();
- titleLabel.setText("🔨 Space控件演示");
- titleLabel.setFontSize(20.0);
- titleLabel.setTextColor(255, 255, 255);
- titleLabel.setTextAlignment("center");
- var subtitleLabel = new Label();
- subtitleLabel.setText("空白站位控件的使用方法");
- subtitleLabel.setFontSize(14.0);
- subtitleLabel.setTextColor(255, 255, 255);
- subtitleLabel.setTextAlignment("center");
- titleContainer.addView(titleLabel);
- titleContainer.addView(subtitleLabel);
- mainContainer.addView(titleContainer);
-
- // Space方法演示区域
- var demoContainer = new Vertical();
- demoContainer.setBackgroundColor(255, 255, 255);
- demoContainer.setSpacing(10);
-
- var demoTitle = new Label();
- demoTitle.setText("Space控件功能演示");
- demoTitle.setFontSize(16.0);
- demoTitle.setTextColor(0, 0, 0);
- demoTitle.setTextAlignment("center");
- demoContainer.addView(demoTitle);
-
- // 第一个方法:setWidth设置宽度演示
- var widthDemo = new Vertical();
- widthDemo.setSpacing(5);
-
- var widthLabel = new Label();
- widthLabel.setText("📌 setWidth设置宽度");
- widthLabel.setFontSize(14.0);
- widthLabel.setTextColor(0, 122, 255);
- widthDemo.addView(widthLabel);
-
- var widthDesc = new Label();
- widthDesc.setText("创建不同宽度的空白占位:");
- widthDesc.setFontSize(12.0);
- widthDesc.setTextColor(100, 100, 100);
- widthDemo.addView(widthDesc);
-
- // 水平容器展示不同宽度的Space
- var widthContainer = new Horizontal();
- widthContainer.setSpacing(5);
- widthContainer.setBackgroundColor(240, 240, 240);
-
- var label1 = new Label();
- label1.setText("W20");
- label1.setFontSize(10.0);
- label1.setBackgroundColor(0, 122, 255);
- label1.setTextColor(255, 255, 255);
-
- // 第一个方法:setWidth设置宽度
- var space1 = new Space();
- space1.setWidth(20.0); // 设置空间宽度为20
- space1.setBackgroundColor(200, 200, 200); // 设置背景色以便观察
-
- var label2 = new Label();
- label2.setText("W50");
- label2.setFontSize(10.0);
- label2.setBackgroundColor(52, 199, 89);
- label2.setTextColor(255, 255, 255);
-
- // 第一个方法:setWidth设置宽度
- var space2 = new Space();
- space2.setWidth(50.0); // 设置空间宽度为50
- space2.setBackgroundColor(200, 200, 200); // 设置背景色以便观察
-
- var label3 = new Label();
- label3.setText("W30");
- label3.setFontSize(10.0);
- label3.setBackgroundColor(255, 149, 0);
- label3.setTextColor(255, 255, 255);
-
- widthContainer.addView(label1);
- widthContainer.addView(space1);
- widthContainer.addView(label2);
- widthContainer.addView(space2);
- widthContainer.addView(label3);
- widthDemo.addView(widthContainer);
- demoContainer.addView(widthDemo);
-
- // 添加分割空间
- var separator1 = new Space();
- separator1.setHeight(10.0);
- demoContainer.addView(separator1);
-
- // 第二个方法:setHeight设置高度演示
- var heightDemo = new Vertical();
- heightDemo.setSpacing(5);
-
- var heightLabel = new Label();
- heightLabel.setText("📌 setHeight设置高度");
- heightLabel.setFontSize(14.0);
- heightLabel.setTextColor(0, 122, 255);
- heightDemo.addView(heightLabel);
-
- var heightDesc = new Label();
- heightDesc.setText("创建不同高度的空白占位:");
- heightDesc.setFontSize(12.0);
- heightDesc.setTextColor(100, 100, 100);
- heightDemo.addView(heightDesc);
-
- // 垂直容器展示不同高度的Space
- var heightContainer = new Vertical();
- heightContainer.setBackgroundColor(240, 240, 240);
-
- var hLabel1 = new Label();
- hLabel1.setText("H10");
- hLabel1.setFontSize(10.0);
- hLabel1.setBackgroundColor(0, 122, 255);
- hLabel1.setTextColor(255, 255, 255);
- hLabel1.setTextAlignment("center");
-
- // 第二个方法:setHeight设置高度
- var space3 = new Space();
- space3.setHeight(10.0); // 设置空间高度为10
- space3.setBackgroundColor(200, 200, 200); // 设置背景色以便观察
-
- var hLabel2 = new Label();
- hLabel2.setText("H25");
- hLabel2.setFontSize(10.0);
- hLabel2.setBackgroundColor(52, 199, 89);
- hLabel2.setTextColor(255, 255, 255);
- hLabel2.setTextAlignment("center");
-
- // 第二个方法:setHeight设置高度
- var space4 = new Space();
- space4.setHeight(25.0); // 设置空间高度为25
- space4.setBackgroundColor(200, 200, 200); // 设置背景色以便观察
-
- var hLabel3 = new Label();
- hLabel3.setText("H15");
- hLabel3.setFontSize(10.0);
- hLabel3.setBackgroundColor(255, 149, 0);
- hLabel3.setTextColor(255, 255, 255);
- hLabel3.setTextAlignment("center");
-
- heightContainer.addView(hLabel1);
- heightContainer.addView(space3);
- heightContainer.addView(hLabel2);
- heightContainer.addView(space4);
- heightContainer.addView(hLabel3);
- heightDemo.addView(heightContainer);
- demoContainer.addView(heightDemo);
-
- // 添加分割空间
- var separator2 = new Space();
- separator2.setHeight(10.0);
- demoContainer.addView(separator2);
-
- // 第三个方法:setBackgroundColor 设置背景颜色演示
- var colorDemo = new Vertical();
- colorDemo.setSpacing(5);
-
- var colorLabel = new Label();
- colorLabel.setText("📌 setBackgroundColor设置背景颜色");
- colorLabel.setFontSize(14.0);
- colorLabel.setTextColor(0, 122, 255);
- colorDemo.addView(colorLabel);
-
- var colorDesc = new Label();
- colorDesc.setText("创建不同背景颜色的空白占位:");
- colorDesc.setFontSize(12.0);
- colorDesc.setTextColor(100, 100, 100);
- colorDemo.addView(colorDesc);
-
- // 水平容器展示不同背景色的Space
- var colorContainer = new Horizontal();
- colorContainer.setSpacing(5);
-
- // 第三个方法:setBackgroundColor 设置背景颜色
- var space5 = new Space();
- space5.setWidth(40.0);
- space5.setHeight(40.0);
- space5.setBackgroundColor(255, 0, 0); // 红色
-
- // 第三个方法:setBackgroundColor 设置背景颜色
- var space6 = new Space();
- space6.setWidth(40.0);
- space6.setHeight(40.0);
- space6.setBackgroundColor(0, 255, 0); // 绿色
-
- // 第三个方法:setBackgroundColor 设置背景颜色
- var space7 = new Space();
- space7.setWidth(40.0);
- space7.setHeight(40.0);
- space7.setBackgroundColor(0, 0, 255); // 蓝色
-
- // 第三个方法:setBackgroundColor 设置背景颜色
- var space8 = new Space();
- space8.setWidth(40.0);
- space8.setHeight(40.0);
- space8.setBackgroundColor(255, 255, 0); // 黄色
-
- colorContainer.addView(space5);
- colorContainer.addView(space6);
- colorContainer.addView(space7);
- colorContainer.addView(space8);
- colorDemo.addView(colorContainer);
- demoContainer.addView(colorDemo);
-
- mainContainer.addView(demoContainer);
-
- // Space实际应用示例
- var applicationContainer = new Vertical();
- applicationContainer.setBackgroundColor(255, 255, 255);
- applicationContainer.setSpacing(10);
-
- var appTitle = new Label();
- appTitle.setText("Space实际应用示例");
- appTitle.setFontSize(16.0);
- appTitle.setTextColor(0, 0, 0);
- appTitle.setTextAlignment("center");
- applicationContainer.addView(appTitle);
-
- var appDesc = new Label();
- appDesc.setText("使用Space控件优化界面布局:");
- appDesc.setFontSize(12.0);
- appDesc.setTextColor(100, 100, 100);
- applicationContainer.addView(appDesc);
-
- // 表单布局示例
- var formContainer = new Vertical();
- formContainer.setSpacing(10);
-
- // 用户名行
- var usernameRow = new Horizontal();
- usernameRow.setSpacing(10);
-
- var usernameLabel = new Label();
- usernameLabel.setText("用户名:");
- usernameLabel.setWidth(60);
- usernameLabel.setTextColor(0, 0, 0);
-
- var usernameInput = new Label();
- usernameInput.setText("ZhangSan");
- usernameInput.setBackgroundColor(240, 240, 240);
-
- usernameRow.addView(usernameLabel);
- usernameRow.addView(usernameInput);
- formContainer.addView(usernameRow);
-
- // 添加垂直间距
- var formSpace = new Space();
- formSpace.setHeight(15.0);
- formContainer.addView(formSpace);
-
- // 密码行
- var passwordRow = new Horizontal();
- passwordRow.setSpacing(10);
-
- var passwordLabel = new Label();
- passwordLabel.setText("密码:");
- passwordLabel.setWidth(60);
- passwordLabel.setTextColor(0, 0, 0);
-
- var passwordInput = new Label();
- passwordInput.setText("********");
- passwordInput.setBackgroundColor(240, 240, 240);
-
- passwordRow.addView(passwordLabel);
- passwordRow.addView(passwordInput);
- formContainer.addView(passwordRow);
-
- applicationContainer.addView(formContainer);
-
- // 按钮区域
- var buttonContainer = new Horizontal();
- buttonContainer.setSpacing(10);
- buttonContainer.setAlignment("center");
-
- // 使用Space创建左右间距
- var leftSpace = new Space();
- leftSpace.setWidth(20.0);
-
- var loginBtn = new Button();
- loginBtn.setText("登录");
- loginBtn.setColor(0, 122, 255);
- loginBtn.setTextColor(255, 255, 255);
- loginBtn.setWidth(100);
- loginBtn.setHeight(40);
-
- var registerBtn = new Button();
- registerBtn.setText("注册");
- registerBtn.setColor(52, 199, 89);
- registerBtn.setTextColor(255, 255, 255);
- registerBtn.setWidth(100);
- registerBtn.setHeight(40);
-
- var rightSpace = new Space();
- rightSpace.setWidth(20.0);
-
- buttonContainer.addView(leftSpace);
- buttonContainer.addView(loginBtn);
- buttonContainer.addView(registerBtn);
- buttonContainer.addView(rightSpace);
-
- applicationContainer.addView(buttonContainer);
- mainContainer.addView(applicationContainer);
-
- // 控件信息区域
- var infoContainer = new Vertical();
- infoContainer.setBackgroundColor(236, 245, 255);
- infoContainer.setSpacing(8);
-
- var infoTitle = new Label();
- infoTitle.setText("ℹ️ Space控件说明");
- infoTitle.setFontSize(16.0);
- infoTitle.setTextColor(0, 122, 255);
- infoContainer.addView(infoTitle);
-
- var info1 = new Label();
- info1.setText("• Space控件用于创建空白占位区域");
- info1.setFontSize(12.0);
- info1.setTextColor(52, 58, 64);
- infoContainer.addView(info1);
-
- var info2 = new Label();
- info2.setText("• 可通过setWidth/setHeight设置尺寸");
- info2.setFontSize(12.0);
- info2.setTextColor(52, 58, 64);
- infoContainer.addView(info2);
-
- var info3 = new Label();
- info3.setText("• 可通过setBackgroundColor设置背景色");
- info3.setFontSize(12.0);
- info3.setTextColor(52, 58, 64);
- infoContainer.addView(info3);
-
- var info4 = new Label();
- info4.setText("• 常用于界面布局优化和元素间距控制");
- info4.setFontSize(12.0);
- info4.setTextColor(52, 58, 64);
- infoContainer.addView(info4);
-
- mainContainer.addView(infoContainer);
-
- // 底部按钮
- var bottomContainer = new Horizontal();
- bottomContainer.setSpacing(10);
- bottomContainer.setAlignment("center");
-
- var exitBtn = new Button();
- exitBtn.setText("退出示例");
- exitBtn.setColor(255, 59, 48);
- exitBtn.setTextColor(255, 255, 255);
- exitBtn.setHeight(40);
-
- exitBtn.onClick(() => {
- printl("退出按钮被点击");
- vc.dismiss();
- });
-
- bottomContainer.addView(exitBtn);
- mainContainer.addView(bottomContainer);
-
- // 添加到主视图
- view.addView(mainContainer);
-
- printl("Space示例界面构建完成");
- });
- printl("Space控件完整示例已启动");
复制代码
| |  | |  |
|