YYPOST群发软件 发表于 2026-2-13 08:58:50

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


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(" " + message);
}

// 代码说明:
// 1. 本示例展示了Button的各种用法和样式
// 2. 包括基本按钮、彩色按钮、交互按钮、状态按钮、布局按钮和高级按钮
// 3. 实现了按钮点击事件、文本修改、颜色变化等交互功能
// 4. 代码遵循AIWROK平台的方法规范
// 5. 可以根据实际需求修改和扩展功能

页: [1]
查看完整版本: AIWROK软件苹果UI按钮Button方法示例