 | |  |  | 苹果AIWROK实例单选按钮组类[RadioButtonGroup]完整综合示例
- // 🎨UI-单选按钮组类[RadioButtonGroup]完整综合示例
- // 全面展示RadioButtonGroup的所有功能和方法
- // 🍎交流QQ群711841924群一,苹果内测群,528816639
- printl("=== RadioButtonGroup单选按钮组完整综合示例启动 ===");
- var tab = new TabView();
- tab.setTitles(["基础", "高级", "动态", "综合", "返回"]);
- tab.show(function() {
- printl("TabView界面加载完成");
-
- // ====================== 第一页:基础方法演示 ======================
- var basicPage = new Vertical();
- basicPage.setSpacing(10);
- basicPage.setBackgroundColor(255, 255, 255);
-
- var basicDesc = new Label();
- basicDesc.setText("展示RadioButtonGroup的三个核心方法:setID、setDefultSelect、currentSelectedRadio");
- basicDesc.setTextColor(100, 100, 100);
- basicDesc.setFontSize(12);
- basicDesc.setTextAlignment("center");
- basicPage.addView(basicDesc);
-
- // 方法1:setID设置控件ID
- var section1 = new Horizontal();
- section1.setAlignment("center");
- section1.setBackgroundColor(220, 220, 225);
-
- var section1Label = new Label();
- section1Label.setText("方法1:setID设置控件ID");
- section1Label.setTextColor(60, 60, 60);
- section1Label.setFontSize(15);
- section1.addView(section1Label);
-
- basicPage.addView(section1);
-
- var idDemoContainer = new Vertical();
- idDemoContainer.setSpacing(10);
- idDemoContainer.setBackgroundColor(255, 255, 255);
-
- var idDesc = new Label();
- idDesc.setText("为单选按钮组设置唯一标识符,方便后续通过config读取配置");
- idDesc.setTextColor(100, 100, 100);
- idDesc.setFontSize(12);
- idDemoContainer.addView(idDesc);
-
- var idCodeLabel = new Label();
- idCodeLabel.setText("var rg = new RadioButtonGroup();\nrg.setID(\"abc\");\n// 读取使用\nconfig.getConfig(\"abc\");");
- idCodeLabel.setTextColor(50, 50, 150);
- idCodeLabel.setFontSize(11);
- idCodeLabel.setBackgroundColor(245, 245, 255);
- idDemoContainer.addView(idCodeLabel);
-
- var idDemoGroup = new RadioButtonGroup();
- idDemoGroup.setID("demo_group_1");
- idDemoGroup.setDefultSelect("选项A");
-
- // 创建单选按钮并关联到组
- var optionA = new RadioButton();
- optionA.setText("选项A");
- optionA.setGroup(idDemoGroup);
-
- var optionB = new RadioButton();
- optionB.setText("选项B");
- optionB.setGroup(idDemoGroup);
-
- var optionC = new RadioButton();
- optionC.setText("选项C");
- optionC.setGroup(idDemoGroup);
-
- // 添加单选按钮到容器
- var radioContainer = new Horizontal();
- radioContainer.setSpacing(20);
- radioContainer.addView(optionA);
- radioContainer.addView(optionB);
- radioContainer.addView(optionC);
- idDemoContainer.addView(radioContainer);
-
- var idResultLabel = new Label();
- idResultLabel.setText("控件ID已设置为:demo_group_1");
- idResultLabel.setTextColor(0, 128, 0);
- idResultLabel.setFontSize(12);
- idDemoContainer.addView(idResultLabel);
-
- var idGetValueButton = new Button();
- idGetValueButton.setText("获取当前值");
- idGetValueButton.setColor(70, 130, 180);
- idGetValueButton.setTextColor(255, 255, 255);
- idGetValueButton.onClick(function() {
- var selected = idDemoGroup.currentSelectedRadio();
- var selectedText = selected ? selected.getText() : "未选择";
- printl("方法1当前选中项: " + selectedText);
- idResultLabel.setText("控件ID已设置为:demo_group_1,当前选中: " + selectedText);
- });
- idDemoContainer.addView(idGetValueButton);
-
- basicPage.addView(idDemoContainer);
-
- // 方法2:setDefultSelect设置默认值
- var section2 = new Horizontal();
- section2.setAlignment("center");
- section2.setBackgroundColor(220, 220, 225);
-
- var section2Label = new Label();
- section2Label.setText("方法2:setDefultSelect设置默认值");
- section2Label.setTextColor(60, 60, 60);
- section2Label.setFontSize(15);
- section2.addView(section2Label);
-
- basicPage.addView(section2);
-
- var defaultDemoContainer = new Vertical();
- defaultDemoContainer.setSpacing(10);
- defaultDemoContainer.setBackgroundColor(255, 255, 255);
-
- var defaultDesc = new Label();
- defaultDesc.setText("设置单选按钮组的默认选中项,初始化时自动选中指定选项");
- defaultDesc.setTextColor(100, 100, 100);
- defaultDesc.setFontSize(12);
- defaultDemoContainer.addView(defaultDesc);
-
- var defaultCodeLabel = new Label();
- defaultCodeLabel.setText("var rg = new RadioButtonGroup();\nrg.setID(\"性别\")\nrg.setDefultSelect(\"男\");");
- defaultCodeLabel.setTextColor(50, 50, 150);
- defaultCodeLabel.setFontSize(11);
- defaultCodeLabel.setBackgroundColor(245, 245, 255);
- defaultDemoContainer.addView(defaultCodeLabel);
-
- var genderGroup = new RadioButtonGroup();
- genderGroup.setID("gender_group");
- genderGroup.setDefultSelect("男");
-
- // 创建单选按钮并关联到组
- var maleOption = new RadioButton();
- maleOption.setText("男");
- maleOption.setGroup(genderGroup);
-
- var femaleOption = new RadioButton();
- femaleOption.setText("女");
- femaleOption.setGroup(genderGroup);
-
- var otherOption = new RadioButton();
- otherOption.setText("其他");
- otherOption.setGroup(genderGroup);
-
- // 添加单选按钮到容器
- var genderContainer = new Horizontal();
- genderContainer.setSpacing(20);
- genderContainer.addView(maleOption);
- genderContainer.addView(femaleOption);
- genderContainer.addView(otherOption);
- defaultDemoContainer.addView(genderContainer);
-
- var defaultResultLabel = new Label();
- defaultResultLabel.setText("默认选中项:男");
- defaultResultLabel.setTextColor(0, 128, 0);
- defaultResultLabel.setFontSize(12);
- defaultDemoContainer.addView(defaultResultLabel);
-
- var defaultGetValueButton = new Button();
- defaultGetValueButton.setText("获取当前值");
- defaultGetValueButton.setColor(70, 130, 180);
- defaultGetValueButton.setTextColor(255, 255, 255);
- defaultGetValueButton.onClick(function() {
- var selected = genderGroup.currentSelectedRadio();
- var selectedText = selected ? selected.getText() : "未选择";
- printl("方法2当前选中项: " + selectedText);
- defaultResultLabel.setText("默认选中项:男,当前选中: " + selectedText);
- });
- defaultDemoContainer.addView(defaultGetValueButton);
-
- basicPage.addView(defaultDemoContainer);
-
- // 方法3:currentSelectedRadio当前选中的单选按钮
- var section3 = new Horizontal();
- section3.setAlignment("center");
- section3.setBackgroundColor(220, 220, 225);
-
- var section3Label = new Label();
- section3Label.setText("方法3:currentSelectedRadio获取当前选中项");
- section3Label.setTextColor(60, 60, 60);
- section3Label.setFontSize(15);
- section3.addView(section3Label);
-
- basicPage.addView(section3);
-
- var currentDemoContainer = new Vertical();
- currentDemoContainer.setSpacing(10);
- currentDemoContainer.setBackgroundColor(255, 255, 255);
-
- var currentDesc = new Label();
- currentDesc.setText("获取当前选中的单选按钮,用于读取用户选择或进行后续操作");
- currentDesc.setTextColor(100, 100, 100);
- currentDesc.setFontSize(12);
- currentDemoContainer.addView(currentDesc);
-
- var currentCodeLabel = new Label();
- currentCodeLabel.setText("new RadioButtonGroup().currentSelectedRadio()");
- currentCodeLabel.setTextColor(50, 50, 150);
- currentCodeLabel.setFontSize(11);
- currentCodeLabel.setBackgroundColor(245, 245, 255);
- currentDemoContainer.addView(currentCodeLabel);
-
- var currentGroup = new RadioButtonGroup();
- currentGroup.setID("current_group");
- currentGroup.setDefultSelect("选项1");
-
- // 创建单选按钮并关联到组
- var option1 = new RadioButton();
- option1.setText("选项1");
- option1.setGroup(currentGroup);
-
- var option2 = new RadioButton();
- option2.setText("选项2");
- option2.setGroup(currentGroup);
-
- var option3 = new RadioButton();
- option3.setText("选项3");
- option3.setGroup(currentGroup);
-
- // 添加单选按钮到容器
- var currentRadioContainer = new Horizontal();
- currentRadioContainer.setSpacing(20);
- currentRadioContainer.addView(option1);
- currentRadioContainer.addView(option2);
- currentRadioContainer.addView(option3);
- currentDemoContainer.addView(currentRadioContainer);
-
- var currentButton = new Button();
- currentButton.setText("获取当前选中项");
- currentButton.setColor(70, 130, 180);
- currentButton.setTextColor(255, 255, 255);
- currentButton.onClick(function() {
- var selected = currentGroup.currentSelectedRadio();
- var selectedText = selected ? selected.getText() : "未选择";
- printl("当前选中项: " + selectedText);
- currentResultLabel.setText("当前选中项: " + selectedText);
- });
- currentDemoContainer.addView(currentButton);
-
- var currentResultLabel = new Label();
- currentResultLabel.setText("当前选中项:选项1");
- currentResultLabel.setTextColor(0, 128, 0);
- currentResultLabel.setFontSize(12);
- currentDemoContainer.addView(currentResultLabel);
-
- basicPage.addView(currentDemoContainer);
-
- // ====================== 第二页:高级应用演示 ======================
- var advancedPage = new Vertical();
- advancedPage.setSpacing(10);
- advancedPage.setBackgroundColor(255, 255, 255);
-
- var advancedDesc = new Label();
- advancedDesc.setText("展示RadioButtonGroup在实际应用场景中的使用方法");
- advancedDesc.setTextColor(100, 100, 100);
- advancedDesc.setFontSize(12);
- advancedDesc.setTextAlignment("center");
- advancedPage.addView(advancedDesc);
-
- // 应用1:用户设置界面
- var appSection1 = new Horizontal();
- appSection1.setAlignment("center");
- appSection1.setBackgroundColor(220, 220, 225);
-
- var appSection1Label = new Label();
- appSection1Label.setText("应用1:用户设置界面");
- appSection1Label.setTextColor(60, 60, 60);
- appSection1Label.setFontSize(15);
- appSection1.addView(appSection1Label);
-
- advancedPage.addView(appSection1);
-
- var settingsContainer = new Vertical();
- settingsContainer.setSpacing(12);
- settingsContainer.setBackgroundColor(255, 255, 255);
-
- var settingsDesc = new Label();
- settingsDesc.setText("使用RadioButtonGroup实现用户偏好设置");
- settingsDesc.setTextColor(100, 100, 100);
- settingsDesc.setFontSize(12);
- settingsContainer.addView(settingsDesc);
-
- // 语言设置
- var languageLabel = new Label();
- languageLabel.setText("语言设置");
- languageLabel.setTextColor(60, 60, 60);
- languageLabel.setFontSize(14);
- settingsContainer.addView(languageLabel);
-
- var languageGroup = new RadioButtonGroup();
- languageGroup.setID("language_setting");
- languageGroup.setDefultSelect("简体中文");
-
- // 创建单选按钮并关联到组
- var chineseOption = new RadioButton();
- chineseOption.setText("简体中文");
- chineseOption.setGroup(languageGroup);
-
- var englishOption = new RadioButton();
- englishOption.setText("English");
- englishOption.setGroup(languageGroup);
-
- // 添加单选按钮到容器
- var languageContainer = new Horizontal();
- languageContainer.setSpacing(20);
- languageContainer.setAlignment("center");
- languageContainer.addView(chineseOption);
- languageContainer.addView(englishOption);
- settingsContainer.addView(languageContainer);
-
- // 主题设置
- var themeLabel = new Label();
- themeLabel.setText("主题设置");
- themeLabel.setTextColor(60, 60, 60);
- themeLabel.setFontSize(14);
- settingsContainer.addView(themeLabel);
-
- var themeGroup = new RadioButtonGroup();
- themeGroup.setID("theme_setting");
- themeGroup.setDefultSelect("浅色模式");
-
- // 创建单选按钮并关联到组
- var lightOption = new RadioButton();
- lightOption.setText("浅色模式");
- lightOption.setGroup(themeGroup);
-
- var darkOption = new RadioButton();
- darkOption.setText("深色模式");
- darkOption.setGroup(themeGroup);
-
- // 添加单选按钮到容器
- var themeContainer = new Horizontal();
- themeContainer.setSpacing(20);
- themeContainer.setAlignment("center");
- themeContainer.addView(lightOption);
- themeContainer.addView(darkOption);
- settingsContainer.addView(themeContainer);
-
- var saveSettingsButton = new Button();
- saveSettingsButton.setText("保存设置");
- saveSettingsButton.setColor(46, 139, 87);
- saveSettingsButton.setTextColor(255, 255, 255);
- saveSettingsButton.onClick(function() {
- var langRadio = languageGroup.currentSelectedRadio();
- var themeRadio = themeGroup.currentSelectedRadio();
- var lang = langRadio ? langRadio.getText() : "未选择";
- var theme = themeRadio ? themeRadio.getText() : "未选择";
- printl("保存设置 - 语言: " + lang + ", 主题: " + theme);
- settingsResultLabel.setText("设置已保存: " + lang + ", " + theme);
- });
- settingsContainer.addView(saveSettingsButton);
-
- var settingsResultLabel = new Label();
- settingsResultLabel.setText("等待保存设置...");
- settingsResultLabel.setTextColor(100, 100, 100);
- settingsResultLabel.setFontSize(12);
- settingsContainer.addView(settingsResultLabel);
-
- var settingsGetValueButton = new Button();
- settingsGetValueButton.setText("获取当前值");
- settingsGetValueButton.setColor(70, 130, 180);
- settingsGetValueButton.setTextColor(255, 255, 255);
- settingsGetValueButton.onClick(function() {
- var langRadio = languageGroup.currentSelectedRadio();
- var themeRadio = themeGroup.currentSelectedRadio();
- var lang = langRadio ? langRadio.getText() : "未选择";
- var theme = themeRadio ? themeRadio.getText() : "未选择";
- printl("设置当前值 - 语言: " + lang + ", 主题: " + theme);
- settingsResultLabel.setText("当前值: 语言=" + lang + ", 主题=" + theme);
- });
- settingsContainer.addView(settingsGetValueButton);
-
- advancedPage.addView(settingsContainer);
-
- // 应用2:表单选择
- var appSection2 = new Horizontal();
- appSection2.setAlignment("center");
- appSection2.setBackgroundColor(220, 220, 225);
-
- var appSection2Label = new Label();
- appSection2Label.setText("应用2:表单数据选择");
- appSection2Label.setTextColor(60, 60, 60);
- appSection2Label.setFontSize(15);
- appSection2.addView(appSection2Label);
-
- advancedPage.addView(appSection2);
-
- var formContainer = new Vertical();
- formContainer.setSpacing(12);
- formContainer.setBackgroundColor(255, 255, 255);
-
- var formDesc = new Label();
- formDesc.setText("使用RadioButtonGroup实现表单中的单选功能");
- formDesc.setTextColor(100, 100, 100);
- formDesc.setFontSize(12);
- formContainer.addView(formDesc);
-
- // 性别选择
- var genderFormLabel = new Label();
- genderFormLabel.setText("性别");
- genderFormLabel.setTextColor(60, 60, 60);
- genderFormLabel.setFontSize(14);
- formContainer.addView(genderFormLabel);
-
- var genderFormGroup = new RadioButtonGroup();
- genderFormGroup.setID("form_gender");
- genderFormGroup.setDefultSelect("保密");
-
- // 创建单选按钮并关联到组
- var maleFormOption = new RadioButton();
- maleFormOption.setText("男");
- maleFormOption.setGroup(genderFormGroup);
-
- var femaleFormOption = new RadioButton();
- femaleFormOption.setText("女");
- femaleFormOption.setGroup(genderFormGroup);
-
- var secretOption = new RadioButton();
- secretOption.setText("保密");
- secretOption.setGroup(genderFormGroup);
-
- // 添加单选按钮到容器
- var genderFormContainer = new Horizontal();
- genderFormContainer.setSpacing(20);
- genderFormContainer.addView(maleFormOption);
- genderFormContainer.addView(femaleFormOption);
- genderFormContainer.addView(secretOption);
- formContainer.addView(genderFormContainer);
-
- // 年龄段选择
- var ageLabel = new Label();
- ageLabel.setText("年龄段");
- ageLabel.setTextColor(60, 60, 60);
- ageLabel.setFontSize(14);
- formContainer.addView(ageLabel);
-
- var ageGroup = new RadioButtonGroup();
- ageGroup.setID("form_age");
- ageGroup.setDefultSelect("18-25岁");
-
- // 创建单选按钮并关联到组
- var age1Option = new RadioButton();
- age1Option.setText("18-25岁");
- age1Option.setGroup(ageGroup);
-
- var age2Option = new RadioButton();
- age2Option.setText("26-35岁");
- age2Option.setGroup(ageGroup);
-
- var age3Option = new RadioButton();
- age3Option.setText("36岁以上");
- age3Option.setGroup(ageGroup);
-
- // 添加单选按钮到容器
- var ageContainer = new Horizontal();
- ageContainer.setSpacing(20);
- ageContainer.addView(age1Option);
- ageContainer.addView(age2Option);
- ageContainer.addView(age3Option);
- formContainer.addView(ageContainer);
-
- var submitFormButton = new Button();
- submitFormButton.setText("提交表单");
- submitFormButton.setColor(70, 130, 180);
- submitFormButton.setTextColor(255, 255, 255);
- submitFormButton.onClick(function() {
- var genderRadio = genderFormGroup.currentSelectedRadio();
- var ageRadio = ageGroup.currentSelectedRadio();
- var gender = genderRadio ? genderRadio.getText() : "未选择";
- var age = ageRadio ? ageRadio.getText() : "未选择";
- printl("提交表单 - 性别: " + gender + ", 年龄段: " + age);
- formResultLabel.setText("表单已提交: " + gender + ", " + age);
- });
- formContainer.addView(submitFormButton);
-
- var formResultLabel = new Label();
- formResultLabel.setText("等待提交表单...");
- formResultLabel.setTextColor(100, 100, 100);
- formResultLabel.setFontSize(12);
- formContainer.addView(formResultLabel);
-
- var formGetValueButton = new Button();
- formGetValueButton.setText("获取当前值");
- formGetValueButton.setColor(70, 130, 180);
- formGetValueButton.setTextColor(255, 255, 255);
- formGetValueButton.onClick(function() {
- var genderRadio = genderFormGroup.currentSelectedRadio();
- var ageRadio = ageGroup.currentSelectedRadio();
- var gender = genderRadio ? genderRadio.getText() : "未选择";
- var age = ageRadio ? ageRadio.getText() : "未选择";
- printl("表单当前值 - 性别: " + gender + ", 年龄段: " + age);
- formResultLabel.setText("当前值: 性别=" + gender + ", 年龄段=" + age);
- });
- formContainer.addView(formGetValueButton);
-
- advancedPage.addView(formContainer);
-
- // ====================== 第三页:动态管理演示 ======================
- var dynamicPage = new Vertical();
- dynamicPage.setSpacing(10);
- dynamicPage.setBackgroundColor(255, 255, 255);
-
- var dynamicDesc = new Label();
- dynamicDesc.setText("展示如何动态创建和管理RadioButtonGroup,以及与其他控件的交互");
- dynamicDesc.setTextColor(100, 100, 100);
- dynamicDesc.setFontSize(12);
- dynamicDesc.setTextAlignment("center");
- dynamicPage.addView(dynamicDesc);
-
- // 动态创建RadioButtonGroup
- var dynamicSection1 = new Horizontal();
- dynamicSection1.setAlignment("center");
- dynamicSection1.setBackgroundColor(220, 220, 225);
-
- var dynamicSection1Label = new Label();
- dynamicSection1Label.setText("动态创建RadioButtonGroup");
- dynamicSection1Label.setTextColor(60, 60, 60);
- dynamicSection1Label.setFontSize(15);
- dynamicSection1.addView(dynamicSection1Label);
-
- dynamicPage.addView(dynamicSection1);
-
- var dynamicCreateContainer = new Vertical();
- dynamicCreateContainer.setSpacing(10);
- dynamicCreateContainer.setBackgroundColor(255, 255, 255);
-
- var dynamicCreateDesc = new Label();
- dynamicCreateDesc.setText("通过代码动态创建RadioButtonGroup并添加到界面");
- dynamicCreateDesc.setTextColor(100, 100, 100);
- dynamicCreateDesc.setFontSize(12);
- dynamicCreateContainer.addView(dynamicCreateDesc);
-
- var dynamicCreateButton = new Button();
- dynamicCreateButton.setText("创建新的单选按钮组");
- dynamicCreateButton.setColor(70, 130, 180);
- dynamicCreateButton.setTextColor(255, 255, 255);
- dynamicCreateButton.onClick(function() {
- var newGroup = new RadioButtonGroup();
- var groupId = "dynamic_group_" + dynamicCreateContainer.getViewCount();
- newGroup.setID(groupId);
- newGroup.setDefultSelect("选项A");
-
- var groupLabel = new Label();
- groupLabel.setText("已创建组: " + groupId);
- groupLabel.setTextColor(0, 128, 0);
- groupLabel.setFontSize(11);
- dynamicCreateContainer.addView(groupLabel);
-
- printl("已创建新的RadioButtonGroup,ID: " + groupId);
- });
- dynamicCreateContainer.addView(dynamicCreateButton);
-
- dynamicPage.addView(dynamicCreateContainer);
-
- // 动态读取配置
- var dynamicSection2 = new Horizontal();
- dynamicSection2.setAlignment("center");
- dynamicSection2.setBackgroundColor(220, 220, 225);
-
- var dynamicSection2Label = new Label();
- dynamicSection2Label.setText("动态读取配置");
- dynamicSection2Label.setTextColor(60, 60, 60);
- dynamicSection2Label.setFontSize(15);
- dynamicSection2.addView(dynamicSection2Label);
-
- dynamicPage.addView(dynamicSection2);
-
- var dynamicConfigContainer = new Vertical();
- dynamicConfigContainer.setSpacing(10);
- dynamicConfigContainer.setBackgroundColor(255, 255, 255);
-
- var dynamicConfigDesc = new Label();
- dynamicConfigDesc.setText("通过config读取RadioButtonGroup的配置值");
- dynamicConfigDesc.setTextColor(100, 100, 100);
- dynamicConfigDesc.setFontSize(12);
- dynamicConfigContainer.addView(dynamicConfigDesc);
-
- var configGroup = new RadioButtonGroup();
- configGroup.setID("config_test_group");
- configGroup.setDefultSelect("配置项1");
-
- // 创建单选按钮并关联到组
- var config1Option = new RadioButton();
- config1Option.setText("配置项1");
- config1Option.setGroup(configGroup);
-
- var config2Option = new RadioButton();
- config2Option.setText("配置项2");
- config2Option.setGroup(configGroup);
-
- // 添加单选按钮到容器
- var configContainer = new Horizontal();
- configContainer.setSpacing(20);
- configContainer.addView(config1Option);
- configContainer.addView(config2Option);
- dynamicConfigContainer.addView(configContainer);
-
- var readConfigButton = new Button();
- readConfigButton.setText("读取配置");
- readConfigButton.setColor(46, 139, 87);
- readConfigButton.setTextColor(255, 255, 255);
- readConfigButton.onClick(function() {
- var selectedRadio = configGroup.currentSelectedRadio();
- var selectedText = selectedRadio ? selectedRadio.getText() : "未选择";
- printl("当前选中值: " + selectedText);
- configResultLabel.setText("配置值: " + selectedText);
- });
- dynamicConfigContainer.addView(readConfigButton);
-
- var configResultLabel = new Label();
- configResultLabel.setText("等待读取配置...");
- configResultLabel.setTextColor(100, 100, 100);
- configResultLabel.setFontSize(12);
- dynamicConfigContainer.addView(configResultLabel);
-
- var configGetValueButton = new Button();
- configGetValueButton.setText("获取当前值");
- configGetValueButton.setColor(70, 130, 180);
- configGetValueButton.setTextColor(255, 255, 255);
- configGetValueButton.onClick(function() {
- var selectedRadio = configGroup.currentSelectedRadio();
- var selectedText = selectedRadio ? selectedRadio.getText() : "未选择";
- printl("配置当前值: " + selectedText);
- configResultLabel.setText("当前值: " + selectedText);
- });
- dynamicConfigContainer.addView(configGetValueButton);
-
- dynamicPage.addView(dynamicConfigContainer);
-
- // ====================== 第四页:综合演示 ======================
- var comprehensivePage = new Vertical();
- comprehensivePage.setSpacing(10);
- comprehensivePage.setBackgroundColor(255, 255, 255);
-
- var comprehensiveDesc = new Label();
- comprehensiveDesc.setText("展示RadioButtonGroup在完整应用场景中的综合使用");
- comprehensiveDesc.setTextColor(100, 100, 100);
- comprehensiveDesc.setFontSize(12);
- comprehensiveDesc.setTextAlignment("center");
- comprehensivePage.addView(comprehensiveDesc);
-
- // 完整的问卷调查示例
- var surveySection = new Horizontal();
- surveySection.setAlignment("center");
- surveySection.setBackgroundColor(220, 220, 225);
-
- var surveySectionLabel = new Label();
- surveySectionLabel.setText("综合应用:用户问卷调查");
- surveySectionLabel.setTextColor(60, 60, 60);
- surveySectionLabel.setFontSize(15);
- surveySection.addView(surveySectionLabel);
-
- comprehensivePage.addView(surveySection);
-
- var surveyContainer = new Vertical();
- surveyContainer.setSpacing(15);
- surveyContainer.setBackgroundColor(255, 255, 255);
-
- var surveyTitle = new Label();
- surveyTitle.setText("用户满意度调查");
- surveyTitle.setTextColor(50, 50, 50);
- surveyTitle.setFontSize(16);
- surveyTitle.setTextAlignment("center");
- surveyContainer.addView(surveyTitle);
-
- // 问题1
- var q1Label = new Label();
- q1Label.setText("1. 您对产品的整体满意度如何?");
- q1Label.setTextColor(60, 60, 60);
- q1Label.setFontSize(14);
- surveyContainer.addView(q1Label);
-
- var q1Group = new RadioButtonGroup();
- q1Group.setID("survey_q1");
- q1Group.setDefultSelect("满意");
-
- // 创建单选按钮并关联到组
- var verySatisfiedOption = new RadioButton();
- verySatisfiedOption.setText("非常满意");
- verySatisfiedOption.setGroup(q1Group);
-
- var satisfiedOption = new RadioButton();
- satisfiedOption.setText("满意");
- satisfiedOption.setGroup(q1Group);
-
- var neutralOption = new RadioButton();
- neutralOption.setText("一般");
- neutralOption.setGroup(q1Group);
-
- var dissatisfiedOption = new RadioButton();
- dissatisfiedOption.setText("不满意");
- dissatisfiedOption.setGroup(q1Group);
-
- // 添加单选按钮到容器
- var q1Container = new Vertical();
- q1Container.setSpacing(10);
-
- var q1Row1 = new Horizontal();
- q1Row1.setSpacing(15);
- q1Row1.addView(verySatisfiedOption);
- q1Row1.addView(satisfiedOption);
-
- var q1Row2 = new Horizontal();
- q1Row2.setSpacing(15);
- q1Row2.addView(neutralOption);
- q1Row2.addView(dissatisfiedOption);
-
- q1Container.addView(q1Row1);
- q1Container.addView(q1Row2);
- surveyContainer.addView(q1Container);
-
- // 问题2
- var q2Label = new Label();
- q2Label.setText("2. 您使用产品的频率是?");
- q2Label.setTextColor(60, 60, 60);
- q2Label.setFontSize(14);
- surveyContainer.addView(q2Label);
-
- var q2Group = new RadioButtonGroup();
- q2Group.setID("survey_q2");
- q2Group.setDefultSelect("每天使用");
-
- // 创建单选按钮并关联到组
- var dailyOption = new RadioButton();
- dailyOption.setText("每天使用");
- dailyOption.setGroup(q2Group);
-
- var weeklyOption = new RadioButton();
- weeklyOption.setText("每周使用");
- weeklyOption.setGroup(q2Group);
-
- var monthlyOption = new RadioButton();
- monthlyOption.setText("每月使用");
- monthlyOption.setGroup(q2Group);
-
- var rarelyOption = new RadioButton();
- rarelyOption.setText("很少使用");
- rarelyOption.setGroup(q2Group);
-
- // 添加单选按钮到容器
- var q2Container = new Vertical();
- q2Container.setSpacing(10);
-
- var q2Row1 = new Horizontal();
- q2Row1.setSpacing(15);
- q2Row1.addView(dailyOption);
- q2Row1.addView(weeklyOption);
-
- var q2Row2 = new Horizontal();
- q2Row2.setSpacing(15);
- q2Row2.addView(monthlyOption);
- q2Row2.addView(rarelyOption);
-
- q2Container.addView(q2Row1);
- q2Container.addView(q2Row2);
- surveyContainer.addView(q2Container);
-
- // 问题3
- var q3Label = new Label();
- q3Label.setText("3. 您会推荐给朋友吗?");
- q3Label.setTextColor(60, 60, 60);
- q3Label.setFontSize(14);
- surveyContainer.addView(q3Label);
-
- var q3Group = new RadioButtonGroup();
- q3Group.setID("survey_q3");
- q3Group.setDefultSelect("会推荐");
-
- // 创建单选按钮并关联到组
- var definitelyOption = new RadioButton();
- definitelyOption.setText("肯定会");
- definitelyOption.setGroup(q3Group);
-
- var yesOption = new RadioButton();
- yesOption.setText("会推荐");
- yesOption.setGroup(q3Group);
-
- var maybeOption = new RadioButton();
- maybeOption.setText("可能会");
- maybeOption.setGroup(q3Group);
-
- var noOption = new RadioButton();
- noOption.setText("不会");
- noOption.setGroup(q3Group);
-
- // 添加单选按钮到容器
- var q3Container = new Vertical();
- q3Container.setSpacing(10);
-
- var q3Row1 = new Horizontal();
- q3Row1.setSpacing(15);
- q3Row1.addView(definitelyOption);
- q3Row1.addView(yesOption);
-
- var q3Row2 = new Horizontal();
- q3Row2.setSpacing(15);
- q3Row2.addView(maybeOption);
- q3Row2.addView(noOption);
-
- q3Container.addView(q3Row1);
- q3Container.addView(q3Row2);
- surveyContainer.addView(q3Container);
-
- // 提交按钮
- var submitSurveyButton = new Button();
- submitSurveyButton.setText("提交调查");
- submitSurveyButton.setColor(70, 130, 180);
- submitSurveyButton.setTextColor(255, 255, 255);
- submitSurveyButton.setWidth(150);
- submitSurveyButton.setHeight(45);
- submitSurveyButton.onClick(function() {
- var q1Radio = q1Group.currentSelectedRadio();
- var q2Radio = q2Group.currentSelectedRadio();
- var q3Radio = q3Group.currentSelectedRadio();
-
- var q1Answer = q1Radio ? q1Radio.getText() : "未选择";
- var q2Answer = q2Radio ? q2Radio.getText() : "未选择";
- var q3Answer = q3Radio ? q3Radio.getText() : "未选择";
-
- var result = "调查结果:\n" +
- "1. 满意度: " + q1Answer + "\n" +
- "2. 使用频率: " + q2Answer + "\n" +
- "3. 推荐意愿: " + q3Answer;
-
- printl(result);
- surveyResultLabel.setText(result);
- showToast("调查提交成功!");
- });
- surveyContainer.addView(submitSurveyButton);
-
- var surveyResultLabel = new Label();
- surveyResultLabel.setText("等待提交调查...");
- surveyResultLabel.setTextColor(100, 100, 100);
- surveyResultLabel.setFontSize(12);
- surveyContainer.addView(surveyResultLabel);
-
- var surveyGetValueButton = new Button();
- surveyGetValueButton.setText("获取当前值");
- surveyGetValueButton.setColor(70, 130, 180);
- surveyGetValueButton.setTextColor(255, 255, 255);
- surveyGetValueButton.onClick(function() {
- var q1Radio = q1Group.currentSelectedRadio();
- var q2Radio = q2Group.currentSelectedRadio();
- var q3Radio = q3Group.currentSelectedRadio();
-
- var q1Answer = q1Radio ? q1Radio.getText() : "未选择";
- var q2Answer = q2Radio ? q2Radio.getText() : "未选择";
- var q3Answer = q3Radio ? q3Radio.getText() : "未选择";
-
- var result = "当前值:\n" +
- "1. 满意度: " + q1Answer + "\n" +
- "2. 使用频率: " + q2Answer + "\n" +
- "3. 推荐意愿: " + q3Answer;
-
- printl(result);
- surveyResultLabel.setText(result);
- });
- surveyContainer.addView(surveyGetValueButton);
-
- comprehensivePage.addView(surveyContainer);
-
- // 方法总结
- var summarySection = new Horizontal();
- summarySection.setAlignment("center");
- summarySection.setBackgroundColor(220, 220, 225);
-
- var summarySectionLabel = new Label();
- summarySectionLabel.setText("方法总结");
- summarySectionLabel.setTextColor(60, 60, 60);
- summarySectionLabel.setFontSize(15);
- summarySection.addView(summarySectionLabel);
-
- comprehensivePage.addView(summarySection);
-
- var summaryContainer = new Vertical();
- summaryContainer.setSpacing(10);
- summaryContainer.setBackgroundColor(255, 255, 255);
-
- var summaryLabel = new Label();
- summaryLabel.setText("RadioButtonGroup核心方法总结:\n\n" +
- "1. setID(id) - 设置控件唯一标识符\n" +
- " 用途:为单选按钮组设置ID,便于通过config读取配置\n" +
- " 示例:rg.setID(\"abc\")\n\n" +
- "2. setDefultSelect(value) - 设置默认选中项\n" +
- " 用途:初始化时自动选中指定的选项\n" +
- " 示例:rg.setDefultSelect(\"男\")\n\n" +
- "3. currentSelectedRadio() - 获取当前选中项\n" +
- " 用途:获取用户当前选择的选项\n" +
- " 示例:rg.currentSelectedRadio()");
- summaryLabel.setTextColor(60, 60, 60);
- summaryLabel.setFontSize(11);
- summaryLabel.setBackgroundColor(245, 245, 255);
- summaryContainer.addView(summaryLabel);
-
- comprehensivePage.addView(summaryContainer);
-
- // ====================== 第五页:返回桌面 ======================
- var returnPage = new Vertical();
- returnPage.setSpacing(30);
- returnPage.setBackgroundColor(245, 248, 250);
- returnPage.setAlignment("center");
-
- var returnHeader = new Horizontal();
- returnHeader.setAlignment("center");
- returnHeader.setBackgroundColor(70, 130, 180);
-
- var returnHeaderLabel = new Label();
- returnHeaderLabel.setText("返回桌面");
- returnHeaderLabel.setTextColor(255, 255, 255);
- returnHeaderLabel.setFontSize(20);
- returnHeader.addView(returnHeaderLabel);
-
- returnPage.addView(returnHeader);
-
- var returnDesc = new Label();
- returnDesc.setText("点击下方按钮返回桌面");
- returnDesc.setTextColor(100, 100, 100);
- returnDesc.setFontSize(16);
- returnDesc.setTextAlignment("center");
- returnPage.addView(returnDesc);
-
- var returnButton = new Button();
- returnButton.setText("返回桌面");
- returnButton.setColor(255, 99, 71); // 番茄红色背景
- returnButton.setTextColor(255, 255, 255); // 白色文字
- returnButton.setWidth(180);
- returnButton.setHeight(50);
- returnButton.onClick(function() {
- printl("返回桌面按钮被点击");
- tab.dismiss();
- showToast("已返回桌面");
- });
- returnPage.addView(returnButton);
-
- // ====================== 添加所有页面到TabView ======================
- tab.addView(0, basicPage);
- tab.addView(1, advancedPage);
- tab.addView(2, dynamicPage);
- tab.addView(3, comprehensivePage);
- tab.addView(4, returnPage);
-
- printl("RadioButtonGroup示例视图添加完成");
- });
- // 显示提示信息函数
- function showToast(message) {
- printl("提示: " + message);
- }
- // 日志输出函数
- function printl(message) {
- console.log("[RadioButtonGroup Example] " + message);
- }
- // 代码说明:
- // 1. 本示例全面展示了RadioButtonGroup的三个核心方法:setID、setDefultSelect、currentSelectedRadio
- // 2. 第一页展示了基础方法的单独使用和代码示例
- // 3. 第二页展示了RadioButtonGroup在实际应用场景中的使用,如用户设置、表单选择等
- // 4. 第三页展示了动态创建和管理RadioButtonGroup的方法
- // 5. 第四页展示了综合应用场景,包括完整的问卷调查示例
- // 6. 代码遵循AIWROK平台的方法规范,使用ES5语法
- // 7. 所有示例都包含详细的注释和说明
- // 8. 可以根据实际需求修改和扩展功能
复制代码
| |  | |  |
|