QML 将CheckBox添加到一个组,同一时间只能勾选一个,具有排他性

效果:

需要使用到 ButtonGroup 部件;

exclusive 属性需要设置为true,保持组中的按钮的排他性,有且只能选中一个按钮;

buttons 属性,给其赋值 list<AbstractButton> 参数即可将按钮组组合到一起;

使用一个布局类的children属性也可以实现;

// 按钮的组
ButtonGroup {
    id: childGroup

    // 保持组中的按钮的排他性,有且只能选中一个按钮
    exclusive: true
    buttons: col.children    // 使用方式2的话,这里可以注释掉
}


// 垂直属性
Column {
    id: col
    CheckBox {
        text: "first checkbox"
        checked: true   // 设置是否勾选
        //ButtonGroup.group: childGroup    // 方式2,也可以这样添加到组里
    }
    CheckBox {
        text: "second checkbox"
        checked: false   // 设置是否勾选
        //ButtonGroup.group: childGroup    // 方式2,也可以这样添加到组里
    }
    CheckBox {
        text: "third checkbox"
        checked: false   // 设置是否勾选
        //ButtonGroup.group: childGroup    // 方式2,也可以这样添加到组里
    }
}

也可以在CheckBox中直接添加到组里,ButtonGroup.group: childGroup

CheckBox 的 tristate 可以设置是否启用三种状态;

Qt.Unchecked                  0 没勾选
Qt.PartiallyChecked           1  -
Qt.Checked                    2 勾选
CheckBox {
    text: "first checkbox"
    checked: true   // 设置是否勾选

    // 设置为true,checkbox会有三个状态
    tristate: true
    onCheckStateChanged: {
        console.log(checkState)
    }
}

官方案例:

1.通过一个checkbox来控制全部checkbox的勾选

效果:

Column {
    ButtonGroup {
        id: childGroup
        exclusive: false
        checkState: parentBox.checkState
    }

    CheckBox {
        id: parentBox
        text: qsTr("Parent")
        checkState: childGroup.checkState
    }

    CheckBox {
        checked: true
        text: qsTr("Child 1")
        leftPadding: indicator.width
        ButtonGroup.group: childGroup
    }

    CheckBox {
        text: qsTr("Child 2")
        leftPadding: indicator.width
        ButtonGroup.group: childGroup
    }
}

2.可以自己控制勾选状态

效果:

CheckBox {
    tristate: true

    // 可以控制勾选
    nextCheckState: function() {
        // 如果当前时为勾选状态
        if (Qt.Unchecked === checkState) {
            // 返回勾选状态
            return Qt.Checked

        } else if (Qt.Checked === checkState) {
            return Qt.PartiallyChecked

        } else {
            return Qt.Unchecked
        }
    }
}

完!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cpp_learners

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值