Question

我正在用QML制作一个自定义GroupBox，目前我有这个

Rectangle
{
    anchors.fill: parent
    color: "#55aaff"
    Rectangle
    {
        id: combo_box
        anchors.centerIn: parent
        color: "transparent"
        width: parent.width/2
        height: parent.height/2
        opacity: 0.3
        Rectangle
        {
            anchors.fill: parent
            color: "transparent"
            border.color: "#ffffff"
            border.width: 1
            radius: 20
        }
    }
    Rectangle
    {
        id: combo_box_title
        anchors.verticalCenter: combo_box.top
        anchors.left: combo_box.left
        anchors.leftMargin: 30
        width: 90
        height: 20
        opacity: 0.3
        color: "#55aaff"
    }
    Text
    {
        id: combo_box_title_text
        anchors.centerIn: combo_box_title
        font.family: "Comic Sans MS"
        font.pointSize: 9
        color: "#e1e100"
        text: "Game Settings"
    }

显示为this

您可以看到我的ComboBox标题在背景中具有Rectangle的边框。我想要的是删除位于Title后面的Rectangle边框部分。

我的问题有解决方案吗？或者任何其他方式我都可以拥有这种GroupBox。提前致谢

Answer 1

您将Rectangle替换为Canvas的白色边框：

Canvas {
    id: mycanvas
    anchors.fill: parent
    onPaint: {
        var ctx = getContext("2d");
        ctx.strokeStyle = 'white';
        ctx.beginPath();
        ctx.moveTo(120, 0);
        ctx.lineTo(mycanvas.width - 20, 0);
        ctx.arc(mycanvas.width - 20,20,20,-Math.PI/2, 0);
        ctx.lineTo(mycanvas.width, mycanvas.height - 20);
        ctx.arc(mycanvas.width - 20,mycanvas.height - 20,20,0, Math.PI/2);
        ctx.lineTo(20, mycanvas.height);
        ctx.arc(20,mycanvas.height - 20,20,Math.PI/2,Math.PI);
        ctx.lineTo(0, 20);
        ctx.arc(20,20,20,Math.PI,-Math.PI/2);
        ctx.lineTo(30, 0);
        ctx.stroke();
    }
}

您可以使用combo_box_title_text.contentWidth完全符合文字大小

制作一部分Rectangle disapear / invisible QML Qt

1 个答案: