【Flutter】WebView webview_flutter

I. Einleitung

WebView nimmt eine wichtige Position in der Entwicklung mobiler Anwendungen ein und bietet Entwicklern die Möglichkeit, Webseiten in Anwendungen einzubetten. Mit WebView können Sie Benutzern problemlos umfangreiche Webinhalte bereitstellen oder mit Plattformen von Drittanbietern interagieren, ohne die Anwendungsoberfläche zu verlassen.

Flutter kann als plattformübergreifendes UI-Toolkit natürlich nicht an der Unterstützung von WebView fehlen. Das webview_flutterPaket ist die offizielle WebView-Lösung, die Flutter für Entwickler bereitstellt. Es kombiniert die Funktionen von WebView perfekt mit dem Komponentensystem von Flutter und erleichtert so die Integration von Webseiten in Flutter-Anwendungen.

In diesem Artikel erfahren Sie Folgendes:

• webview_flutterGrundlegende Verwendung des Pakets
• Wie man mit Webinhalten interagiert
• Plattformübergreifende Unterstützung und Einschränkungen

Möchten Sie ein Flutter-Experte werden und weitere Tipps und Best Practices erhalten? Wir haben tolle Neuigkeiten für Sie! Flattern Sie von null auf einen Basiseintrag zur Anwendungszeile der gesamten Strategie und warten Sie darauf, dass Sie beitreten! Diese Spalte enthält alle Ressourcen, die Sie zum Erlernen von Flutter benötigen, einschließlich Codebeispielen und ausführlicher Analysen. Der Inhalt der Kolumne wird weiterhin aktualisiert und der Preis entsprechend erhöht. Melden Sie sich jetzt an und profitieren Sie vom besten Preis! Darüber hinaus haben wir auch eine spezielle Diskussionsgruppe. Sie können hier klicken, um unserer Diskussionsgruppe beizutreten und mit anderen Flutter-Lernenden zu kommunizieren und zu lernen. Beginnen wir noch heute unsere Flutter-Lernreise!

2. Einführung in das webview_flutter-Paket

webview_flutterEs ist das offizielle WebView-Plug-in von Flutter. Es unterstützt Android- und iOS-Plattformen und bietet Ihnen einen vollständigen WebView-Funktionsumfang, ohne auf plattformübergreifende Funktionen verzichten zu müssen.

Anwendbare Plattform- und Versionsanforderungen:

• Android: Auf dem Gerät mit Android WebView ausführen
• iOS: Implementierung mit WKWebView
• Bitte stellen Sie sicher, dass Ihre Flutter-Umgebungsversion mindestens 3.10.0 und die Dart SDK-Version 3.0.0 oder höher ist.

3. Die grundlegende Verwendung von webview_flutter

1. Webview_flutter-Abhängigkeit hinzufügen

   Fügen Sie Ihrer Datei pubspec.yamldie folgenden Abhängigkeiten hinzu :

   dependencies:
     webview_flutter: ^latest_version
   

   Führen Sie dann flutter pub getden Befehl aus, um die neuen Abhängigkeiten zu installieren.

2. Erstellen Sie eine WebView-Instanz

   Mit WebViewder Komponente können Sie ganz einfach ein WebView zu Ihrer Flutter-App hinzufügen. Hier ist ein einfaches Beispiel:

   WebView(
     initialUrl: 'https://www.google.com',
     javascriptMode: JavascriptMode.unrestricted,
   )
   

3. Webseiten laden und anzeigen

   Anstatt initialUrldas Attribut zu verwenden, können Sie auch WebViewden Controller zum Laden von Webseiten verwenden. Zum Beispiel:

   final Completer<WebViewController> _controller = Completer<WebViewController>();
   
   WebView(
     onWebViewCreated: (WebViewController webViewController) {
         
         
       _controller.complete(webViewController);
     },
     initialUrl: 'https://www.google.com',
     javascriptMode: JavascriptMode.unrestricted,
   )
   

