create Qml in app user walkthrough
-
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. -
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
-
Maybe you could use a Button?
It has a highlight property.
See https://doc.qt.io/qt-5/qml-qtquick-controls2-button.html#details
-
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]; } } } }