 | |  |  | AIWROK软件苹果脚本案例1空白站位[Space]方法
- // 🔨🍎UI-空白站位[Space]完整综合示例
- // 系统展示Space控件的所有功能和实际应用场景
- // 交流QQ群711841924
- printl("=== Space控件完整综合示例启动 ===");
- // 显示Toast提示
- function showToast(message) {
- if (typeof toast !== 'undefined') {
- // 检查toast是否为函数
- if (typeof toast === 'function') {
- toast(message);
- } else if (toast && typeof toast.show === 'function') {
- // 假设toast是一个对象,有show方法
- toast.show(message);
- } else {
- printl("[Toast] " + message);
- }
- } else {
- printl("[Toast] " + message);
- }
- }
- // 日志记录
- function logInteraction(message) {
- printl("[交互] " + message);
- }
- var vc = new IOSView();
- vc.show(function() {
- printl("Space综合示例界面已加载");
-
- // 获取当前视图
- var view = vc.getView();
-
- // 创建主容器
- var mainContainer = new Vertical();
- mainContainer.setSpacing(15);
- mainContainer.setBackgroundColor(245, 245, 245);
-
- // 标题区域
- var titleContainer = new Vertical();
- titleContainer.setAlignment("fill");
- titleContainer.setSpacing(5);
- titleContainer.setBackgroundColor(0, 122, 255);
-
- var titleLabel = new Label();
- titleLabel.setText("🔨 Space控件完整综合示例");
- titleLabel.setFontSize(18.0);
- titleLabel.setTextColor(255, 255, 255);
- titleLabel.setTextAlignment("center");
- titleLabel.setWidth(320); // 设置固定宽度以确保背景填充
-
- var subtitleLabel = new Label();
- subtitleLabel.setText("空白站位控件的全方位应用");
- subtitleLabel.setFontSize(12.0);
- subtitleLabel.setTextColor(255, 255, 255);
- subtitleLabel.setTextAlignment("center");
- subtitleLabel.setWidth(320); // 设置固定宽度以确保背景填充
-
- titleContainer.addView(titleLabel);
- titleContainer.addView(subtitleLabel);
- mainContainer.addView(titleContainer);
-
- // Space核心方法演示区域
- var coreDemoContainer = new Vertical();
- coreDemoContainer.setBackgroundColor(255, 255, 255);
- coreDemoContainer.setSpacing(15);
-
- var coreTitle = new Label();
- coreTitle.setText("🎯 Space核心方法演示");
- coreTitle.setFontSize(16.0);
- coreTitle.setTextColor(0, 0, 0);
- coreTitle.setTextAlignment("center");
- coreDemoContainer.addView(coreTitle);
-
- // 方法1:setWidth设置宽度
- var widthDemo = new Vertical();
- widthDemo.setSpacing(8);
-
- 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);
-
- var widthContainer = new Horizontal();
- widthContainer.setSpacing(5);
- widthContainer.setBackgroundColor(240, 240, 240);
-
- var wLabel1 = new Label();
- wLabel1.setText("左");
- wLabel1.setFontSize(12.0);
- wLabel1.setBackgroundColor(0, 122, 255);
- wLabel1.setTextColor(255, 255, 255);
-
- var space1 = new Space();
- space1.setWidth(30.0);
- space1.setBackgroundColor(200, 200, 200);
-
- var wLabel2 = new Label();
- wLabel2.setText("中");
- wLabel2.setFontSize(12.0);
- wLabel2.setBackgroundColor(52, 199, 89);
- wLabel2.setTextColor(255, 255, 255);
-
- var space2 = new Space();
- space2.setWidth(60.0);
- space2.setBackgroundColor(200, 200, 200);
-
- var wLabel3 = new Label();
- wLabel3.setText("右");
- wLabel3.setFontSize(12.0);
- wLabel3.setBackgroundColor(255, 149, 0);
- wLabel3.setTextColor(255, 255, 255);
-
- widthContainer.addView(wLabel1);
- widthContainer.addView(space1);
- widthContainer.addView(wLabel2);
- widthContainer.addView(space2);
- widthContainer.addView(wLabel3);
- widthDemo.addView(widthContainer);
- coreDemoContainer.addView(widthDemo);
-
- // 分割线
- var separator1 = new Space();
- separator1.setHeight(10.0);
- coreDemoContainer.addView(separator1);
-
- // 方法2:setHeight设置高度
- var heightDemo = new Vertical();
- heightDemo.setSpacing(8);
-
- 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);
-
- var heightContainer = new Vertical();
- heightContainer.setBackgroundColor(240, 240, 240);
-
- var hLabel1 = new Label();
- hLabel1.setText("上");
- hLabel1.setFontSize(12.0);
- hLabel1.setBackgroundColor(0, 122, 255);
- hLabel1.setTextColor(255, 255, 255);
- hLabel1.setTextAlignment("center");
-
- var space3 = new Space();
- space3.setHeight(20.0);
- space3.setBackgroundColor(200, 200, 200);
-
- var hLabel2 = new Label();
- hLabel2.setText("中");
- hLabel2.setFontSize(12.0);
- hLabel2.setBackgroundColor(52, 199, 89);
- hLabel2.setTextColor(255, 255, 255);
- hLabel2.setTextAlignment("center");
-
- var space4 = new Space();
- space4.setHeight(40.0);
- space4.setBackgroundColor(200, 200, 200);
-
- var hLabel3 = new Label();
- hLabel3.setText("下");
- hLabel3.setFontSize(12.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);
- coreDemoContainer.addView(heightDemo);
-
- // 分割线
- var separator2 = new Space();
- separator2.setHeight(10.0);
- coreDemoContainer.addView(separator2);
-
- // 方法3:setBackgroundColor设置背景颜色
- var colorDemo = new Vertical();
- colorDemo.setSpacing(8);
-
- 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);
-
- var colorContainer = new Horizontal();
- colorContainer.setSpacing(10);
-
- var space5 = new Space();
- space5.setWidth(50.0);
- space5.setHeight(50.0);
- space5.setBackgroundColor(255, 0, 0);
-
- var space6 = new Space();
- space6.setWidth(50.0);
- space6.setHeight(50.0);
- space6.setBackgroundColor(0, 255, 0);
-
- var space7 = new Space();
- space7.setWidth(50.0);
- space7.setHeight(50.0);
- space7.setBackgroundColor(0, 0, 255);
-
- var space8 = new Space();
- space8.setWidth(50.0);
- space8.setHeight(50.0);
- space8.setBackgroundColor(255, 255, 0);
-
- colorContainer.addView(space5);
- colorContainer.addView(space6);
- colorContainer.addView(space7);
- colorContainer.addView(space8);
- colorDemo.addView(colorContainer);
- coreDemoContainer.addView(colorDemo);
-
- mainContainer.addView(coreDemoContainer);
-
- // 实际应用场景
- var applicationContainer = new Vertical();
- applicationContainer.setBackgroundColor(255, 255, 255);
- applicationContainer.setSpacing(15);
-
- var appTitle = new Label();
- appTitle.setText("💼 Space实际应用场景");
- appTitle.setFontSize(16.0);
- appTitle.setTextColor(0, 0, 0);
- appTitle.setTextAlignment("center");
- applicationContainer.addView(appTitle);
-
- // 场景1:表单布局
- var formContainer = new Vertical();
- formContainer.setSpacing(10);
-
- var formTitle = new Label();
- formTitle.setText("📋 表单布局示例");
- formTitle.setFontSize(14.0);
- formTitle.setTextColor(0, 122, 255);
- formContainer.addView(formTitle);
-
- // 姓名输入行
- var nameRow = new Horizontal();
- nameRow.setSpacing(10);
-
- var nameLabel = new Label();
- nameLabel.setText("姓名:");
- nameLabel.setWidth(60);
- nameLabel.setTextColor(0, 0, 0);
-
- var nameInput = new Label();
- nameInput.setText("请输入姓名");
- nameInput.setBackgroundColor(240, 240, 240);
-
- nameRow.addView(nameLabel);
- nameRow.addView(nameInput);
- formContainer.addView(nameRow);
-
- // 垂直间距
- var formSpace1 = new Space();
- formSpace1.setHeight(10.0);
- formContainer.addView(formSpace1);
-
- // 年龄输入行
- var ageRow = new Horizontal();
- ageRow.setSpacing(10);
-
- var ageLabel = new Label();
- ageLabel.setText("年龄:");
- ageLabel.setWidth(60);
- ageLabel.setTextColor(0, 0, 0);
-
- var ageInput = new Label();
- ageInput.setText("请输入年龄");
- ageInput.setBackgroundColor(240, 240, 240);
-
- ageRow.addView(ageLabel);
- ageRow.addView(ageInput);
- formContainer.addView(ageRow);
-
- // 垂直间距
- var formSpace2 = new Space();
- formSpace2.setHeight(10.0);
- formContainer.addView(formSpace2);
-
- // 邮箱输入行
- var emailRow = new Horizontal();
- emailRow.setSpacing(10);
-
- var emailLabel = new Label();
- emailLabel.setText("邮箱:");
- emailLabel.setWidth(60);
- emailLabel.setTextColor(0, 0, 0);
-
- var emailInput = new Label();
- emailInput.setText("请输入邮箱");
- emailInput.setBackgroundColor(240, 240, 240);
-
- emailRow.addView(emailLabel);
- emailRow.addView(emailInput);
- formContainer.addView(emailRow);
-
- applicationContainer.addView(formContainer);
-
- // 场景2:卡片布局
- var cardContainer = new Vertical();
- cardContainer.setSpacing(10);
-
- var cardTitle = new Label();
- cardTitle.setText("📄 卡片布局示例");
- cardTitle.setFontSize(14.0);
- cardTitle.setTextColor(0, 122, 255);
- cardContainer.addView(cardTitle);
-
- var card = new Vertical();
- card.setBackgroundColor(255, 255, 255);
- card.setSpacing(10);
-
- var cardHeader = new Horizontal();
- cardHeader.setSpacing(10);
-
- var cardIcon = new Label();
- cardIcon.setText("📱");
- cardIcon.setFontSize(24.0);
-
- var cardInfo = new Vertical();
- cardInfo.setSpacing(2);
-
- var cardName = new Label();
- cardName.setText("产品名称");
- cardName.setFontSize(16.0);
- cardName.setTextColor(0, 0, 0);
-
- var cardDesc = new Label();
- cardDesc.setText("这是一个产品描述");
- cardDesc.setFontSize(12.0);
- cardDesc.setTextColor(100, 100, 100);
-
- cardInfo.addView(cardName);
- cardInfo.addView(cardDesc);
- cardHeader.addView(cardIcon);
- cardHeader.addView(cardInfo);
- card.addView(cardHeader);
-
- // 卡片内容
- var cardContent = new Label();
- cardContent.setText("卡片内容区域,展示详细信息...");
- cardContent.setFontSize(14.0);
- cardContent.setTextColor(50, 50, 50);
- card.addView(cardContent);
-
- // 卡片底部
- var cardFooter = new Horizontal();
- cardFooter.setSpacing(10);
-
- var priceLabel = new Label();
- priceLabel.setText("¥99.00");
- priceLabel.setFontSize(16.0);
- priceLabel.setTextColor(255, 59, 48);
-
- var buyButton = new Button();
- buyButton.setText("购买");
- buyButton.setColor(0, 122, 255);
- buyButton.setTextColor(255, 255, 255);
- buyButton.setWidth(80);
- buyButton.setHeight(30);
-
- // 使用Space创建间距
- var footerSpace = new Space();
-
- cardFooter.addView(priceLabel);
- cardFooter.addView(footerSpace);
- cardFooter.addView(buyButton);
- card.addView(cardFooter);
-
- cardContainer.addView(card);
- applicationContainer.addView(cardContainer);
-
- // 场景3:导航栏布局
- var navContainer = new Vertical();
- navContainer.setSpacing(10);
-
- var navTitle = new Label();
- navTitle.setText("🧭 导航栏布局示例");
- navTitle.setFontSize(14.0);
- navTitle.setTextColor(0, 122, 255);
- navContainer.addView(navTitle);
-
- var navBar = new Horizontal();
- navBar.setSpacing(10);
- navBar.setBackgroundColor(240, 240, 240);
-
- var backButton = new Button();
- backButton.setText("返回");
- backButton.setColor(0, 122, 255);
- backButton.setTextColor(255, 255, 255);
- backButton.setWidth(80);
- backButton.setHeight(30);
-
- var navSpace = new Space();
-
- var titleButton = new Button();
- titleButton.setText("首页");
- titleButton.setColor(52, 199, 89);
- titleButton.setTextColor(255, 255, 255);
- titleButton.setWidth(80);
- titleButton.setHeight(30);
-
- var menuButton = new Button();
- menuButton.setText("菜单");
- menuButton.setColor(255, 149, 0);
- menuButton.setTextColor(255, 255, 255);
- menuButton.setWidth(80);
- menuButton.setHeight(30);
-
- navBar.addView(backButton);
- navBar.addView(navSpace);
- navBar.addView(titleButton);
- navBar.addView(menuButton);
- navContainer.addView(navBar);
- applicationContainer.addView(navContainer);
-
- mainContainer.addView(applicationContainer);
-
- // 交互功能演示
- var interactionContainer = new Vertical();
- interactionContainer.setBackgroundColor(236, 245, 255);
- interactionContainer.setSpacing(15);
-
- var interactionTitle = new Label();
- interactionTitle.setText("🔄 交互功能演示");
- interactionTitle.setFontSize(16.0);
- interactionTitle.setTextColor(0, 122, 255);
- interactionContainer.addView(interactionTitle);
-
- var interactionDesc = new Label();
- interactionDesc.setText("点击下方按钮体验Space控件的动态效果");
- interactionDesc.setFontSize(12.0);
- interactionDesc.setTextColor(100, 100, 100);
- interactionContainer.addView(interactionDesc);
-
- var dynamicContainer = new Vertical();
- dynamicContainer.setSpacing(10);
-
- var dynamicSpace = new Space();
- dynamicSpace.setHeight(50.0);
- dynamicSpace.setBackgroundColor(200, 200, 200);
- dynamicContainer.addView(dynamicSpace);
-
- var controlButtons = new Horizontal();
- controlButtons.setSpacing(10);
- controlButtons.setAlignment("center");
-
- var increaseButton = new Button();
- increaseButton.setText("增加高度");
- increaseButton.setColor(0, 122, 255);
- increaseButton.setTextColor(255, 255, 255);
- increaseButton.setWidth(100);
- increaseButton.setHeight(35);
-
- var decreaseButton = new Button();
- decreaseButton.setText("减少高度");
- decreaseButton.setColor(255, 59, 48);
- decreaseButton.setTextColor(255, 255, 255);
- decreaseButton.setWidth(100);
- decreaseButton.setHeight(35);
-
- var changeColorButton = new Button();
- changeColorButton.setText("改变颜色");
- changeColorButton.setColor(52, 199, 89);
- changeColorButton.setTextColor(255, 255, 255);
- changeColorButton.setWidth(100);
- changeColorButton.setHeight(35);
-
- controlButtons.addView(increaseButton);
- controlButtons.addView(decreaseButton);
- controlButtons.addView(changeColorButton);
- dynamicContainer.addView(controlButtons);
- interactionContainer.addView(dynamicContainer);
- mainContainer.addView(interactionContainer);
-
- // 控件信息区域
- var infoContainer = new Vertical();
- infoContainer.setBackgroundColor(255, 255, 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()、setBackgroundColor()");
- info2.setFontSize(12.0);
- info2.setTextColor(52, 58, 64);
- infoContainer.addView(info2);
-
- var info3 = new Label();
- info3.setText("• 应用场景:布局间距、视觉分隔、响应式布局");
- 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 saveButton = new Button();
- saveButton.setText("保存示例");
- saveButton.setColor(52, 199, 89);
- saveButton.setTextColor(255, 255, 255);
- saveButton.setHeight(40);
-
- var resetButton = new Button();
- resetButton.setText("重置示例");
- resetButton.setColor(255, 149, 0);
- resetButton.setTextColor(255, 255, 255);
- resetButton.setHeight(40);
-
- var exitButton = new Button();
- exitButton.setText("退出示例");
- exitButton.setColor(255, 59, 48);
- exitButton.setTextColor(255, 255, 255);
- exitButton.setHeight(40);
-
- bottomContainer.addView(saveButton);
- bottomContainer.addView(resetButton);
- bottomContainer.addView(exitButton);
- mainContainer.addView(bottomContainer);
-
- // 添加到主视图
- view.addView(mainContainer);
-
- printl("Space综合示例界面构建完成");
-
- // 绑定事件处理
- // 表单输入点击事件 - 注释掉Label的onClick事件,因为Label可能不支持此方法
- /*
- nameInput.onClick(function() {
- nameInput.setText("张三");
- nameInput.setBackgroundColor(200, 230, 255);
- showToast("姓名已自动填充");
- logInteraction("点击了姓名输入框,自动填充为'张三'");
- });
-
- ageInput.onClick(function() {
- ageInput.setText("25");
- ageInput.setBackgroundColor(200, 230, 255);
- showToast("年龄已自动填充");
- logInteraction("点击了年龄输入框,自动填充为'25'");
- });
-
- emailInput.onClick(function() {
- emailInput.setText("zhangsan@example.com");
- emailInput.setBackgroundColor(200, 230, 255);
- showToast("邮箱已自动填充");
- logInteraction("点击了邮箱输入框,自动填充为'zhangsan@example.com'");
- });
- */
-
- // 卡片购买按钮点击事件
- buyButton.onClick(function() {
- showToast("购买成功!");
- logInteraction("点击了购买按钮");
- });
-
- // 导航栏按钮点击事件
- backButton.onClick(function() {
- showToast("返回上一页");
- logInteraction("点击了返回按钮");
- });
-
- titleButton.onClick(function() {
- showToast("跳转到首页");
- logInteraction("点击了首页按钮");
- });
-
- menuButton.onClick(function() {
- showToast("打开菜单");
- logInteraction("点击了菜单按钮");
- });
-
- // 动态效果按钮点击事件
- var currentHeight = 50;
- increaseButton.onClick(function() {
- currentHeight += 20;
- dynamicSpace.setHeight(currentHeight);
- showToast("Space高度增加到:" + currentHeight + "px");
- logInteraction("点击了增加高度按钮,当前高度:" + currentHeight + "px");
- });
-
- decreaseButton.onClick(function() {
- if (currentHeight > 20) {
- currentHeight -= 20;
- dynamicSpace.setHeight(currentHeight);
- showToast("Space高度减少到:" + currentHeight + "px");
- logInteraction("点击了减少高度按钮,当前高度:" + currentHeight + "px");
- } else {
- showToast("高度已达到最小值");
- logInteraction("点击了减少高度按钮,已达到最小值");
- }
- });
-
- var colors = [[255, 0, 0], [0, 255, 0], [0, 0, 255], [255, 255, 0], [255, 0, 255], [0, 255, 255]];
- var colorIndex = 0;
- changeColorButton.onClick(function() {
- colorIndex = (colorIndex + 1) % colors.length;
- var color = colors[colorIndex];
- dynamicSpace.setBackgroundColor(color[0], color[1], color[2]);
- showToast("Space颜色已改变");
- logInteraction("点击了改变颜色按钮,当前颜色:RGB(" + color[0] + "," + color[1] + "," + color[2] + ")");
- });
-
- // 底部按钮点击事件
- saveButton.onClick(function() {
- showToast("示例已保存");
- logInteraction("点击了保存示例按钮");
- });
-
- resetButton.onClick(function() {
- // 重置表单
- nameInput.setText("请输入姓名");
- nameInput.setBackgroundColor(240, 240, 240);
- ageInput.setText("请输入年龄");
- ageInput.setBackgroundColor(240, 240, 240);
- emailInput.setText("请输入邮箱");
- emailInput.setBackgroundColor(240, 240, 240);
-
- // 重置动态Space
- currentHeight = 50;
- dynamicSpace.setHeight(currentHeight);
- dynamicSpace.setBackgroundColor(200, 200, 200);
- colorIndex = 0;
-
- showToast("示例已重置");
- logInteraction("点击了重置示例按钮");
- });
-
- exitButton.onClick(function() {
- showToast("退出示例");
- logInteraction("点击了退出示例按钮");
- vc.dismiss();
- });
- });
- printl("Space控件完整综合示例已启动");
复制代码
| |  | |  |
|