create Qml in app user walkthrough

[Havaloow]

Hello all,
Hope you are doing well,
im trying to create and design a user walkthrough for my app to introduce some new functions and help the user understand the basics of my application.

Do you have any suggestion and advice for how and where do i start ?
is there a qml type that can highlight one button to be notices by the user to click it when the guide tells them to click somewhere ?

Thanks for your help
have a great day.

[6thC]

Customizing Qt Quick Controls

https://doc.qt.io/qt-5/qtquickcontrols2-input.html

https://doc.qt.io/qt-5.15/qml-qtquick-listview.html &
highlight the item

[Havaloow]

Hello ,
Thanks for your replay.

I think your asnwer does not relate to any of my questions
i dont need to highlight item in a list view ( i want to highlight a QtQuickControl when the guide asks to press that button.
and foucus on one area in the screen so the user notices that spot.

Thanks

[VStevenP]

Maybe you could use a Button?

It has a highlight property.

See https://doc.qt.io/qt-5/qml-qtquick-controls2-button.html#details

[jeremy_k]

This is a basic framework to highlight a series of buttons. It uses each button's clicked signal to transfer to the next button. If something other than buttons are involved, you might need to define a common signal. You might also want to disable the non-highlighted controls to enforce the demo's order.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.0

Window {
    width: 640
    height: 480
    visible: true

    Grid {
        id: grid
        anchors.centerIn: parent
        columns: 2
        rows: 2
        spacing: 10
        ToolButton {
            id: b1
            text: "1"
        }
        ToolButton {
            id: b2
            text: "this is the second button"
        }
        ToolButton {
            id: b3
            text: "3"
        }
        ToolButton {
            id: b4
            text: "four"
        }
    }

    Text {
        id: done
        anchors {
            top: grid.bottom
            horizontalCenter: parent.horizontalCenter
        }
        text: "All Done!"
        font.pixelSize: 30
        visible: children.length !== 0
        onVisibleChanged: {
            if (visible) {
                for (var child in children) {
                    children[child].visible = false;
                }
            }
        }
    }

    Rectangle {
        id: tracer
        anchors.centerIn: parent
        width: parent.width + 10
        height: parent.height + 10
        border {
            color: "red"
            width: 5
        }
        color: "transparent"
        parent: order[index]

        property var order: [b1, b2, b3, b4, done]
        property int index: 0

        Text {
            anchors {
                top: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
            text: "Click here!"
            color: "blue"
        }

        Connections {
            target: tracer.parent
            ignoreUnknownSignals: true
            function onClicked() {
                tracer.parent = tracer.order[++tracer.index];
            }
        }
    }
}