IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

WebEngine Qt Quick Custom Touch Handle Example

Shows custom touch handles upon touch selection events.

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

WebEngine Qt Quick Custom Touch Handle Example

Image non disponible

WebEngine Qt Quick Touch Handle Example demonstrates how to use custom touch handles when a touch selection event happens. It shows the minimum amount of code needed to use custom touch handle delegates, and can be used as a basis for further experimentation.

Custom Touch Handle

In main.qml we create the custom touch handle delegate.

 
Sélectionnez
                property int itemAction: WebEngineView.Back
                text: webEngineView.action(itemAction).text
                enabled: webEngineView.action(itemAction).enabled
                onClicked: webEngineView.action(itemAction).trigger()
                icon.name: webEngineView.action(itemAction).iconName
                display: AbstractButton.TextUnderIcon
            }

            ToolButton {
                property int itemAction: WebEngineView.Forward
                text: webEngineView.action(itemAction).text
                enabled: webEngineView.action(itemAction).enabled
                onClicked: webEngineView.action(itemAction).trigger()
                icon.name: webEngineView.action(itemAction).iconName
                display: AbstractButton.TextUnderIcon
            }

            ToolButton {
                property int itemAction: webEngineView.loading ? WebEngineView.Stop : WebEngineView.Reload
                text: webEngineView.action(itemAction).text
                enabled: webEngineView.action(itemAction).enabled
                onClicked: webEngineView.action(itemAction).trigger()
                icon.name: webEngineView.action(itemAction).iconName
                display: AbstractButton.TextUnderIcon
            }

            TextField {
                Layout.fillWidth: true
                text: webEngineView.url
                selectByMouse: true
                onEditingFinished: webEngineView.url = text
            }

            Label { text: 'Handle: ' }
            ComboBox {
                model: [ 'Default', 'Circle', 'Square' ]

                onCurrentValueChanged: {
                    if (currentValue == 'Circle')
                        webEngineView.touchHandleDelegate = circleTouchHandle
                    else if (currentValue == 'Square')
                        webEngineView.touchHandleDelegate = rectTouchHandle
                    else
                        webEngineView.touchHandleDelegate = null
                }

                Component.onCompleted: currentIndex = indexOfValue('Square')
            }
        }
    }

QML Code

In main.qml we create the top level window filled by a WebEngineView item loading the Qt Homepage. To display custom touch handles, a QML item should be delegated to WebEngineView::touchHandleDelegate.

The touch handle's position, opacity, and visibility is automatically updated.

If no delegate is provided, Chromium's default touch handles will appear.

Requirements

The example requires a working internet connection to render the Qt Homepage and a touch-enabled input device to trigger touch events. An optional system proxy should be picked up automatically.

Example project

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+