YYPOST群发软件 发表于 昨天 09:16

苹果脚本Line控件的多种创意用法和实际应用场景

苹果脚本Line控件的多种创意用法和实际应用场景


// Line控件创意应用示例
// 展示Line控件的多种创意用法和实际应用场景
//🍎 交流 QQ 群 711841924 群一，苹果内测群 528816639

printl("=== Line控件创意应用示例 ===");

// 创建视图容器
var vc = new IOSView();
vc.show(() => {
    printl("Line创意应用界面已加载");
   
    // 获取当前视图
    var view = vc.getView();
   
    // 创建主容器
    var mainContainer = new Vertical();
    mainContainer.setSpacing(20);
    mainContainer.setBackgroundColor(248, 249, 250);
   
    // 标题区域
    var titleContainer = new Vertical();
    titleContainer.setAlignment("center");
    titleContainer.setSpacing(10);
    titleContainer.setBackgroundColor(76, 175, 80);
   
    var titleLabel = new Label();
    titleLabel.setText("Line控件创意应用");
    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);
   
    // 创意线条展示区域
    var creativeContainer = new Vertical();
    creativeContainer.setBackgroundColor(255, 255, 255);
    creativeContainer.setSpacing(20);
   
    var creativeTitle = new Label();
    creativeTitle.setText("✨ 创意线条设计");
    creativeTitle.setFontSize(18.0);
    creativeTitle.setTextColor(33, 33, 33);
    creativeTitle.setTextAlignment("center");
    creativeContainer.addView(creativeTitle);
   
    // 渐变线条效果
    var gradientDemo = new Vertical();
    gradientDemo.setSpacing(10);
   
    var gradientLabel = new Label();
    gradientLabel.setText("🌈 渐变效果模拟");
    gradientLabel.setFontSize(16.0);
    gradientLabel.setTextColor(76, 175, 80);
    gradientDemo.addView(gradientLabel);
   
    var gradientContainer = new Horizontal();
    gradientContainer.setSpacing(2);
   
    // 创建渐变效果的线条组合
    for (var i = 0; i < 20; i++) {
      var line = new Line();
      line.setWidth(15);
      line.setHeight(3);
      // 计算渐变颜色
      var r = Math.floor(255 * (i / 20));
      var g = Math.floor(0 + (255 * (1 - i / 20)));
      var b = Math.floor(128 + (127 * Math.sin(i / 20 * Math.PI)));
      line.setColor(r, g, b);
      gradientContainer.addView(line);
    }
   
    gradientDemo.addView(gradientContainer);
    creativeContainer.addView(gradientDemo);
   
    // 波浪效果
    var waveDemo = new Vertical();
    waveDemo.setSpacing(10);
   
    var waveLabel = new Label();
    waveLabel.setText("&#127754; 波浪效果模拟");
    waveLabel.setFontSize(16.0);
    waveLabel.setTextColor(76, 175, 80);
    waveDemo.addView(waveLabel);
   
    var waveContainer = new Vertical();
    waveContainer.setSpacing(3);
   
    // 创建波浪效果的线条
    for (var i = 0; i < 10; i++) {
      var line = new Line();
      line.setWidth(200 + i * 10);
      line.setHeight(2);
      line.setColor(33, 150, 243);
      waveContainer.addView(line);
    }
   
    waveDemo.addView(waveContainer);
    creativeContainer.addView(waveDemo);
   
    // 放射状效果
    var radialDemo = new Vertical();
    radialDemo.setSpacing(10);
   
    var radialLabel = new Label();
    radialLabel.setText("⭐ 放射状效果");
    radialLabel.setFontSize(16.0);
    radialLabel.setTextColor(76, 175, 80);
    radialDemo.addView(radialLabel);
   
    var radialContainer = new Vertical();
    radialContainer.setSpacing(2);
   
    // 创建放射状效果的线条
    for (var i = 0; i < 15; i++) {
      var line = new Line();
      line.setWidth(50 + i * 10);
      line.setHeight(1);
      line.setColor(255, 152, 0);
      radialContainer.addView(line);
    }
   
    radialDemo.addView(radialContainer);
    creativeContainer.addView(radialDemo);
   
    mainContainer.addView(creativeContainer);
   
    // 实际应用场景
    var applicationContainer = new Vertical();
    applicationContainer.setBackgroundColor(255, 255, 255);
    applicationContainer.setSpacing(15);
   
    var appTitle = new Label();
    appTitle.setText("&#128188; 实际应用场景");
    appTitle.setFontSize(18.0);
    appTitle.setTextColor(33, 33, 33);
    appTitle.setTextAlignment("center");
    applicationContainer.addView(appTitle);
   
    // 音乐播放器界面
    var musicPlayer = new Vertical();
    musicPlayer.setSpacing(15);
    musicPlayer.setBackgroundColor(245, 245, 245);
   
    var musicTitle = new Label();
    musicTitle.setText("&#127925; 音乐播放器界面");
    musicTitle.setFontSize(16.0);
    musicTitle.setTextColor(33, 33, 33);
    musicPlayer.addView(musicTitle);
   
    // 专辑封面区域
    var albumContainer = new Vertical();
    albumContainer.setAlignment("center");
    albumContainer.setSpacing(10);
   
    var albumArt = new Label();
    albumArt.setText("&#127928;");
    albumArt.setFontSize(48.0);
    albumArt.setTextAlignment("center");
    albumContainer.addView(albumArt);
   
    var songTitle = new Label();
    songTitle.setText("创意音乐");
    songTitle.setFontSize(16.0);
    songTitle.setTextColor(33, 33, 33);
    songTitle.setTextAlignment("center");
    albumContainer.addView(songTitle);
   
    var artistName = new Label();
    artistName.setText("Line Band");
    artistName.setFontSize(14.0);
    artistName.setTextColor(100, 100, 100);
    artistName.setTextAlignment("center");
    albumContainer.addView(artistName);
   
    // 进度条
    var progressContainer = new Vertical();
    progressContainer.setSpacing(5);
   
    var progressBar = new Line();
    progressBar.setWidth(250);
    progressBar.setHeight(4);
    progressBar.setColor(76, 175, 80);
    progressContainer.addView(progressBar);
   
    var timeLabels = new Horizontal();
    timeLabels.setSpacing(180);
   
    var currentTime = new Label();
    currentTime.setText("1:23");
    currentTime.setFontSize(12.0);
    currentTime.setTextColor(100, 100, 100);
    timeLabels.addView(currentTime);
   
    var totalTime = new Label();
    totalTime.setText("3:45");
    totalTime.setFontSize(12.0);
    totalTime.setTextColor(100, 100, 100);
    timeLabels.addView(totalTime);
   
    progressContainer.addView(timeLabels);
    albumContainer.addView(progressContainer);
   
    // 控制按钮
    var controls = new Horizontal();
    controls.setSpacing(30);
    controls.setAlignment("center");
   
    var prevBtn = new Button();
    prevBtn.setText("⏮");
    prevBtn.setColor(255, 255, 255);
    prevBtn.setTextColor(33, 33, 33);
    prevBtn.setWidth(50);
    prevBtn.setHeight(50);
    controls.addView(prevBtn);
   
    var playBtn = new Button();
    playBtn.setText("▶️");
    playBtn.setColor(76, 175, 80);
    playBtn.setTextColor(255, 255, 255);
    playBtn.setWidth(60);
    playBtn.setHeight(60);
    controls.addView(playBtn);
   
    var nextBtn = new Button();
    nextBtn.setText("⏭");
    nextBtn.setColor(255, 255, 255);
    nextBtn.setTextColor(33, 33, 33);
    nextBtn.setWidth(50);
    nextBtn.setHeight(50);
    controls.addView(nextBtn);
   
    albumContainer.addView(controls);
    musicPlayer.addView(albumContainer);
    applicationContainer.addView(musicPlayer);
   
    // 任务进度板
    var taskBoard = new Vertical();
    taskBoard.setSpacing(15);
    taskBoard.setBackgroundColor(245, 245, 245);
   
    var taskTitle = new Label();
    taskTitle.setText("&#128203; 任务进度板");
    taskTitle.setFontSize(16.0);
    taskTitle.setTextColor(33, 33, 33);
    taskBoard.addView(taskTitle);
   
    // 任务项
    var tasks = [
      { name: "完成Line控件示例", progress: 100, color: },
      { name: "编写文档", progress: 75, color: },
      { name: "测试功能", progress: 50, color: },
      { name: "优化性能", progress: 25, color: }
    ];
   
    for (var i = 0; i < tasks.length; i++) {
      var taskItem = new Vertical();
      taskItem.setSpacing(5);
      
      var taskInfo = new Horizontal();
      taskInfo.setSpacing(10);
      
      var taskName = new Label();
      taskName.setText(tasks.name);
      taskName.setFontSize(14.0);
      taskName.setTextColor(33, 33, 33);
      taskName.setWidth(150);
      taskInfo.addView(taskName);
      
      var taskProgress = new Label();
      taskProgress.setText(tasks.progress + "%");
      taskProgress.setFontSize(14.0);
      taskProgress.setTextColor(100, 100, 100);
      taskInfo.addView(taskProgress);
      
      taskItem.addView(taskInfo);
      
      // 进度条
      var progressBg = new Line();
      progressBg.setWidth(250);
      progressBg.setHeight(8);
      progressBg.setColor(200, 200, 200);
      taskItem.addView(progressBg);
      
      var progressFill = new Line();
      progressFill.setWidth(250 * tasks.progress / 100);
      progressFill.setHeight(8);
      progressFill.setColor(tasks.color, tasks.color, tasks.color);
      taskItem.addView(progressFill);
      
      taskBoard.addView(taskItem);
    }
   
    applicationContainer.addView(taskBoard);
    mainContainer.addView(applicationContainer);
   
    // 数据可视化
    var dataContainer = new Vertical();
    dataContainer.setBackgroundColor(255, 255, 255);
    dataContainer.setSpacing(15);
   
    var dataTitle = new Label();
    dataTitle.setText("&#128202; 数据可视化");
    dataTitle.setFontSize(18.0);
    dataTitle.setTextColor(33, 33, 33);
    dataTitle.setTextAlignment("center");
    dataContainer.addView(dataTitle);
   
    // 水平条形图
    var barChart = new Vertical();
    barChart.setSpacing(10);
   
    var chartLabel = new Label();
    chartLabel.setText("&#128200; 月度数据统计");
    chartLabel.setFontSize(16.0);
    chartLabel.setTextColor(76, 175, 80);
    barChart.addView(chartLabel);
   
    // 模拟数据
    var chartData = ;
    var months = ["1月", "2月", "3月", "4月", "5月", "6月"];
   
    for (var i = 0; i < chartData.length; i++) {
      var barItem = new Horizontal();
      barItem.setSpacing(10);
      barItem.setAlignment("center");
      
      var monthLabel = new Label();
      monthLabel.setText(months);
      monthLabel.setFontSize(12.0);
      monthLabel.setTextColor(100, 100, 100);
      monthLabel.setWidth(40);
      barItem.addView(monthLabel);
      
      // 创建条形图背景
      var barBg = new Line();
      barBg.setWidth(200);
      barBg.setHeight(20);
      barBg.setColor(200, 200, 200);
      barItem.addView(barBg);
      
      // 创建条形图数据
      var bar = new Line();
      bar.setWidth(chartData * 2);
      bar.setHeight(20);
      bar.setColor(33, 150, 243);
      barItem.addView(bar);
      
      var valueLabel = new Label();
      valueLabel.setText(chartData);
      valueLabel.setFontSize(12.0);
      valueLabel.setTextColor(100, 100, 100);
      valueLabel.setWidth(40);
      barItem.addView(valueLabel);
      
      barChart.addView(barItem);
    }
   
    dataContainer.addView(barChart);
    mainContainer.addView(dataContainer);
   
    // 控件信息区域
    var infoContainer = new Vertical();
    infoContainer.setBackgroundColor(236, 245, 255);
    infoContainer.setSpacing(8);
   
    var infoTitle = new Label();
    infoTitle.setText("ℹ️ Line控件创意应用说明");
    infoTitle.setFontSize(16.0);
    infoTitle.setTextColor(33, 150, 243);
    infoContainer.addView(infoTitle);
   
    var info1 = new Label();
    info1.setText("• 创意线条设计：通过组合多条Line控件创建渐变、波浪等效果");
    info1.setFontSize(12.0);
    info1.setTextColor(52, 58, 64);
    infoContainer.addView(info1);
   
    var info2 = new Label();
    info2.setText("• 音乐播放器：使用Line控件作为进度条");
    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(20);
    bottomContainer.setAlignment("center");
   
    var refreshBtn = new Button();
    refreshBtn.setText("刷新示例");
    refreshBtn.setColor(33, 150, 243);
    refreshBtn.setTextColor(255, 255, 255);
    refreshBtn.setHeight(40);
    refreshBtn.setWidth(120);
   
    refreshBtn.onClick(() => {
      printl("刷新示例");
      // 简单的刷新效果
      var randomColor = () => Math.floor(Math.random() * 255);
      titleContainer.setBackgroundColor(randomColor(), randomColor(), randomColor());
    });
   
    var exitBtn = new Button();
    exitBtn.setText("退出示例");
    exitBtn.setColor(244, 67, 54);
    exitBtn.setTextColor(255, 255, 255);
    exitBtn.setHeight(40);
    exitBtn.setWidth(120);
   
    exitBtn.onClick(() => {
      printl("退出按钮被点击");
      vc.dismiss();
    });
   
    bottomContainer.addView(refreshBtn);
    bottomContainer.addView(exitBtn);
    mainContainer.addView(bottomContainer);
   
    // 添加到主视图
    view.addView(mainContainer);
   
    printl("Line创意应用界面构建完成");
});

printl("Line控件创意应用示例已启动");



页: [1]
查看完整版本: 苹果脚本Line控件的多种创意用法和实际应用场景