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

最新推荐文章于 2025-10-12 17:09:54 发布

原创最新推荐文章于 2025-10-12 17:09:54 发布 · 426 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#QML #qt #CheckBox

QML 专栏收录该内容

21 篇文章

订阅专栏

效果：

需要使用到 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
        }
    }
}

完！