AIWROK软件苹果系统UI-按钮[ Button]方法小结 - B2B网络软件

// 创建 TabView
var tab = new TabView();

// 设置标签页标题
tab.setTitles(["首页", "按钮示例", "关于"]);

// 显示 TabView，并在加载完成后执行回调函数
tab.show(() => {
console.log("TabView 显示完成");

// ====================== 首页 ======================
var homePage = new Vertical(); // 垂直布局容器

// 创建一个按钮
var btnHome = new Button();
btnHome.setText("欢迎来到首页");
btnHome.setColor(50, 100, 150);
btnHome.setTextColor(255, 255, 255);
btnHome.setWidth(200);
btnHome.setHeight(50);

btnHome.onClick(() => {
console.log("首页按钮被点击了");
});

homePage.addView(btnHome);

// 将首页添加到 TabView 中
tab.addView(0, homePage);

// ====================== 按钮示例 ======================
var buttonExamplePage = new Vertical(); // 垂直布局容器

// 创建第一个按钮
var btn1 = new Button();
btn1.setText("点击我");
btn1.setColor(50, 100, 150);
btn1.setTextColor(255, 255, 255);
btn1.setWidth(200);
btn1.setHeight(50);

btn1.onClick(() => {
console.log("第一个按钮被点击了");
btn1.setText("已点击");
btn1.setColor(255, 0, 0); // 点击后改变颜色
});

buttonExamplePage.addView(btn1);

// 创建第二个按钮来展示动态变化
var btn2 = new Button();
btn2.setText("改变我");
btn2.setColor(100, 100, 100);
btn2.setTextColor(0, 0, 0);
btn2.setWidth(150);
btn2.setHeight(40);

var clickCount = 0;
btn2.onClick(() => {
clickCount++;
console.log("第二个按钮被点击了 " + clickCount + " 次");

// 每次点击改变按钮文本
if (clickCount === 1) {
btn2.setText("再次点击");
btn2.setColor(0, 255, 0);
btn2.setTextColor(255, 255, 255);
} else if (clickCount === 2) {
btn2.setText("又点击了");
btn2.setColor(0, 0, 255);
} else if (clickCount >= 3) {
btn2.setText("点够了!");
btn2.setColor(255, 255, 0);
btn2.setTextColor(0, 0, 0);
clickCount = 0; // 重置计数
}
});

buttonExamplePage.addView(btn2);

// 创建第三个按钮展示所有方法的组合使用
var btn3 = new Button();
btn3.setText("多功能按钮");
btn3.setColor(150, 50, 200); // 紫色背景
btn3.setTextColor(255, 255, 0); // 黄色文字
btn3.setWidth(250);
btn3.setHeight(60);

// 复杂的点击事件处理
btn3.onClick(() => {
console.log("第三个按钮被点击");
// 获取当前标题
var currentText = btn3.getText();

// 根据当前标题改变按钮状态
if (currentText === "多功能按钮") {
btn3.setText("点击了第一次");
btn3.setColor(255, 165, 0); // 橙色
} else if (currentText === "点击了第一次") {
btn3.setText("再次点击");
btn3.setColor(75, 0, 130); // 靛蓝色
btn3.setWidth(300);
} else {
btn3.setText("多功能按钮");
btn3.setColor(150, 50, 200); // 恢复原始颜色
btn3.setWidth(250);
}
});

buttonExamplePage.addView(btn3);

// 将按钮示例页面添加到 TabView 中
tab.addView(1, buttonExamplePage);

// ====================== 关于 ======================
var aboutPage = new Vertical(); // 垂直布局容器

var lblAbout = new Label();
lblAbout.setText("这是一个关于页面，展示 TabView 的基本用法。");
aboutPage.addView(lblAbout);

// 创建一个返回按钮
var btnBack = new Button();
btnBack.setText("返回");
btnBack.setColor(255, 0, 0);
btnBack.onClick(() => {
tab.dismiss(); // 关闭当前 UI 界面
});
aboutPage.addView(btnBack);

// 将关于页面添加到 TabView 中
tab.addView(2, aboutPage);

console.log("视图添加完成");
});

