 | |  |  | AIWROK软件苹查系统复选框用法
- // 🎨UI-复选框类[CheckBox]完整综合示例
- // 全面展示CheckBox的所有功能和方法,包含实际应用场景
- // 🍎交流QQ群711841924群一,苹果内测群,528816639
- printl("=== CheckBox复选框完整综合示例启动 ===");
- var tab = new TabView();
- tab.setTitles(["基础", "状态", "样式", "事件", "应用", "返回"]);
- tab.show(function() {
- printl("TabView界面加载完成");
-
- // ====================== 第一页:基础方法演示 ======================
- var basicPage = new Vertical();
- basicPage.setSpacing(5);
- basicPage.setBackgroundColor(255, 255, 255);
-
- var basicDesc = new Label();
- basicDesc.setText("展示CheckBox的四个核心基础方法:setText、getText、setID、setDefultSelect");
- basicDesc.setTextColor(50, 100, 150);
- basicDesc.setFontSize(14);
- basicDesc.setTextAlignment("center");
- basicPage.addView(basicDesc);
-
- // 方法1:setText设置复选框标题
- var section1 = new Horizontal();
- section1.setAlignment("center");
- section1.setBackgroundColor(220, 220, 225);
-
- var section1Label = new Label();
- section1Label.setText("方法1:setText设置复选框标题");
- section1Label.setTextColor(60, 60, 60);
- section1Label.setFontSize(15);
- section1.addView(section1Label);
-
- basicPage.addView(section1);
-
- var textDemoContainer = new Vertical();
- textDemoContainer.setSpacing(10);
- textDemoContainer.setBackgroundColor(255, 255, 255);
-
- var textDesc = new Label();
- textDesc.setText("为复选框设置显示的文本内容");
- textDesc.setTextColor(100, 100, 100);
- textDesc.setFontSize(12);
- textDemoContainer.addView(textDesc);
-
- var textCodeLabel = new Label();
- textCodeLabel.setText("var checkbox = new CheckBox();\ncheckbox.setText(\"选项1\");");
- textCodeLabel.setTextColor(50, 50, 150);
- textCodeLabel.setFontSize(11);
- textCodeLabel.setBackgroundColor(245, 245, 255);
- textDemoContainer.addView(textCodeLabel);
-
- var textDemoCheckbox = new CheckBox();
- textDemoCheckbox.setText("这是通过setText设置的标题");
- textDemoCheckbox.onClick(function() {
- var state = textDemoCheckbox.isSelect() ? "选中" : "未选中";
- printl("setText示例复选框被" + state);
- textResultLabel.setText("当前标题: " + textDemoCheckbox.getText() + " (" + state + ")");
- });
- textDemoContainer.addView(textDemoCheckbox);
-
- var textResultLabel = new Label();
- textResultLabel.setText("当前标题: " + textDemoCheckbox.getText());
- textResultLabel.setTextColor(0, 128, 0);
- textResultLabel.setFontSize(12);
- textDemoContainer.addView(textResultLabel);
-
- basicPage.addView(textDemoContainer);
-
- // 方法2:getText获取复选框标题
- var section2 = new Horizontal();
- section2.setAlignment("center");
- section2.setBackgroundColor(220, 220, 225);
-
- var section2Label = new Label();
- section2Label.setText("方法2:getText获取复选框标题");
- section2Label.setTextColor(60, 60, 60);
- section2Label.setFontSize(15);
- section2.addView(section2Label);
-
- basicPage.addView(section2);
-
- var getTextContainer = new Vertical();
- getTextContainer.setSpacing(10);
- getTextContainer.setBackgroundColor(255, 255, 255);
-
- var getTextDesc = new Label();
- getTextDesc.setText("获取复选框当前显示的文本内容");
- getTextDesc.setTextColor(100, 100, 100);
- getTextDesc.setFontSize(12);
- getTextContainer.addView(getTextDesc);
-
- var getTextCodeLabel = new Label();
- getTextCodeLabel.setText("var title = checkbox.getText();");
- getTextCodeLabel.setTextColor(50, 50, 150);
- getTextCodeLabel.setFontSize(11);
- getTextCodeLabel.setBackgroundColor(245, 245, 255);
- getTextContainer.addView(getTextCodeLabel);
-
- var getTextCheckbox = new CheckBox();
- getTextCheckbox.setText("示例复选框");
- getTextCheckbox.onClick(function() {
- var state = getTextCheckbox.isSelect() ? "选中" : "未选中";
- printl("getText示例复选框被" + state);
- getTextResultLabel.setText("获取到的标题: " + getTextCheckbox.getText() + " (" + state + ")");
- });
- getTextContainer.addView(getTextCheckbox);
-
- var getTextResultLabel = new Label();
- getTextResultLabel.setText("获取到的标题: ");
- getTextResultLabel.setTextColor(0, 128, 0);
- getTextResultLabel.setFontSize(12);
- getTextContainer.addView(getTextResultLabel);
-
- var getTextButton = new Button();
- getTextButton.setText("获取标题");
- getTextButton.setColor(70, 130, 180);
- getTextButton.setTextColor(255, 255, 255);
- getTextButton.onClick(function() {
- var title = getTextCheckbox.getText();
- printl("获取到的标题: " + title);
- getTextResultLabel.setText("获取到的标题: " + title);
- });
- getTextContainer.addView(getTextButton);
-
- basicPage.addView(getTextContainer);
-
- // 方法3:setID设置控件ID
- var section3 = new Horizontal();
- section3.setAlignment("center");
- section3.setBackgroundColor(220, 220, 225);
-
- var section3Label = new Label();
- section3Label.setText("方法3:setID设置控件ID");
- section3Label.setTextColor(60, 60, 60);
- section3Label.setFontSize(15);
- section3.addView(section3Label);
-
- basicPage.addView(section3);
-
- 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 checkbox = new CheckBox();\ncheckbox.setID(\"checkbox123\");\n// 读取使用\nconfig.getConfig(\"checkbox123\");");
- idCodeLabel.setTextColor(50, 50, 150);
- idCodeLabel.setFontSize(11);
- idCodeLabel.setBackgroundColor(245, 245, 255);
- idDemoContainer.addView(idCodeLabel);
-
- var idDemoCheckbox = new CheckBox();
- idDemoCheckbox.setText("已设置ID的复选框");
- idDemoCheckbox.setID("demo_checkbox_id_1");
- idDemoCheckbox.onClick(function() {
- var state = idDemoCheckbox.isSelect() ? "选中" : "未选中";
- printl("setID示例复选框被" + state);
- idResultLabel.setText("控件ID已设置为:demo_checkbox_id_1 (" + state + ")");
- });
- idDemoContainer.addView(idDemoCheckbox);
-
- var idResultLabel = new Label();
- idResultLabel.setText("控件ID已设置为:demo_checkbox_id_1");
- idResultLabel.setTextColor(0, 128, 0);
- idResultLabel.setFontSize(12);
- idDemoContainer.addView(idResultLabel);
-
- basicPage.addView(idDemoContainer);
-
- // 方法4:setDefultSelect设置默认值
- var section4 = new Horizontal();
- section4.setAlignment("center");
- section4.setBackgroundColor(220, 220, 225);
-
- var section4Label = new Label();
- section4Label.setText("方法4:setDefultSelect设置默认值");
- section4Label.setTextColor(60, 60, 60);
- section4Label.setFontSize(15);
- section4.addView(section4Label);
-
- basicPage.addView(section4);
-
- var defaultSelectContainer = new Vertical();
- defaultSelectContainer.setSpacing(10);
- defaultSelectContainer.setBackgroundColor(255, 255, 255);
-
- var defaultDesc = new Label();
- defaultDesc.setText("设置复选框的默认选中状态");
- defaultDesc.setTextColor(100, 100, 100);
- defaultDesc.setFontSize(12);
- defaultSelectContainer.addView(defaultDesc);
-
- var defaultCodeLabel = new Label();
- defaultCodeLabel.setText("var checkbox = new CheckBox();\ncheckbox.setID(\"checkbox123\");\ncheckbox.setDefultSelect();");
- defaultCodeLabel.setTextColor(50, 50, 150);
- defaultCodeLabel.setFontSize(11);
- defaultCodeLabel.setBackgroundColor(245, 245, 255);
- defaultSelectContainer.addView(defaultCodeLabel);
-
- var defaultCheckbox = new CheckBox();
- defaultCheckbox.setText("默认选中的复选框");
- defaultCheckbox.setID("default_checkbox");
- defaultCheckbox.setDefultSelect();
- defaultCheckbox.onClick(function() {
- var state = defaultCheckbox.isSelect() ? "已选中" : "未选中";
- printl("setDefultSelect示例复选框状态: " + state);
- defaultResultLabel.setText("默认选中状态: " + state);
- });
- defaultSelectContainer.addView(defaultCheckbox);
-
- var defaultResultLabel = new Label();
- defaultResultLabel.setText("默认选中状态: " + (defaultCheckbox.isSelect() ? "已选中" : "未选中"));
- defaultResultLabel.setTextColor(0, 128, 0);
- defaultResultLabel.setFontSize(12);
- defaultSelectContainer.addView(defaultResultLabel);
-
- basicPage.addView(defaultSelectContainer);
-
- tab.addView(0, basicPage);
-
- // ====================== 第二页:状态管理方法 ======================
- var statePage = new Vertical();
- statePage.setSpacing(5);
- statePage.setBackgroundColor(255, 255, 255);
-
- var stateDesc = new Label();
- stateDesc.setText("展示CheckBox的三个状态管理方法:select、deselect、isSelect");
- stateDesc.setTextColor(50, 100, 150);
- stateDesc.setFontSize(14);
- stateDesc.setTextAlignment("center");
- statePage.addView(stateDesc);
-
- // 方法5:select选中复选框
- var section5 = new Horizontal();
- section5.setAlignment("center");
- section5.setBackgroundColor(220, 220, 225);
-
- var section5Label = new Label();
- section5Label.setText("方法5:select选中复选框");
- section5Label.setTextColor(60, 60, 60);
- section5Label.setFontSize(15);
- section5.addView(section5Label);
-
- statePage.addView(section5);
-
- var selectDemoContainer = new Vertical();
- selectDemoContainer.setSpacing(10);
- selectDemoContainer.setBackgroundColor(255, 255, 255);
-
- var selectDesc = new Label();
- selectDesc.setText("手动选中复选框");
- selectDesc.setTextColor(100, 100, 100);
- selectDesc.setFontSize(12);
- selectDemoContainer.addView(selectDesc);
-
- var selectCodeLabel = new Label();
- selectCodeLabel.setText("var checkbox = new CheckBox();\ncheckbox.select();");
- selectCodeLabel.setTextColor(50, 50, 150);
- selectCodeLabel.setFontSize(11);
- selectCodeLabel.setBackgroundColor(245, 245, 255);
- selectDemoContainer.addView(selectCodeLabel);
-
- var selectCheckbox = new CheckBox();
- selectCheckbox.setText("点击下方按钮选中我");
- selectCheckbox.onClick(function() {
- var state = selectCheckbox.isSelect() ? "已选中" : "未选中";
- printl("select示例复选框被" + state);
- selectStatusLabel.setText("当前状态: " + state);
- });
- selectDemoContainer.addView(selectCheckbox);
-
- var selectButton = new Button();
- selectButton.setText("选中复选框");
- selectButton.setColor(0, 128, 0);
- selectButton.setTextColor(255, 255, 255);
- selectButton.onClick(function() {
- selectCheckbox.select();
- printl("复选框已选中");
- selectStatusLabel.setText("当前状态: 已选中");
- });
- selectDemoContainer.addView(selectButton);
-
- statePage.addView(selectDemoContainer);
-
- // 方法6:deselect取消选中复选框
- var section6 = new Horizontal();
- section6.setAlignment("center");
- section6.setBackgroundColor(220, 220, 225);
-
- var section6Label = new Label();
- section6Label.setText("方法6:deselect取消选中复选框");
- section6Label.setTextColor(60, 60, 60);
- section6Label.setFontSize(15);
- section6.addView(section6Label);
-
- statePage.addView(section6);
-
- var deselectDemoContainer = new Vertical();
- deselectDemoContainer.setSpacing(10);
- deselectDemoContainer.setBackgroundColor(255, 255, 255);
-
- var deselectDesc = new Label();
- deselectDesc.setText("手动取消选中复选框");
- deselectDesc.setTextColor(100, 100, 100);
- deselectDesc.setFontSize(12);
- deselectDemoContainer.addView(deselectDesc);
-
- var deselectCodeLabel = new Label();
- deselectCodeLabel.setText("var checkbox = new CheckBox();\ncheckbox.deselect();");
- deselectCodeLabel.setTextColor(50, 50, 150);
- deselectCodeLabel.setFontSize(11);
- deselectCodeLabel.setBackgroundColor(245, 245, 255);
- deselectDemoContainer.addView(deselectCodeLabel);
-
- var deselectCheckbox = new CheckBox();
- deselectCheckbox.setText("点击下方按钮取消选中");
- deselectCheckbox.setDefultSelect();
- deselectCheckbox.onClick(function() {
- var state = deselectCheckbox.isSelect() ? "已选中" : "未选中";
- printl("deselect示例复选框被" + state);
- selectStatusLabel.setText("当前状态: " + state);
- });
- deselectDemoContainer.addView(deselectCheckbox);
-
- var deselectButton = new Button();
- deselectButton.setText("取消选中");
- deselectButton.setColor(220, 20, 60);
- deselectButton.setTextColor(255, 255, 255);
- deselectButton.onClick(function() {
- deselectCheckbox.deselect();
- printl("复选框已取消选中");
- selectStatusLabel.setText("当前状态: 未选中");
- });
- deselectDemoContainer.addView(deselectButton);
-
- statePage.addView(deselectDemoContainer);
-
- // 方法7:isSelect获取选中状态
- var section7 = new Horizontal();
- section7.setAlignment("center");
- section7.setBackgroundColor(220, 220, 225);
-
- var section7Label = new Label();
- section7Label.setText("方法7:isSelect获取选中状态");
- section7Label.setTextColor(60, 60, 60);
- section7Label.setFontSize(15);
- section7.addView(section7Label);
-
- statePage.addView(section7);
-
- var isSelectContainer = new Vertical();
- isSelectContainer.setSpacing(10);
- isSelectContainer.setBackgroundColor(255, 255, 255);
-
- var isSelectDesc = new Label();
- isSelectDesc.setText("获取复选框当前的选中状态,返回布尔值");
- isSelectDesc.setTextColor(100, 100, 100);
- isSelectDesc.setFontSize(12);
- isSelectContainer.addView(isSelectDesc);
-
- var isSelectCodeLabel = new Label();
- isSelectCodeLabel.setText("var isSelected = checkbox.isSelect();\n// 返回 true 或 false");
- isSelectCodeLabel.setTextColor(50, 50, 150);
- isSelectCodeLabel.setFontSize(11);
- isSelectCodeLabel.setBackgroundColor(245, 245, 255);
- isSelectContainer.addView(isSelectCodeLabel);
-
- var isSelectCheckbox = new CheckBox();
- isSelectCheckbox.setText("状态检查复选框");
- isSelectCheckbox.onClick(function() {
- var state = isSelectCheckbox.isSelect() ? "已选中" : "未选中";
- printl("isSelect示例复选框被" + state);
- selectStatusLabel.setText("当前状态: " + state);
- });
- isSelectContainer.addView(isSelectCheckbox);
-
- var selectStatusLabel = new Label();
- selectStatusLabel.setText("当前状态: 未选中");
- selectStatusLabel.setTextColor(0, 128, 0);
- selectStatusLabel.setFontSize(12);
- isSelectContainer.addView(selectStatusLabel);
-
- var checkStateButton = new Button();
- checkStateButton.setText("检查状态");
- checkStateButton.setColor(70, 130, 180);
- checkStateButton.setTextColor(255, 255, 255);
- checkStateButton.onClick(function() {
- var isSelected = isSelectCheckbox.isSelect();
- printl("复选框选中状态: " + (isSelected ? "true" : "false"));
- selectStatusLabel.setText("当前状态: " + (isSelected ? "已选中" : "未选中"));
- });
- isSelectContainer.addView(checkStateButton);
-
- statePage.addView(isSelectContainer);
-
- tab.addView(1, statePage);
-
- // ====================== 第三页:样式设置方法 ======================
- var stylePage = new Vertical();
- stylePage.setSpacing(5);
- stylePage.setBackgroundColor(255, 255, 255);
-
- var styleDesc = new Label();
- styleDesc.setText("展示CheckBox的样式设置方法:setColor、setWidth、setHeight");
- styleDesc.setTextColor(50, 100, 150);
- styleDesc.setFontSize(14);
- styleDesc.setTextAlignment("center");
- stylePage.addView(styleDesc);
-
- // 方法8:setColor设置复选框颜色
- var section8 = new Horizontal();
- section8.setAlignment("center");
- section8.setBackgroundColor(220, 220, 225);
-
- var section8Label = new Label();
- section8Label.setText("方法8:setColor设置复选框颜色");
- section8Label.setTextColor(60, 60, 60);
- section8Label.setFontSize(15);
- section8.addView(section8Label);
-
- stylePage.addView(section8);
-
- var colorDemoContainer = new Vertical();
- colorDemoContainer.setSpacing(10);
- colorDemoContainer.setBackgroundColor(255, 255, 255);
-
- var colorDesc = new Label();
- colorDesc.setText("设置复选框的颜色,使用RGB格式");
- colorDesc.setTextColor(100, 100, 100);
- colorDesc.setFontSize(12);
- colorDemoContainer.addView(colorDesc);
-
- var colorCodeLabel = new Label();
- colorCodeLabel.setText("var checkbox = new CheckBox();\ncheckbox.setColor(255, 0, 0); // 红色\ncheckbox.setColor(0, 255, 0); // 绿色\ncheckbox.setColor(0, 0, 255); // 蓝色");
- colorCodeLabel.setTextColor(50, 50, 150);
- colorCodeLabel.setFontSize(11);
- colorCodeLabel.setBackgroundColor(245, 245, 255);
- colorDemoContainer.addView(colorCodeLabel);
-
- var redCheckbox = new CheckBox();
- redCheckbox.setText("红色复选框");
- redCheckbox.setColor(255, 0, 0);
- redCheckbox.onClick(function() {
- var state = redCheckbox.isSelect() ? "选中" : "未选中";
- printl("红色复选框被" + state);
- });
- colorDemoContainer.addView(redCheckbox);
-
- var greenCheckbox = new CheckBox();
- greenCheckbox.setText("绿色复选框");
- greenCheckbox.setColor(0, 128, 0);
- greenCheckbox.onClick(function() {
- var state = greenCheckbox.isSelect() ? "选中" : "未选中";
- printl("绿色复选框被" + state);
- });
- colorDemoContainer.addView(greenCheckbox);
-
- var blueCheckbox = new CheckBox();
- blueCheckbox.setText("蓝色复选框");
- blueCheckbox.setColor(0, 0, 255);
- blueCheckbox.onClick(function() {
- var state = blueCheckbox.isSelect() ? "选中" : "未选中";
- printl("蓝色复选框被" + state);
- });
- colorDemoContainer.addView(blueCheckbox);
-
- var purpleCheckbox = new CheckBox();
- purpleCheckbox.setText("紫色复选框");
- purpleCheckbox.setColor(128, 0, 128);
- purpleCheckbox.onClick(function() {
- var state = purpleCheckbox.isSelect() ? "选中" : "未选中";
- printl("紫色复选框被" + state);
- });
- colorDemoContainer.addView(purpleCheckbox);
-
- stylePage.addView(colorDemoContainer);
-
- // 方法9:setWidth设置控件宽度
- var section9 = new Horizontal();
- section9.setAlignment("center");
- section9.setBackgroundColor(220, 220, 225);
-
- var section9Label = new Label();
- section9Label.setText("方法9:setWidth设置控件宽度");
- section9Label.setTextColor(60, 60, 60);
- section9Label.setFontSize(15);
- section9.addView(section9Label);
-
- stylePage.addView(section9);
-
- var widthDemoContainer = new Vertical();
- widthDemoContainer.setSpacing(10);
- widthDemoContainer.setBackgroundColor(255, 255, 255);
-
- var widthDesc = new Label();
- widthDesc.setText("设置复选框的宽度(单位:像素)");
- widthDesc.setTextColor(100, 100, 100);
- widthDesc.setFontSize(12);
- widthDemoContainer.addView(widthDesc);
-
- var widthCodeLabel = new Label();
- widthCodeLabel.setText("var checkbox = new CheckBox();\ncheckbox.setWidth(50); // 设置宽度为50像素");
- widthCodeLabel.setTextColor(50, 50, 150);
- widthCodeLabel.setFontSize(11);
- widthCodeLabel.setBackgroundColor(245, 245, 255);
- widthDemoContainer.addView(widthCodeLabel);
-
- var widthCheckbox1 = new CheckBox();
- widthCheckbox1.setText("宽度100");
- widthCheckbox1.setWidth(100);
- widthCheckbox1.onClick(function() {
- var state = widthCheckbox1.isSelect() ? "选中" : "未选中";
- printl("宽度100复选框被" + state);
- });
- widthDemoContainer.addView(widthCheckbox1);
-
- var widthCheckbox2 = new CheckBox();
- widthCheckbox2.setText("宽度200");
- widthCheckbox2.setWidth(200);
- widthCheckbox2.onClick(function() {
- var state = widthCheckbox2.isSelect() ? "选中" : "未选中";
- printl("宽度200复选框被" + state);
- });
- widthDemoContainer.addView(widthCheckbox2);
-
- var widthCheckbox3 = new CheckBox();
- widthCheckbox3.setText("宽度300");
- widthCheckbox3.setWidth(300);
- widthCheckbox3.onClick(function() {
- var state = widthCheckbox3.isSelect() ? "选中" : "未选中";
- printl("宽度300复选框被" + state);
- });
- widthDemoContainer.addView(widthCheckbox3);
-
- stylePage.addView(widthDemoContainer);
-
- // 方法10:setHeight设置控件高度
- var section10 = new Horizontal();
- section10.setAlignment("center");
- section10.setBackgroundColor(220, 220, 225);
-
- var section10Label = new Label();
- section10Label.setText("方法10:setHeight设置控件高度");
- section10Label.setTextColor(60, 60, 60);
- section10Label.setFontSize(15);
- section10.addView(section10Label);
-
- stylePage.addView(section10);
-
- var heightDemoContainer = new Vertical();
- heightDemoContainer.setSpacing(10);
- heightDemoContainer.setBackgroundColor(255, 255, 255);
-
- var heightDesc = new Label();
- heightDesc.setText("设置复选框的高度(单位:像素)");
- heightDesc.setTextColor(100, 100, 100);
- heightDesc.setFontSize(12);
- heightDemoContainer.addView(heightDesc);
-
- var heightCodeLabel = new Label();
- heightCodeLabel.setText("var checkbox = new CheckBox();\ncheckbox.setHeight(40); // 设置高度为40像素");
- heightCodeLabel.setTextColor(50, 50, 150);
- heightCodeLabel.setFontSize(11);
- heightCodeLabel.setBackgroundColor(245, 245, 255);
- heightDemoContainer.addView(heightCodeLabel);
-
- var heightCheckbox1 = new CheckBox();
- heightCheckbox1.setText("高度40");
- heightCheckbox1.setHeight(40);
- heightCheckbox1.onClick(function() {
- var state = heightCheckbox1.isSelect() ? "选中" : "未选中";
- printl("高度40复选框被" + state);
- });
- heightDemoContainer.addView(heightCheckbox1);
-
- var heightCheckbox2 = new CheckBox();
- heightCheckbox2.setText("高度50");
- heightCheckbox2.setHeight(50);
- heightCheckbox2.onClick(function() {
- var state = heightCheckbox2.isSelect() ? "选中" : "未选中";
- printl("高度50复选框被" + state);
- });
- heightDemoContainer.addView(heightCheckbox2);
-
- var heightCheckbox3 = new CheckBox();
- heightCheckbox3.setText("高度60");
- heightCheckbox3.setHeight(60);
- heightCheckbox3.onClick(function() {
- var state = heightCheckbox3.isSelect() ? "选中" : "未选中";
- printl("高度60复选框被" + state);
- });
- heightDemoContainer.addView(heightCheckbox3);
-
- stylePage.addView(heightDemoContainer);
-
- // 按钮连动功能
- var section12 = new Horizontal();
- section12.setAlignment("center");
- section12.setBackgroundColor(220, 220, 225);
-
- var section12Label = new Label();
- section12Label.setText("按钮连动演示");
- section12Label.setTextColor(60, 60, 60);
- section12Label.setFontSize(15);
- section12.addView(section12Label);
-
- stylePage.addView(section12);
-
- var linkageContainer = new Vertical();
- linkageContainer.setSpacing(10);
- linkageContainer.setBackgroundColor(255, 255, 255);
-
- var linkageDesc = new Label();
- linkageDesc.setText("点击下方按钮控制复选框的状态");
- linkageDesc.setTextColor(100, 100, 100);
- linkageDesc.setFontSize(12);
- linkageContainer.addView(linkageDesc);
-
- var linkageCheckbox1 = new CheckBox();
- linkageCheckbox1.setText("联动复选框1");
- linkageCheckbox1.setColor(255, 165, 0);
- linkageContainer.addView(linkageCheckbox1);
-
- var linkageCheckbox2 = new CheckBox();
- linkageCheckbox2.setText("联动复选框2");
- linkageCheckbox2.setColor(255, 165, 0);
- linkageContainer.addView(linkageCheckbox2);
-
- var linkageCheckbox3 = new CheckBox();
- linkageCheckbox3.setText("联动复选框3");
- linkageCheckbox3.setColor(255, 165, 0);
- linkageContainer.addView(linkageCheckbox3);
-
- var linkageStatusLabel = new Label();
- linkageStatusLabel.setText("状态:未选择");
- linkageStatusLabel.setTextColor(0, 128, 0);
- linkageStatusLabel.setFontSize(12);
-
- var buttonContainer = new Horizontal();
- buttonContainer.setSpacing(10);
-
- var selectAllButton = new Button();
- selectAllButton.setText("全选");
- selectAllButton.setColor(0, 128, 0);
- selectAllButton.setTextColor(255, 255, 255);
- selectAllButton.setWidth(80);
- selectAllButton.onClick(function() {
- linkageCheckbox1.select();
- linkageCheckbox2.select();
- linkageCheckbox3.select();
- printl("已全选所有复选框");
- linkageStatusLabel.setText("状态:全选");
- });
- buttonContainer.addView(selectAllButton);
-
- var deselectAllButton = new Button();
- deselectAllButton.setText("全不选");
- deselectAllButton.setColor(220, 20, 60);
- deselectAllButton.setTextColor(255, 255, 255);
- deselectAllButton.setWidth(80);
- deselectAllButton.onClick(function() {
- linkageCheckbox1.deselect();
- linkageCheckbox2.deselect();
- linkageCheckbox3.deselect();
- printl("已取消所有复选框选择");
- linkageStatusLabel.setText("状态:全不选");
- });
- buttonContainer.addView(deselectAllButton);
-
- var reverseButton = new Button();
- reverseButton.setText("反选");
- reverseButton.setColor(70, 130, 180);
- reverseButton.setTextColor(255, 255, 255);
- reverseButton.setWidth(80);
- reverseButton.onClick(function() {
- if (linkageCheckbox1.isSelect()) {
- linkageCheckbox1.deselect();
- } else {
- linkageCheckbox1.select();
- }
- if (linkageCheckbox2.isSelect()) {
- linkageCheckbox2.deselect();
- } else {
- linkageCheckbox2.select();
- }
- if (linkageCheckbox3.isSelect()) {
- linkageCheckbox3.deselect();
- } else {
- linkageCheckbox3.select();
- }
- printl("已反选所有复选框");
- var selectedCount = 0;
- if (linkageCheckbox1.isSelect()) selectedCount++;
- if (linkageCheckbox2.isSelect()) selectedCount++;
- if (linkageCheckbox3.isSelect()) selectedCount++;
- linkageStatusLabel.setText("状态:已选中" + selectedCount + "个");
- });
- buttonContainer.addView(reverseButton);
-
- linkageContainer.addView(buttonContainer);
- linkageContainer.addView(linkageStatusLabel);
-
- stylePage.addView(linkageContainer);
-
- tab.addView(2, stylePage);
-
- // ====================== 第四页:事件处理方法 ======================
- var eventPage = new Vertical();
- eventPage.setSpacing(5);
- eventPage.setBackgroundColor(255, 255, 255);
-
- var eventDesc = new Label();
- eventDesc.setText("展示CheckBox的事件处理方法:onClick");
- eventDesc.setTextColor(50, 100, 150);
- eventDesc.setFontSize(14);
- eventDesc.setTextAlignment("center");
- eventPage.addView(eventDesc);
-
- // 方法11:onClick按钮点击事件
- var section11 = new Horizontal();
- section11.setAlignment("center");
- section11.setBackgroundColor(220, 220, 225);
-
- var section11Label = new Label();
- section11Label.setText("方法11:onClick点击事件");
- section11Label.setTextColor(60, 60, 60);
- section11Label.setFontSize(15);
- section11.addView(section11Label);
-
- eventPage.addView(section11);
-
- var onClickDemoContainer = new Vertical();
- onClickDemoContainer.setSpacing(10);
- onClickDemoContainer.setBackgroundColor(255, 255, 255);
-
- var onClickDesc = new Label();
- onClickDesc.setText("为复选框添加点击事件监听器");
- onClickDesc.setTextColor(100, 100, 100);
- onClickDesc.setFontSize(12);
- onClickDemoContainer.addView(onClickDesc);
-
- var onClickCodeLabel = new Label();
- onClickCodeLabel.setText("var checkbox = new CheckBox();\ncheckbox.onClick(() => {\n printl(\"被点击了\");\n});");
- onClickCodeLabel.setTextColor(50, 50, 150);
- onClickCodeLabel.setFontSize(11);
- onClickCodeLabel.setBackgroundColor(245, 245, 255);
- onClickDemoContainer.addView(onClickCodeLabel);
-
- var eventLogLabel = new Label();
- eventLogLabel.setText("事件日志:等待操作...");
- eventLogLabel.setTextColor(100, 100, 100);
- eventLogLabel.setFontSize(12);
- eventLogLabel.setBackgroundColor(245, 245, 245);
- onClickDemoContainer.addView(eventLogLabel);
-
- var eventCheckbox1 = new CheckBox();
- eventCheckbox1.setText("点击我会触发事件");
- eventCheckbox1.onClick(function() {
- var state = eventCheckbox1.isSelect() ? "选中" : "取消选中";
- printl("复选框1被" + state);
- eventLogLabel.setText("事件日志:复选框1被" + state);
- });
- onClickDemoContainer.addView(eventCheckbox1);
-
- var eventCheckbox2 = new CheckBox();
- eventCheckbox2.setText("点击我会显示状态");
- eventCheckbox2.setColor(0, 128, 0);
- eventCheckbox2.onClick(function() {
- var state = eventCheckbox2.isSelect();
- printl("复选框2当前状态: " + (state ? "true" : "false"));
- eventLogLabel.setText("事件日志:复选框2状态=" + (state ? "true" : "false"));
- });
- onClickDemoContainer.addView(eventCheckbox2);
-
- var eventCheckbox3 = new CheckBox();
- eventCheckbox3.setText("点击我会计数");
- eventCheckbox3.setColor(0, 0, 255);
- var clickCount = 0;
- eventCheckbox3.onClick(function() {
- clickCount++;
- printl("复选框3被点击次数: " + clickCount);
- eventLogLabel.setText("事件日志:复选框3点击次数=" + clickCount);
- });
- onClickDemoContainer.addView(eventCheckbox3);
-
- eventPage.addView(onClickDemoContainer);
-
- tab.addView(3, eventPage);
-
- // ====================== 第五页:综合应用示例 ======================
- var appPage = new Vertical();
- appPage.setSpacing(5);
- appPage.setBackgroundColor(255, 255, 255);
-
- var appDesc = new Label();
- appDesc.setText("CheckBox在实际应用中的综合示例");
- appDesc.setTextColor(50, 100, 150);
- appDesc.setFontSize(16);
- appDesc.setTextAlignment("center");
- appPage.addView(appDesc);
-
- // 应用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);
-
- appPage.addView(appSection1);
-
- var taskListContainer = new Vertical();
- taskListContainer.setSpacing(8);
- taskListContainer.setBackgroundColor(255, 255, 255);
-
- var taskListTitle = new Label();
- taskListTitle.setText("今日任务清单");
- taskListTitle.setTextColor(50, 50, 150);
- taskListTitle.setFontSize(14);
- taskListContainer.addView(taskListTitle);
-
- var task1 = new CheckBox();
- task1.setText("完成项目文档编写");
- task1.setColor(0, 128, 0);
- task1.onClick(function() {
- var state = task1.isSelect() ? "已完成" : "未完成";
- printl("任务1:" + state);
- });
- taskListContainer.addView(task1);
-
- var task2 = new CheckBox();
- task2.setText("代码审查");
- task2.setColor(0, 128, 0);
- task2.onClick(function() {
- var state = task2.isSelect() ? "已完成" : "未完成";
- printl("任务2:" + state);
- });
- taskListContainer.addView(task2);
-
- var task3 = new CheckBox();
- task3.setText("修复已知Bug");
- task3.setColor(0, 128, 0);
- task3.onClick(function() {
- var state = task3.isSelect() ? "已完成" : "未完成";
- printl("任务3:" + state);
- });
- taskListContainer.addView(task3);
-
- var task4 = new CheckBox();
- task4.setText("单元测试");
- task4.setColor(0, 128, 0);
- task4.onClick(function() {
- var state = task4.isSelect() ? "已完成" : "未完成";
- printl("任务4:" + state);
- });
- taskListContainer.addView(task4);
-
- var task5 = new CheckBox();
- task5.setText("部署上线");
- task5.setColor(0, 128, 0);
- task5.onClick(function() {
- var state = task5.isSelect() ? "已完成" : "未完成";
- printl("任务5:" + state);
- });
- taskListContainer.addView(task5);
-
- var checkTasksButton = new Button();
- checkTasksButton.setText("检查任务完成情况");
- checkTasksButton.setColor(70, 130, 180);
- checkTasksButton.setTextColor(255, 255, 255);
- checkTasksButton.onClick(function() {
- var completed = 0;
- var total = 5;
- if (task1.isSelect()) completed++;
- if (task2.isSelect()) completed++;
- if (task3.isSelect()) completed++;
- if (task4.isSelect()) completed++;
- if (task5.isSelect()) completed++;
-
- var percentage = Math.round((completed / total) * 100);
- printl("任务完成情况: " + completed + "/" + total + " (" + percentage + "%)");
- taskStatusLabel.setText("完成进度: " + completed + "/" + total + " (" + percentage + "%)");
- });
- taskListContainer.addView(checkTasksButton);
-
- var taskStatusLabel = new Label();
- taskStatusLabel.setText("完成进度: 0/5 (0%)");
- taskStatusLabel.setTextColor(0, 128, 0);
- taskStatusLabel.setFontSize(12);
- taskListContainer.addView(taskStatusLabel);
-
- appPage.addView(taskListContainer);
-
- // 应用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);
-
- appPage.addView(appSection2);
-
- var permissionContainer = new Vertical();
- permissionContainer.setSpacing(8);
- permissionContainer.setBackgroundColor(255, 255, 255);
-
- var permissionTitle = new Label();
- permissionTitle.setText("应用权限配置");
- permissionTitle.setTextColor(50, 50, 150);
- permissionTitle.setFontSize(14);
- permissionContainer.addView(permissionTitle);
-
- var permCamera = new CheckBox();
- permCamera.setText("相机权限");
- permCamera.setID("permission_camera");
- permCamera.setDefultSelect();
- permCamera.onClick(function() {
- var state = permCamera.isSelect() ? "已授权" : "未授权";
- printl("相机权限:" + state);
- });
- permissionContainer.addView(permCamera);
-
- var permMicrophone = new CheckBox();
- permMicrophone.setText("麦克风权限");
- permMicrophone.setID("permission_microphone");
- permMicrophone.setDefultSelect();
- permMicrophone.onClick(function() {
- var state = permMicrophone.isSelect() ? "已授权" : "未授权";
- printl("麦克风权限:" + state);
- });
- permissionContainer.addView(permMicrophone);
-
- var permLocation = new CheckBox();
- permLocation.setText("位置权限");
- permLocation.setID("permission_location");
- permLocation.onClick(function() {
- var state = permLocation.isSelect() ? "已授权" : "未授权";
- printl("位置权限:" + state);
- });
- permissionContainer.addView(permLocation);
-
- var permContacts = new CheckBox();
- permContacts.setText("通讯录权限");
- permContacts.setID("permission_contacts");
- permContacts.onClick(function() {
- var state = permContacts.isSelect() ? "已授权" : "未授权";
- printl("通讯录权限:" + state);
- });
- permissionContainer.addView(permContacts);
-
- var permStorage = new CheckBox();
- permStorage.setText("存储权限");
- permStorage.setID("permission_storage");
- permStorage.setDefultSelect();
- permStorage.onClick(function() {
- var state = permStorage.isSelect() ? "已授权" : "未授权";
- printl("存储权限:" + state);
- });
- permissionContainer.addView(permStorage);
-
- var savePermissionButton = new Button();
- savePermissionButton.setText("保存权限配置");
- savePermissionButton.setColor(0, 128, 0);
- savePermissionButton.setTextColor(255, 255, 255);
- savePermissionButton.onClick(function() {
- var permissions = [];
- if (permCamera.isSelect()) permissions.push("相机");
- if (permMicrophone.isSelect()) permissions.push("麦克风");
- if (permLocation.isSelect()) permissions.push("位置");
- if (permContacts.isSelect()) permissions.push("通讯录");
- if (permStorage.isSelect()) permissions.push("存储");
-
- var permText = permissions.length > 0 ? permissions.join("、") : "无";
- printl("已授权权限: " + permText);
- permissionStatusLabel.setText("已授权: " + permText);
- });
- permissionContainer.addView(savePermissionButton);
-
- var permissionStatusLabel = new Label();
- permissionStatusLabel.setText("已授权: 相机、麦克风、存储");
- permissionStatusLabel.setTextColor(0, 128, 0);
- permissionStatusLabel.setFontSize(12);
- permissionContainer.addView(permissionStatusLabel);
-
- appPage.addView(permissionContainer);
-
- // 应用3:多选列表
- var appSection3 = new Horizontal();
- appSection3.setAlignment("center");
- appSection3.setBackgroundColor(220, 220, 225);
-
- var appSection3Label = new Label();
- appSection3Label.setText("应用3:兴趣爱好选择");
- appSection3Label.setTextColor(60, 60, 60);
- appSection3Label.setFontSize(15);
- appSection3.addView(appSection3Label);
-
- appPage.addView(appSection3);
-
- var hobbyContainer = new Vertical();
- hobbyContainer.setSpacing(8);
- hobbyContainer.setBackgroundColor(255, 255, 255);
-
- var hobbyTitle = new Label();
- hobbyTitle.setText("请选择您的兴趣爱好(可多选)");
- hobbyTitle.setTextColor(50, 50, 150);
- hobbyTitle.setFontSize(14);
- hobbyContainer.addView(hobbyTitle);
-
- var hobbies = [];
-
- var hobby1 = new CheckBox();
- hobby1.setText("阅读");
- hobby1.setColor(128, 0, 128);
- hobby1.onClick(function() {
- updateHobbyList();
- });
- hobbyContainer.addView(hobby1);
-
- var hobby2 = new CheckBox();
- hobby2.setText("运动");
- hobby2.setColor(128, 0, 128);
- hobby2.onClick(function() {
- updateHobbyList();
- });
- hobbyContainer.addView(hobby2);
-
- var hobby3 = new CheckBox();
- hobby3.setText("音乐");
- hobby3.setColor(128, 0, 128);
- hobby3.onClick(function() {
- updateHobbyList();
- });
- hobbyContainer.addView(hobby3);
-
- var hobby4 = new CheckBox();
- hobby4.setText("旅行");
- hobby4.setColor(128, 0, 128);
- hobby4.onClick(function() {
- updateHobbyList();
- });
- hobbyContainer.addView(hobby4);
-
- var hobby5 = new CheckBox();
- hobby5.setText("摄影");
- hobby5.setColor(128, 0, 128);
- hobby5.onClick(function() {
- updateHobbyList();
- });
- hobbyContainer.addView(hobby5);
-
- var hobby6 = new CheckBox();
- hobby6.setText("游戏");
- hobby6.setColor(128, 0, 128);
- hobby6.onClick(function() {
- updateHobbyList();
- });
- hobbyContainer.addView(hobby6);
-
- function updateHobbyList() {
- hobbies = [];
- if (hobby1.isSelect()) hobbies.push("阅读");
- if (hobby2.isSelect()) hobbies.push("运动");
- if (hobby3.isSelect()) hobbies.push("音乐");
- if (hobby4.isSelect()) hobbies.push("旅行");
- if (hobby5.isSelect()) hobbies.push("摄影");
- if (hobby6.isSelect()) hobbies.push("游戏");
-
- var hobbyText = hobbies.length > 0 ? hobbies.join("、") : "未选择";
- hobbyStatusLabel.setText("已选择: " + hobbyText);
- printl("兴趣爱好: " + hobbyText);
- }
-
- var hobbyStatusLabel = new Label();
- hobbyStatusLabel.setText("已选择: 未选择");
- hobbyStatusLabel.setTextColor(0, 128, 0);
- hobbyStatusLabel.setFontSize(12);
- hobbyContainer.addView(hobbyStatusLabel);
-
- appPage.addView(hobbyContainer);
-
- tab.addView(4, appPage);
-
- // ====================== 第六页:返回按钮 ======================
- var returnPage = new Vertical();
- returnPage.setSpacing(20);
- returnPage.setBackgroundColor(255, 255, 255);
-
- var returnTitle = new Label();
- returnTitle.setText("CheckBox方法总结");
- returnTitle.setTextColor(50, 50, 150);
- returnTitle.setFontSize(20);
- returnTitle.setTextAlignment("center");
- returnPage.addView(returnTitle);
-
- var summaryContainer = new Vertical();
- summaryContainer.setSpacing(10);
- summaryContainer.setBackgroundColor(245, 245, 255);
-
- var summaryItems = [
- "1. setText(text) - 设置复选框标题",
- "2. getText() - 获取复选框标题",
- "3. setID(id) - 设置控件ID",
- "4. setDefultSelect() - 设置默认选中",
- "5. select() - 选中复选框",
- "6. deselect() - 取消选中复选框",
- "7. isSelect() - 获取选中状态",
- "8. setColor(r, g, b) - 设置颜色",
- "9. setWidth(width) - 设置宽度",
- "10. setHeight(height) - 设置高度",
- "11. onClick(callback) - 点击事件"
- ];
-
- for (var i = 0; i < summaryItems.length; i++) {
- var summaryLabel = new Label();
- summaryLabel.setText(summaryItems[i]);
- summaryLabel.setTextColor(60, 60, 60);
- summaryLabel.setFontSize(12);
- summaryContainer.addView(summaryLabel);
- }
-
- returnPage.addView(summaryContainer);
-
- var closeButton = new Button();
- closeButton.setText("关闭示例");
- closeButton.setColor(220, 20, 60);
- closeButton.setTextColor(255, 255, 255);
- closeButton.setWidth(200);
- closeButton.setHeight(50);
- closeButton.onClick(function() {
- printl("CheckBox示例已关闭");
- tab.dismiss();
- });
- returnPage.addView(closeButton);
-
- tab.addView(5, returnPage);
- });
- printl("CheckBox完整综合示例已启动");
复制代码
| |  | |  |
|