Flutter iOS内嵌WebView插件zikzak_inappwebview_ios的使用

Flutter iOS内嵌WebView插件zikzak_inappwebview_ios的使用

zikzak_inappwebview_ios

zikzak_inappwebview_ios 是 zikzak_inappwebview 包的 Apple iOS WKWebView 实现。

使用

这个包是推荐使用的插件（endorsed federated plugin），这意味着你可以直接使用 zikzak_inappwebview。当你这样做时，这个包会自动包含在你的应用中，因此你不需要将其添加到 pubspec.yaml 文件中。

然而，如果你导入这个包以直接使用它的任何API，则应像往常一样将其添加到 pubspec.yaml 文件中。

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用 zikzak_inappwebview_ios 插件来加载一个网页。

import 'package:flutter/material.dart';
import 'package:zikzak_inappwebview/zikzak_inappwebview.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter InAppWebView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late InAppWebViewController webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InAppWebView Demo'),
      ),
      body: Column(
        children: [
          Expanded(
            child: InAppWebView(
              initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
              onWebViewCreated: (controller) {
                webViewController = controller;
              },
            ),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'package:zikzak_inappwebview/zikzak_inappwebview.dart';
   

2. 创建主应用类 MyApp：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter InAppWebView Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: WebViewPage(),
       );
     }
   }
   

3. 创建 WebViewPage 类：

   class WebViewPage extends StatefulWidget {
     @override
     _WebViewPageState createState() => _WebViewPageState();
   }
   

4. 实现 _WebViewPageState 类：

   class _WebViewPageState extends State<WebViewPage> {
     late InAppWebViewController webViewController;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('InAppWebView Demo'),
         ),
         body: Column(
           children: [
             Expanded(
               child: InAppWebView(
                 initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
                 onWebViewCreated: (controller) {
                   webViewController = controller;
                 },
               ),
             ),
           ],
         ),
       );
     }
   }