Qt WebEngine в Qt Widgets приложении для просмотра веб-страниц

В статье рассказывается, как в подключить Qt WebEngine в Qt Widgets приложении в виде примера открытия сайтов с помощью данного компонента.

В версии Qt 5.6.0 выпилили QWebKit. Вместо него теперь Qt WebEngine. Так что придется теперь работать с ним. Обратите внимание, что новый компонент пока работает только для версии Qt под компилятором Visual Studio.

В Design режиме в Qt 5.6.0 еще нет данного компонента (возможно потом добавят). Поэтому нужно будет либо его нужно будет вручную добавить в файл формы, либо «скоммуниздить» из какого-нибудь примера. Пойдем вторым способом.

Перейдем в режим примеров:

Рисунок 1 — Раздел примеров

Например, нужный нам компонент есть в приложении WebEngine Markdown Editor Example. Щелкаем по нему:

Рисунок 2 — Проект WebEngine Markdown Editor Example

Рисунок 3 — Первоначальная настройка проекта-примера

Переходим на форму приложения:

Рисунок 4 — Переход на форму приложения

И там копируем компонент типа QWebEngineView:

Рисунок 5 — Копирование компонента

И вставляем его на форму нашего приложения:

Рисунок 6 — Компонент на форме

Я еще добавил на форму обычную кнопку и сделал компоновку по вертикали:

Рисунок 7 — Компоновка элементов по вертикали

Рисунок 8 — Итоговый вариант формы

В .pro файле добавьте webenginewidgets:

Рисунок 9 — Редактирование PRO файла

В слоте клика кнопки напишите такой код, не забыв подключить #include <QUrl>:

ui->preview->load(QUrl("http://www.google.com/"));
ui->preview->show();

Рисунок 10 — Код тестового примера

Теперь при старте программы и клике на кнопку (при наличии Интернета) отобразится мой сайт:

Рисунок 11 — Результат выполнения программы

Кстати, если вам нужно открыть локальный файл, то вместо первой строчки в последнем коде может быть такая:

ui->preview->load(QUrl::fromLocalFile("C:\\index.html"));