Использование клавиатуры с WebView

Данная статья относится к выводу web-страниц с помощью gecko, и не относится к chromium.

• Потеря производительности при открытии клавиатуры в приложении при использовании WebView
• Оптимизация производительности при работе с клавиатурой в WebView
  • Использование поля ввода в приложении
  • Заполнение полей ввода web-страницы
• WebView::virtualKeyboardMargin
• WebView::addMessageListener(string name)
• WebView::loadFrameScript(string name)
• runJavaScript-method

Потеря производительности при открытии клавиатуры в приложении при использовании WebView

Если высота WebView привязана к клавиатуре, то при её открытии размеры контента будут многократно пересчитываться. Так как рендеринг контента является ресурсозатратным, такой подход может привести к сильному падению производительности.

Для оптимизации производительности можно задавать размеры WebView самостоятельно.

Оптимизация производительности при работе с клавиатурой в WebView

Существует два основных случая, при которых используется клавиатура в Webview:

• Использование поля ввода в приложении
• Заполнение полей ввода web-страницы

Использование поля ввода в приложении

В данном примере рассмотрено QML-поле text-edit TextField.

Рекомендуется делать поля ввода в верхней части экрана, а высоту WebView задавать фиксированным значением, учитывая ориентацию устройства и текущие отступы безопасной зоны в данной ориентации, так как по умолчанию в ApplicationWindow установлен режим ApplicationDisplayMode.SafeZone, который учитывает безопасную зону SafeZoneRect.

Ниже приведен пример кода, учитывающий высоту footer при использовании поля ввода в нижней части страницы:

Page {

    property real cutoutOffset: { 
        switch (orientation) { 
        case Orientation.Portrait: return Math.max(SafeZoneRect.insets.top, SafeZoneRect.appInsets.top) 
        case Orientation.Landscape: return Math.max(SafeZoneRect.insets.left, SafeZoneRect.appInsets.top) 
        case Orientation.PortraitInverted: return Math.max(SafeZoneRect.insets.bottom, SafeZoneRect.appInsets.top) 
        case Orientation.LandscapeInverted: return Math.max(SafeZoneRect.insets.right, SafeZoneRect.appInsets.top) 
        } 
    }

    WebView {

        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }

        height: {
            switch(root.orientation) {
            case Orientation.Portrait: {
                return Screen.height - cutoutOffset - pageFooter.height
            }
            case Orientation.Landscape: {
                return Screen.width - cutoutOffset - pageFooter.height
            }
            // Здесь можно добавить аналогичные расчеты высоты для других ориентаций
            }
       }
       
       footerMargin: cutoutOffset + pageFooter.height
   } 
   
   Rectangle {
      id: pageFooter
      // Пользовательский код
      TextField {
          anchors {
             left: parent.left
             right: parent.right
             bottom: parent.bottom
          }
      // Пользовательский код
      }
  }
}

Размер footerMargin (отступ для footer web-страницы) для WebView нужно задать c учётом отступов безопасной зоны и с учётом высоты пользовательского footer для Page, а при выдвижении клавиатуры footer WebView автоматически сдвигается на высоту клавиатуры.

Ниже приведён пример кода, задающий необходимый отступ для footer web-страницы:

WebView {
    ...
    footerMargin: cutoutOffset + pageFooter.height
}

Заполнение полей ввода web-страницы

Для уменьшения количества пересчётов размеров, можно сдвигать WebView вручную с учётом высоты клавиатуры и с учётом местонахождения фокусного элемента (поиск в DOM-документе), используя Дополнительные атрибуты WebView, а также Основные свойства WebView:

WebView::virtualKeyboardMargin

• qreal WebView::virtualKeyboardMargin — поле, занимаемое клавиатурой внизу страницы (высота клавиатуры).

• bool WebView::keyboardOpened— клавиатура открыта/закрыта.

WebView::addMessageListener(string name)

• WebView::addMessageListener(string name) — регистрирует прослушиватель асинхронных событий с указанным значением name.

WebView::loadFrameScript(string name)

• WebView::loadFrameScript(string name) — загружает указанный JS-скрипт фрейма.

runJavaScript-method

• runJavaScript(string script, variant callback, variant errorCallback) — запускает фрагмент JavaScript в контексте загруженного документа DOM.

Например, можно подвинуть Webview вверх на расстояние равное разнице между высотой клавиатуры (WebView::virtualKeyboardMargin) и расстоянием от фокусного элемента до нижнего края страницы.

Результатом применения описанных подходов будет плавное появление и скрытие клавиатуры.