cocos学习-toggle

文档上说Toggle 是一个 CheckBox，当它和 ToggleGroup 一起使用的时候，可以变成 RadioButton。

RadioButton（单选按钮）：同一组内的单选按钮具有互斥性，即在同一时间内只能有一个单选按钮被选中。如性别选择（男/女）。

Toggle（切换按钮或开关）：用于在两个状态之间切换，通常表示开/关、是/否等二元状态。它允许用户通过点击来切换按钮的状态，而不是从多个选项中选择一个。Toggle按钮在UI设计中常用于控制功能的开启和关闭，如Wi-Fi、蓝牙等设置。

Toggle的节点树：

Background就是Toggle的背景，隐藏掉就剩下一个‘✔’

checkmark就是Toggle选中后的样式，如点击开启后显示一个‘✔’

Toggle的属性

Target：Toggle指向的背景

Interactable：Toggle是否可以交互

Enable Auto Gray Effect:如果这个标记为 true，当 button 的 interactable 属性为 false 的时候，会使用内置 shader 让 button 的 target 节点的 sprite 组件变灰,像这样：

Transition：控制点击Toggle时的样式

        Duration：颜色变化或缩放过渡的时间

        Zoom Scale：点击Toggle后，缩放的一个值。

Is Check：为true时，checkmark在一进入页面时会显示，反之则隐藏；

Check Mark：显示为checkmark的精灵图片

Toggle Group：Toggle所属的Toggle Group

Check Event：Toggle的回调；

ToggleContainer：包含多个toggle

制作一个小demo，利用toggleContainer实现scrollview的内容切换：

效果:

主要代码：

    @property([cc.Toggle])
    mailTypeTab: cc.Toggle[] = [];

    onHandleToggle(){
        cc.log('2')
        var content =                         
        this.node.getChildByName('scrollView').
        getComponent(cc.ScrollView).content;
        content.destroyAllChildren();
        //var content = this.node.getChildrenByName('contents');
        for(let i =0;i<10;i++){
            let tmp = cc.instantiate(this.item);
            let rgb_r = Math.ceil(Math.random()*255);
            let rgb_g = Math.ceil(Math.random()*255);
            let rgb_b = Math.ceil(Math.random()*255);
            // tmp.color = tmp.color.setR(rgb_r);
            // tmp.color = tmp.color.setG(rgb_g);
            // tmp.color = tmp.color.setB(rgb_b);
            //let tmpC = new cc.Color().fromHEX('#BF7F7F');
            let tmpC = new cc.Color(rgb_r,rgb_g,rgb_b);
            tmp.color = tmpC;
            tmp.setPosition(0,0)
            tmp.setParent(content);
            //content.addChild(tmp);
        }
    }

ToggleContainer的toggle一次性只能选一个，当一组 Toggle 属于同一个 ToggleContainer 的时候，任何时候只能有一个 Toggle 处于选中状态。如何实现多选呢？或者让其中两个toggle的激活状态互斥？

自己建一个节点当成ToggleContainer：

update(dt: number): void {
        if(this.mailTypeTab[0].isChecked == true){
            this.mailTypeTab[2].isChecked = false;
        }else{
            this.mailTypeTab[2].isChecked = true;
        }
    }

效果： 

 1选和3选互斥