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

QQ896757558 · 发表于 2025-7-29 07:00:36

// 创建 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")
})

复制代码