Show Web Content in Your App

Use a Web View to Show Web Content

You can show web content using a WebView.

 import VPlayApps 1.0
 import QtQuick 2.0
 import QtWebView 1.1

 App {

   NavigationStack {

     Page {
       title: "Web View"

       WebView {
         anchors.fill: parent
         url: "https://www.google.com"
       }
     }
   }
 }

Use a WebView Together with NavigationDrawer

At the moment the content of the WebView is drawn on top of the QML scene graph. To use a WebView together with a NavigationDrawer, you could use the following workaround:

 import VPlayApps 1.0
 import QtWebView 1.1

 App {
   id: app

   Navigation {
     id: navigation
     navigationMode: navigationModeDrawer

     NavigationItem {
       title: "Web View"
       icon: IconType.globe

       NavigationStack {

         Page {
           id: page
           title: "Web View"

           WebView {
             anchors.fill: parent
             url: "https://www.google.com"
             // visible is only true if the drawer is NOT open
             visible: !navigation.drawer.isOpen
           }
         }
       }
     }
   }
 }

You can additionally show a placeholder instead of the WebView while the drawer is open.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support