How create the ComboBox with triangle on the right

Mikeeeeee

Hi!
How create the ComboBox with triangle on the right, using QtQuick.Controls 2.15?

sierdzio

Mikeeeeee

@sierdzio this code draws in a file .qml, but how to draw in the .ui.qml file?

    ComboBox {
        id: control
        model: ["First", "Second", "Third"]


        indicator: Canvas {
            id: canvas
            x: control.width - width - control.rightPadding
            y: control.topPadding + (control.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"

            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
                context.fill();
            }
        }
    }

sierdzio

I know nothing about .ui.qml files, sorry. I never use them.

J.Hilk

@sierdzio said in How create the ComboBox with triangle on the right:

I know nothing about .ui.qml files, sorry. I never use them.

Right! These newfangled stuff no-one really needs 😁

sierdzio

@J-Hilk said in How create the ComboBox with triangle on the right:

@sierdzio said in How create the ComboBox with triangle on the right:

I know nothing about .ui.qml files, sorry. I never use them.

Right! These newfangled stuff no-one really needs 😁

Very true. I've tried them out a couple of times, but really saw no point in using them. I hand-write all QML anyway. Perhaps I'm getting old and grumpy :D

Mikeeeeee

This way it works a bit, but how do I make the indicator background transparent?

        indicator: Image{
            z: 1
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            width: 15
            height: width
            fillMode: Image.PreserveAspectFit
            source: "Images/triangle.png"

        }

Mikeeeeee

it is work

        indicator: Rectangle{
            anchors.right: parent.right
            height: parent.height
            width: 15
            color: "white"
            Image{
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width
                height: width
                fillMode: Image.PreserveAspectFit
                source: "Images/triangle.png"
            }
        }