 | |  |  | AIWROK软件苹果UI按钮Button方法示例
- // 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. 可以根据实际需求修改和扩展功能
复制代码
| |  | |  |
|