Как прослушивать события в веб-просмотре Flutter? - PullRequest
Новая
       66

Как прослушивать события в веб-просмотре Flutter?

1 голос
/ 01 августа 2020

Я хочу закрыть веб-просмотр в моем приложении Flutter, когда пользователь нажимает кнопку, которая присутствует в веб-просмотре

Вот код, который отображает веб-просмотр 

class WebViewApp extends StatefulWidget {
  @override
  _WebViewAppState createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return  WebviewScaffold(url: 'https://google.com',
        appBar: AppBar(
          title: Text('Test'),
          centerTitle: true,
          backgroundColor: kBlue,
          leading: BackButton(
            onPressed: (){
              Router.navigator.pop();
            },
          )
        ),
      );
  }
}

пример изображения, и я хочу определить,

1 Ответ

1 голос
/ 01 августа 2020

Пожалуйста, проверьте следующие шаги для получения триггера при нажатии кнопки в WebView:

  • Добавьте флаттер плагин webview

    webview_flutter: ^0.3.22+1

  • Добавлена ​​ссылка на актив в pubspec.yaml

     assets:   
    assets/about_us.html

  • Добавлен файл html в папку с ресурсами

about_us. html

<html>

<head>
    <script type="text/javascript">
        function invokeNative() {
            MessageInvoker.postMessage('Trigger from Javascript code');
        }
    </script> </head>

<body>
    <form>
        <input type="button" value="Click me!" onclick="invokeNative()" />
    </form> </body>

</html>
  • Добавлен код для загрузки WebView.

Согласно приведенному ниже утверждению, вы можете видеть, что я загружаю WebView, и когда я нажимаю кнопку с именем Щелкните меня! в WebView JavascriptChannel во флаттере будет вызываться с сообщением «Триггер из Javascript кода» 

import 'dart:convert';
import 'package:flutter/material.dart'; 
import 'package:flutter/services.dart'; 
import 'package:webview_flutter/webview_flutter.dart';

class WebViewApp extends StatefulWidget {
  WebViewApp({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _WebViewAppState createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  WebViewController _controller;
  Future<void> loadHtmlFromAssets(String filename, controller) async {
    String fileText = await rootBundle.loadString(filename);
    controller.loadUrl(Uri.dataFromString(fileText,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }
  Future<String> loadLocal() async {
    return await rootBundle.loadString('assets/about_us.html');
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder<String>(
        future: loadLocal(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return WebView(
              initialUrl:
                  new Uri.dataFromString(snapshot.data, mimeType: 'text/html')
                      .toString(),
              javascriptMode: JavascriptMode.unrestricted,
              javascriptChannels: <JavascriptChannel>[
                JavascriptChannel(
                    name: 'MessageInvoker',
                    onMessageReceived: (s) {
                    Scaffold.of(context).showSnackBar(SnackBar(
                       content: Text(s.message),
                    ));
                    }),
              ].toSet(),
            );
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }
          return CircularProgressIndicator();
        },
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Как вы можете видеть в коде, есть JavascriptChannel, который будет вызываются, когда пользователь нажимает кнопку в веб-просмотре. Есть ключ для идентификации канала, который в моем случае был MessageInvoker.

Надеюсь, это поможет ... введите описание изображения здесь

...