AIWROK软件苹果UI按钮Button方法示例

YYPOST群发软件 · 发表于 2 小时前

AIWROK软件苹果UI按钮Button方法示例
AIWROK软件苹果UI按钮Button方法示例 B2B网络软件

// Button综合示例 - 全面展示Button的各种用法和样式
// // 🍎交流QQ群711841924群一，苹果内测群：528816639
// 创建TabView
var tab = new TabView();
// 设置Tab标题
var titles = ["Button示例"];
tab.setTitles(titles);
// 创建主界面
var mainView = new Vertical();
mainView.setBackgroundColor(245, 245, 245);
mainView.setSpacing(20);
// 添加标题
var titleLabel = new Label();
titleLabel.setText("Button综合示例");
titleLabel.setTextColor(50, 100, 150);
titleLabel.setFontSize(24);
mainView.addView(titleLabel);
// 添加基本按钮示例
addSection(mainView, "基本按钮示例");
addBasicButtonExample(mainView);
// 添加彩色按钮示例
addSection(mainView, "彩色按钮示例");
addColorButtonExample(mainView);
// 添加交互按钮示例
addSection(mainView, "交互按钮示例");
addInteractiveButtonExample(mainView);
// 添加状态按钮示例
addSection(mainView, "状态按钮示例");
addStateButtonExample(mainView);
// 添加布局按钮示例
addSection(mainView, "布局按钮示例");
addLayoutButtonExample(mainView);
// 添加高级按钮示例
addSection(mainView, "高级按钮示例");
addAdvancedButtonExample(mainView);
// 显示主界面
tab.show(() => {
printl("Button示例界面已加载完成");
tab.addView(0, mainView);
});
// 添加 section 标题
function addSection(container, title) {
var sectionLabel = new Label();
sectionLabel.setText(title);
sectionLabel.setTextColor(80, 80, 80);
sectionLabel.setFontSize(18);
// 添加间距标签作为替代
var spacing = new Label();
spacing.setHeight(20);
container.addView(spacing);
container.addView(sectionLabel);
var bottomSpacing = new Label();
bottomSpacing.setHeight(10);
container.addView(bottomSpacing);
}
// 基本按钮示例
function addBasicButtonExample(container) {
var buttonContainer = new Horizontal();
buttonContainer.setSpacing(20);
// 基本按钮
var basicBtn = new Button();
basicBtn.setText("基本按钮");
basicBtn.setWidth(120);
basicBtn.setHeight(40);
basicBtn.onClick(() => {
printl("基本按钮被点击");
showToast("基本按钮被点击");
});
buttonContainer.addView(basicBtn);
// 获取按钮文本
var getTextBtn = new Button();
getTextBtn.setText("获取文本");
getTextBtn.setWidth(120);
getTextBtn.setHeight(40);
getTextBtn.onClick(() => {
var text = getTextBtn.getText();
printl("按钮文本: " + text);
showToast("按钮文本: " + text);
});
buttonContainer.addView(getTextBtn);
container.addView(buttonContainer);
}
// 彩色按钮示例
function addColorButtonExample(container) {
var buttonContainer = new Horizontal();
buttonContainer.setSpacing(15);
// 蓝色按钮
var blueBtn = new Button();
blueBtn.setText("蓝色按钮");
blueBtn.setColor(50, 100, 150);
blueBtn.setTextColor(255, 255, 255);
blueBtn.setWidth(100);
blueBtn.setHeight(40);
blueBtn.onClick(() => {
showToast("蓝色按钮被点击");
});
buttonContainer.addView(blueBtn);
// 红色按钮
var redBtn = new Button();
redBtn.setText("红色按钮");
redBtn.setColor(200, 50, 50);
redBtn.setTextColor(255, 255, 255);
redBtn.setWidth(100);
redBtn.setHeight(40);
redBtn.onClick(() => {
showToast("红色按钮被点击");
});
buttonContainer.addView(redBtn);
// 绿色按钮
var greenBtn = new Button();
greenBtn.setText("绿色按钮");
greenBtn.setColor(50, 150, 50);
greenBtn.setTextColor(255, 255, 255);
greenBtn.setWidth(100);
greenBtn.setHeight(40);
greenBtn.onClick(() => {
showToast("绿色按钮被点击");
});
buttonContainer.addView(greenBtn);
container.addView(buttonContainer);
}
// 交互按钮示例
function addInteractiveButtonExample(container) {
var buttonContainer = new Vertical();
buttonContainer.setSpacing(15);
// 计数器按钮
var count = 0;
var countBtn = new Button();
countBtn.setText("点击次数: " + count);
countBtn.setWidth(200);
countBtn.setHeight(45);
countBtn.setColor(70, 130, 180);
countBtn.setTextColor(255, 255, 255);
countBtn.onClick(() => {
count++;
countBtn.setText("点击次数: " + count);
showToast("点击次数: " + count);
});
buttonContainer.addView(countBtn);
// 切换文本按钮
var toggleBtn = new Button();
toggleBtn.setText("显示更多");
toggleBtn.setWidth(150);
toggleBtn.setHeight(40);
toggleBtn.onClick(() => {
var currentText = toggleBtn.getText();
if (currentText === "显示更多") {
toggleBtn.setText("显示更少");
} else {
toggleBtn.setText("显示更多");
}
showToast("按钮文本已切换");
});
buttonContainer.addView(toggleBtn);
container.addView(buttonContainer);
}
// 状态按钮示例
function addStateButtonExample(container) {
var buttonContainer = new Horizontal();
buttonContainer.setSpacing(20);
// 启用/禁用按钮
var enableBtn = new Button();
enableBtn.setText("禁用按钮");
enableBtn.setWidth(120);
enableBtn.setHeight(40);
enableBtn.setColor(150, 150, 150);
enableBtn.setTextColor(255, 255, 255);
var targetBtn = new Button();
targetBtn.setText("目标按钮");
targetBtn.setWidth(120);
targetBtn.setHeight(40);
targetBtn.onClick(() => {
showToast("目标按钮被点击");
});
enableBtn.onClick(() => {
var currentText = enableBtn.getText();
if (currentText === "禁用按钮") {
enableBtn.setText("启用按钮");
targetBtn.setColor(150, 150, 150);
targetBtn.setTextColor(200, 200, 200);
// 实际应用中可能需要设置一个标志来禁用点击
showToast("按钮已禁用");
} else {
enableBtn.setText("禁用按钮");
targetBtn.setColor(50, 100, 150);
targetBtn.setTextColor(255, 255, 255);
showToast("按钮已启用");
}
});
buttonContainer.addView(enableBtn);
buttonContainer.addView(targetBtn);
container.addView(buttonContainer);
}
// 布局按钮示例
function addLayoutButtonExample(container) {
var buttonContainer = new Vertical();
buttonContainer.setSpacing(15);
// 水平布局按钮组
var horizontalGroup = new Horizontal();
horizontalGroup.setSpacing(10);
var hBtn1 = new Button();
hBtn1.setText("按钮1");
hBtn1.setWidth(80);
hBtn1.setHeight(40);
hBtn1.onClick(() => showToast("按钮1被点击"));
var hBtn2 = new Button();
hBtn2.setText("按钮2");
hBtn2.setWidth(80);
hBtn2.setHeight(40);
hBtn2.onClick(() => showToast("按钮2被点击"));
var hBtn3 = new Button();
hBtn3.setText("按钮3");
hBtn3.setWidth(80);
hBtn3.setHeight(40);
hBtn3.onClick(() => showToast("按钮3被点击"));
horizontalGroup.addView(hBtn1);
horizontalGroup.addView(hBtn2);
horizontalGroup.addView(hBtn3);
buttonContainer.addView(horizontalGroup);
// 垂直布局按钮组
var verticalGroup = new Vertical();
verticalGroup.setSpacing(10);
var vBtn1 = new Button();
vBtn1.setText("垂直按钮1");
vBtn1.setWidth(150);
vBtn1.setHeight(40);
vBtn1.onClick(() => showToast("垂直按钮1被点击"));
var vBtn2 = new Button();
vBtn2.setText("垂直按钮2");
vBtn2.setWidth(150);
vBtn2.setHeight(40);
vBtn2.onClick(() => showToast("垂直按钮2被点击"));
verticalGroup.addView(vBtn1);
verticalGroup.addView(vBtn2);
buttonContainer.addView(verticalGroup);
container.addView(buttonContainer);
}
// 高级按钮示例
function addAdvancedButtonExample(container) {
var buttonContainer = new Vertical();
buttonContainer.setSpacing(15);
// 带图标效果的按钮（模拟）
var iconBtn = new Button();
iconBtn.setText("🔍 搜索");
iconBtn.setWidth(120);
iconBtn.setHeight(40);
iconBtn.setColor(70, 130, 180);
iconBtn.setTextColor(255, 255, 255);
iconBtn.onClick(() => {
showToast("搜索按钮被点击");
});
buttonContainer.addView(iconBtn);
// 长文本按钮
var longTextBtn = new Button();
longTextBtn.setText("这是一个很长很长的按钮文本示例");
longTextBtn.setWidth(200);
longTextBtn.setHeight(40);
longTextBtn.onClick(() => {
showToast("长文本按钮被点击");
});
buttonContainer.addView(longTextBtn);
// 确认/取消按钮组
var confirmGroup = new Horizontal();
confirmGroup.setSpacing(20);
var confirmBtn = new Button();
confirmBtn.setText("确认");
confirmBtn.setWidth(100);
confirmBtn.setHeight(40);
confirmBtn.setColor(50, 150, 50);
confirmBtn.setTextColor(255, 255, 255);
confirmBtn.onClick(() => {
showToast("确认操作");
});
var cancelBtn = new Button();
cancelBtn.setText("取消");
cancelBtn.setWidth(100);
cancelBtn.setHeight(40);
cancelBtn.setColor(150, 150, 150);
cancelBtn.setTextColor(255, 255, 255);
cancelBtn.onClick(() => {
showToast("取消操作");
});
confirmGroup.addView(confirmBtn);
confirmGroup.addView(cancelBtn);
buttonContainer.addView(confirmGroup);
container.addView(buttonContainer);
}
// 显示提示信息
function showToast(message) {
printl("提示: " + message);
// 实际应用中可以调用原生的toast功能
}
// 日志输出函数
function printl(message) {
console.log("[Button Example] " + message);
}
// 代码说明：
// 1. 本示例展示了Button的各种用法和样式
// 2. 包括基本按钮、彩色按钮、交互按钮、状态按钮、布局按钮和高级按钮
// 3. 实现了按钮点击事件、文本修改、颜色变化等交互功能
// 4. 代码遵循AIWROK平台的方法规范
// 5. 可以根据实际需求修改和扩展功能

复制代码

		自动登录	找回密码
密码			立即注册审核网站号:QQ:896757558

AIWROK软件苹果UI按钮Button方法示例

相关帖子