在 QML 2 中设置 GroupBox 样式答案

【问题标题】：Styling GroupBox in QML 2在 QML 2 中设置 GroupBox 样式
【发布时间】：2019-06-17 03:59:06
【问题描述】：

我想在 QML 2 中为 GroupBox 设置如下样式：

我在 QML 2 中找不到如何执行此操作。在下一页中，Customizing Qt Quick controls 没有关于样式标题的信息。

【问题讨论】：

bugreports.qt.io/browse/QTBUG-63618 获取缺少的文档。
奇怪到现在解决了。

【解决方案1】：

你可以这样做：

GroupBox {
    id: control
    title: qsTr("GroupBox")
    anchors.centerIn: parent
    width: 300
    height: 150

    background: Rectangle {
        y: control.topPadding - control.padding
        width: parent.width
        height: parent.height - control.topPadding + control.padding
        color: "transparent"
        border.color: "#21be2b"
        radius: 2
    }

    label: Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.top
        anchors.bottomMargin: -height/2
        color: "white"                  //set this to the background color
        width: parent.width * 0.7
        height: title.font.pixelSize
        Text {
            id: title
            text: qsTr("My Tilte")
            anchors.centerIn: parent
            font.pixelSize: 32
        }
    }
}

如果您希望标签透明，更复杂的解决方案是使用 Canvas 绘制背景 Rectangle：

CustomBox.qml

import QtQuick 2.7

Item {
    id: box
    property string borderColor: "black"
    property int borderWidth: 1


    onWidthChanged: canvas.requestPaint()
    onHeightChanged: canvas.requestPaint()

    Canvas {
        id: canvas
        anchors.fill: parent
        antialiasing: true

        onPaint: {
            var ctx = canvas.getContext('2d')

            ctx.strokeStyle = box.borderColor
            ctx.lineWidth = box.borderWidth
            ctx.beginPath()
            ctx.moveTo(width*0.15, 0)
            ctx.lineTo(0, 0)
            ctx.lineTo(0, height)
            ctx.lineTo(width, height)
            ctx.lineTo(width, 0)
            ctx.lineTo(width - width * 0.15, 0)
            ctx.stroke()
        }
    }
}

然后你可以像这样使用它：

GroupBox {
    id: control
    title: qsTr("GroupBox")
    anchors.centerIn: parent
    width: 300
    height: 150

    background: CustomBox {
        y: control.topPadding - control.padding
        width: parent.width
        height: parent.height - control.topPadding + control.padding
        borderColor: "black"
        borderWidth: 1
    }

    label: Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.top
        anchors.bottomMargin: -height/2
        color: "transparent"
        width: parent.width * 0.7
        height: title.font.pixelSize
        Text {
            id: title
            text: qsTr("Settings")
            anchors.centerIn: parent
            font.pixelSize: 32
        }
    }
}

【讨论】：

感谢您的建议，主要问题是标签矩形的颜色将是transparent，因此背景矩形的边框清晰可见。如果不是transparent，您的解决方案就可以完美运行。
我认为 Canvas 适合我。感谢您的建议 :-)

【解决方案2】：

可以用label.x设置在中间

GroupBox { 
    title: "Potato"
    label.x: width/2 - label.contentWidth/2
    Label {
        text: "Wubba lubba dub dub."
    } 
}

【讨论】：

【解决方案3】：

试试这个：

GroupBox{
    id: id_keyListBox
    label: Label{
        text: "Choose an account to see details"
        color: "blue"
    }

【讨论】：