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

	//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") }) 📌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") }) 完整示例： // 创建 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("视图添加完成"); });