📌setText 设置按钮标题

类别	详情说明
方法功能	设置按钮的文本内容
方法签名	`Void setText(String title)`
返回值	`Void` （无返回值）
参数	- `String title` ：按钮标题
案例	`var btn = new Button();` `btn.setText("点击我");`

📌getText 获取按钮标题

类别	详情说明
方法功能	获取按钮当前的文本内容
方法签名	`String getText()`
返回值	`String` （按钮的文本内容）
参数	无
案例	`var btn = new Button();` `string title = btn.getText();`

📌setColor设置按钮颜色

类别	详情说明
方法功能	设置按钮的背景颜色（通过 RGB 通道值）
方法签名	`Void setColor(Single red, Single green, Single blue)`
返回值	`Void` （无返回值）
参数	- `Single red` ：红色分量值（如 `50` ） - `Single green` ：绿色分量值（如 `100` ） - `Single blue` ：蓝色分量值（如 `150` ）
案例	`var btn = new Button();` `btn.setColor(50, 100, 150); // 设置按钮颜色为 RGB(50, 100, 150)`

📌setTextColor 设置按钮文本颜色

类别	详情说明
方法功能	设置按钮文本的颜色
方法签名	`Void setTextColor(Single red, Single green, Single blue)`
返回值	`Void` （无返回值）
参数	- `Single red` ：红色分量（如 `255` ） - `Single green` ：绿色分量（如 `255` ） - `Single blue` ：蓝色分量（如 `255` ）
案例	`var btn = new Button();` `btn.setTextColor(255, 255, 255); // 设置按钮文本颜色为白色`

📌setWidth 设置按钮宽度

类别	详情说明
方法功能	设置按钮的宽度
方法签名	`Void setWidth(Single width)`
返回值	`Void` （无返回值）
参数	- `Single width` ：宽度值
案例	`var btn = new Button();` `btn.setWidth(200); // 设置按钮宽度为200`

📌setHeight 设置按钮高度

类别	详情说明
方法功能	设置按钮的高度
方法签名	`Void setHeight(Single height)`
返回值	`Void` （无返回值）
参数	- `Single height` ：高度值
案例	`var btn = new Button();` `btn.setHeight(50); // 设置按钮高度为50`

📌onClick 按钮点击事件

类别	详情说明
方法功能	设置按钮的点击事件回调，点击时执行指定逻辑
方法签名	`Void onClick(String function)`
返回值	`Void` （无返回值）
参数	- `String function` ：点击事件的回调函数（案例中以箭头函数实现，如 `() => { ... }` ）
案例	//创建一个按钮 var btn = new Button(); //设置按钮颜色 btn.setColor(25, 10, 130) btn.onClick(() => { printl("按钮被点击了") btn.setText("abc") })

完整示例：

//UI-按钮[ Button]方法小结，交流QQ群711841924

// 方法一：setText 设置按钮标题

var btn = new Button();
btn.setText("点击我");

// 方法二：getText 获取按钮标题
var btn = new Button();
string title = btn.getText();

// 方法三：setColor设置按钮颜色
var btn = new Button();
btn.setColor(50, 100, 150); // 设置按钮颜色为RGB(50, 100, 150)

// 方法四：setTextColor 设置按钮文本颜色
var btn = new Button();
btn.setTextColor(255, 255, 255); // 设置按钮文本颜色为白色

// 方法五：setWidth 设置按钮宽度
var btn = new Button();
btn.setWidth(200); // 设置按钮宽度为200

// 方法六：setHeight 设置按钮高度
var btn = new Button();
btn.setHeight(50); // 设置按钮高度为50

// 方法七：onClick 按钮点击事件

//创建一个按钮
var btn = new Button();
//设置按钮颜色
btn.setColor(25, 10, 130)

btn.onClick(() => {
printl("按钮被点击了")
btn.setText("abc")
})