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

// 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("🌊 波浪效果模拟");
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("💼 实际应用场景");
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("🎵 音乐播放器界面");
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("🎸");
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("📋 任务进度板");
taskTitle.setFontSize(16.0);
taskTitle.setTextColor(33, 33, 33);
taskBoard.addView(taskTitle);
// 任务项
var tasks = [
{ name: "完成Line控件示例", progress: 100, color: [76, 175, 80] },
{ name: "编写文档", progress: 75, color: [33, 150, 243] },
{ name: "测试功能", progress: 50, color: [255, 152, 0] },
{ name: "优化性能", progress: 25, color: [244, 67, 54] }
];
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[i].name);
taskName.setFontSize(14.0);
taskName.setTextColor(33, 33, 33);
taskName.setWidth(150);
taskInfo.addView(taskName);
var taskProgress = new Label();
taskProgress.setText(tasks[i].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[i].progress / 100);
progressFill.setHeight(8);
progressFill.setColor(tasks[i].color[0], tasks[i].color[1], tasks[i].color[2]);
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("📊 数据可视化");
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("📈 月度数据统计");
chartLabel.setFontSize(16.0);
chartLabel.setTextColor(76, 175, 80);
barChart.addView(chartLabel);
// 模拟数据
var chartData = [65, 42, 78, 34, 90, 56];
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[i]);
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[i] * 2);
bar.setHeight(20);
bar.setColor(33, 150, 243);
barItem.addView(bar);
var valueLabel = new Label();
valueLabel.setText(chartData[i]);
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控件创意应用示例已启动");

复制代码