4. Grundlegende Steuerelemente: wie Navigation, Zoomen usw.

   webview_flutterDas Paket bietet Ihnen die vollständige Navigationssteuerung wie Vorwärts, Zurück, Aktualisieren usw. Auf diese Funktionen können Sie über WebViewden Controller zugreifen. Darüber hinaus können Sie auch andere Verhaltensweisen von WebView über Eigenschaften steuern, z. B. ob das Zoomen zulässig ist, ob Bildlaufleisten angezeigt werden sollen usw.

4. Interaktion mit Webseiten

Die Interaktion mit Webseiten ist eine Kernfunktion von WebView. webview_flutterDas Paket bietet eine umfangreiche API, mit der Sie problemlos eine bidirektionale Interaktion mit Webseiten erreichen können.

1. Kommunikation zwischen JavaScript und Flutter

   Sie können javascriptChannelüber die Eigenschaft einen JavaScript-Kanal erstellen und über diesen Kanal Nachrichten zwischen Dart und JavaScript senden. Hier ist ein Beispiel:

   WebView(
     javascriptChannels: <JavascriptChannel>[
       _toasterJavascriptChannel(context),
     ].toSet(),
     initialUrl: 'https://www.example.com',
     javascriptMode: JavascriptMode.unrestricted,
   )
   
   JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
         
         
     return JavascriptChannel(
       name: 'Toaster',
       onMessageReceived: (JavascriptMessage message) {
         
         
         // 处理从 JavaScript 接收的消息
       },
     );
   }
   

2. Interagieren Sie mit dem WebView-Controller

   Zusätzlich zu JavaScript-Kanälen können Sie diese auch WebViewControllerzum Ausführen von JavaScript-Code, zum Abrufen von Seitentiteln und mehr verwenden. Zum Beispiel:

   final controller = await _controller.future;
   controller.evaluateJavascript('alert("Hello from Flutter!");');
   

3. Beispiel: Spezifische interaktive Funktionen realisieren

   Durch die Kombination der oben genannten Funktionen können Sie umfangreiche interaktive Effekte erzielen, z. B. das automatische Ausfüllen von Formularen, die Anpassung des Seitenthemas usw. Im Folgenden finden Sie einen Beispielcode zum Implementieren eines benutzerdefinierten Designs:

   final controller = await _controller.future;
   controller.evaluateJavascript('document.body.style.backgroundColor = "lightblue";');
   

V. Zusammenfassung

In diesem Artikel haben Sie erfahren, wie Sie das Paket zur Integration von WebView in Flutter verwenden webview_flutter, einschließlich grundlegender Verwendung, Interaktion mit Webseiten sowie plattformübergreifender Unterstützung und Einschränkungen. Ob es um die Anzeige von Informationen oder die Umsetzung komplexer Interaktionen geht, webview_flutteres ist ein leistungsstarkes und flexibles Werkzeug.

Sind Sie neugierig auf Flutter und möchten mehr darüber erfahren? Dann ist Flutter from Zero to One Basic Introduction to Application Launch Guide Ihre beste Wahl! Hier finden Sie umfassende Flutter-Lernressourcen, einschließlich Codebeispielen und ausführlicher Analysen. Fragen Sie sich, wie Sie mit Flutter Apps erstellen können? Alle Antworten finden Sie in unserer Kolumne! Zögern Sie nicht länger, der Inhalt der Kolumne wird ständig aktualisiert und der Preis erhöht sich entsprechend. Melden Sie sich jetzt an und profitieren Sie vom besten Preis! Lassen Sie uns gemeinsam die Welt von Flutter erkunden! Möchten Sie mehr wissen? Klicken Sie hier, um den Spaltenleitfaden der Broschüre „Flutter Developer 101 Erste Schritte“ anzuzeigen . Darüber hinaus haben wir auch eine spezielle Diskussionsgruppe. Sie können hier klicken, um unserer Diskussionsgruppe beizutreten und mit anderen Flutter-Lernenden zu kommunizieren und zu lernen.