Flutter内嵌iOS WebView插件webview_inapp_ios的使用

Flutter内嵌iOS WebView插件flutter_inappwebview_ios的使用

flutter_inappwebview_ios 是 flutter_inappwebview 的 Apple iOS WKWebView 实现。

使用

此包是经过推荐的（endorsed），这意味着您可以直接使用 flutter_inappwebview。 当您这样做时，此包将自动包含在您的应用中，因此您无需将其添加到 pubspec.yaml 文件中。

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

完整示例Demo

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

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_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: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  InAppWebViewController? webViewController;

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

说明

  1. 导入必要的库：

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

  2. 定义主应用类：

    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: MyHomePage(),
    );
  }
}

  3. 创建主页面类：

    class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

  4. 实现页面状态类：

    class _MyHomePageState extends State<MyHomePage> {
  InAppWebViewController? webViewController;

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

更多关于Flutter内嵌iOS WebView插件webview_inapp_ios的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter内嵌iOS WebView插件webview_inapp_ios的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用 webview_inapp_ios 插件可以在 iOS 平台上嵌入一个原生的 WebView。这个插件提供了一个 InAppWebView 组件，允许你在 Flutter 应用中显示网页内容。以下是如何使用 webview_inapp_ios 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 webview_inapp_ios 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_inapp_ios: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 webview_inapp_ios 包：

import 'package:webview_inapp_ios/webview_inapp_ios.dart';

3. 使用 InAppWebView

你可以在你的 Flutter 应用中使用 InAppWebView 组件来显示网页内容。以下是一个简单的示例：

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

class WebViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InAppWebView Example'),
      ),
      body: InAppWebView(
        initialUrl: 'https://flutter.dev',  // 设置初始URL
        onWebViewCreated: (InAppWebViewController controller) {
          // WebView 创建时的回调
        },
        onLoadStart: (InAppWebViewController controller, String url) {
          // 页面开始加载时的回调
        },
        onLoadStop: (InAppWebViewController controller, String url) {
          // 页面加载完成时的回调
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: WebViewExample(),
  ));
}

4. 处理导航和事件

InAppWebView 提供了多个回调函数来处理导航和页面加载事件。以下是一些常用的回调：

  • onWebViewCreated: 当 WebView 创建时调用。
  • onLoadStart: 当页面开始加载时调用。
  • onLoadStop: 当页面加载完成时调用。
  • onProgressChanged: 当页面加载进度发生变化时调用。
  • onReceivedError: 当页面加载出错时调用。

你可以在这些回调中执行自定义逻辑，例如显示加载指示器、处理错误等。

5. 控制 WebView

你可以通过 InAppWebViewController 来控制 WebView 的行为。例如，你可以导航到新的 URL、重新加载页面、执行 JavaScript 代码等。

InAppWebViewController _webViewController;

InAppWebView(
  initialUrl: 'https://flutter.dev',
  onWebViewCreated: (InAppWebViewController controller) {
    _webViewController = controller;
  },
);

// 导航到新的 URL
_webViewController.loadUrl(url: 'https://dart.dev');

// 重新加载页面
_webViewController.reload();

// 执行 JavaScript 代码
_webViewController.evaluateJavascript(source: 'alert("Hello, World!");');

6. 处理权限请求

在某些情况下，WebView 可能需要请求权限（例如访问摄像头、麦克风等）。你可以通过 onPermissionRequest 回调来处理这些请求。

InAppWebView(
  initialUrl: 'https://example.com',
  onPermissionRequest: (InAppWebViewController controller, PermissionRequest request) {
    // 处理权限请求
    request.grant();
  },
);
回到顶部