Flat风格的Qml单选/复选按钮

Qt君

发布于 2019-11-24 16:11:04

2.4K00

代码可运行

文章被收录于专栏：跟Qt君学编程跟Qt君学编程

运行总次数：0

代码可运行

使用Qml的RadioButton与CheckBox控件修改而成。

单选按钮

RadioButton代码

import QtQuick 2.0
import QtQuick.Controls 2.0

RadioButton {
    id: root

    property color checkedColor: "#0ACF97"
    text: qsTr("RadioButton")

    indicator: Rectangle {
        x: root.leftPadding
        anchors.verticalCenter: parent.verticalCenter
        width: 26; height: width
        antialiasing: true
        radius: width/2
        border.width: 2
        border.color: root.checkedColor

        Rectangle {
            anchors.centerIn: parent
            width: parent.width*0.7; height: width
            antialiasing: true
            radius: width/2
            color: root.checkedColor
            visible: root.checked
        }
    }
}

RadioButton样式代码

GridLayout {
    width: root.width
    rows: 5

    Repeater {
        model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]

        Column {
            spacing: 15

            RadioButton {
                text: "Radio Button 1"
                checked: true
                checkedColor: modelData
            }

            RadioButton {
                text: "Radio Button 2"
                checkedColor: modelData
            }

            RadioButton {
                text: "Radio Button 3"
                checkedColor: modelData
            }
        }
    }
}

复选按钮

CheckBox代码

import QtQuick 2.0
import QtQuick.Controls 2.0

CheckBox {
    id: root

    property color checkedColor: "#0ACF97"

    text: qsTr("CheckBox")

    indicator: Rectangle {
        x: root.leftPadding
        anchors.verticalCenter: parent.verticalCenter
        width: 26; height: width
        antialiasing: true
        radius: 5
        border.width: 2
        border.color: root.checkedColor

        Rectangle {
            anchors.centerIn: parent
            width: parent.width*0.7; height: width
            antialiasing: true
            radius: parent.radius * 0.7
            color: root.checkedColor
            visible: root.checked
        }
    }
}

CheckBox样式源码

GridLayout {
    width: root.width
    rows: 5

    Repeater {
        model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]

        Column {
            spacing: 15

            CheckBox {
                text: "Check Button 1"
                checked: true
                checkedColor: modelData
            }

            CheckBox {
                text: "Check Button 2"
                checkedColor: modelData
            }

            CheckBox {
                text: "Check Button 3"
                checkedColor: modelData
            }
        }
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-11-19，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自 Qt君微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度

Flat风格的Qml单选/复选按钮

Flat风格的Qml单选/复选按钮

单选按钮

复选按钮

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