Flutter网页视图展示插件simple_webview_flutter的使用

Flutter网页视图展示插件simple_webview_flutter的使用

获取开始

在使用此插件之前，请检查simple_platform_view包，因为simple_platform_view有一些需要提前考虑的缺点。

使用方法

平台 状态
Android ✅
iOS ❌
下载自定义引擎

simple_platform_view 需要对引擎本身进行修改。因此，在Android上运行时，您需要使用修改后的Flutter版本。

下载自定义Flutter版本 这里。

解压下载的 flutter.zip 文件。

首次下载自定义引擎工件时，运行以下命令：

$ path_to_custom_version/flutter/bin/flutter doctor

然后使用它与普通Flutter安装相同的方式：

$ path_to_custom_version/flutter/bin/flutter build apk

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  webview_flutter:
  simple_webview_flutter:
Android:

将默认的 WebViewPlatform.instance 替换为修改后的版本：

import 'package:simple_webview_flutter/simple_webview_flutter.dart';

[@override](/user/override)
void initState() {
  super.initState();
  if (Platform.isAndroid) {
      SimpleAndroidWebViewPlatform.registerWith();
  }
}

如果您在ScrollView中使用WebView，请在您的 MaterialApp 中添加以下内容以防止 StretchingOverscrollIndicator 问题：

import 'package:simple_platform_view/simple_platform_view.dart';

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    // 解决StretchingOverscrollIndicator问题
    scrollBehavior: SimplePlatformViewScrollBehavior(),
  );
}

其他使用方式与 webview_flutter 包相同。

iOS:

iOS不支持

示例

示例代码
import 'package:example/select_screen.dart';
import 'package:flutter/material.dart';
import 'package:simple_platform_view/simple_platform_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: SelectScreen(),
      // 解决StretchingOverscrollIndicator问题
      scrollBehavior: SimplePlatformViewScrollBehavior(),
    );
  }
}

更多关于Flutter网页视图展示插件simple_webview_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网页视图展示插件simple_webview_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simple_webview_flutter 是一个用于在 Flutter 应用中嵌入网页视图的插件。它提供了一个简单的接口来加载和显示网页内容。以下是如何使用 simple_webview_flutter 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 simple_webview_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_webview_flutter: ^1.0.0  # 请使用最新版本

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

2. 导入包

在需要使用网页视图的 Dart 文件中导入 simple_webview_flutter 包：

import 'package:simple_webview_flutter/simple_webview_flutter.dart';

3. 使用 WebView 组件

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

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

class WebViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        url: 'https://flutter.dev',  // 要加载的网页URL
        javascriptEnabled: true,     // 是否启用JavaScript
        withLocalStorage: true,      // 是否启用本地存储
        withZoom: true,              // 是否启用缩放功能
      ),
    );
  }
}

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

4. 运行应用

运行你的 Flutter 应用，你将会看到一个网页视图加载并显示指定的 URL。

5. 其他功能

simple_webview_flutter 还提供了其他一些功能，例如：

  • 加载本地 HTML 文件：你可以使用 loadHtmlString 方法来加载本地 HTML 字符串。
  • 监听页面加载事件：你可以通过 onPageStarted 和 onPageFinished 回调来监听页面加载的开始和结束事件。
WebView(
  url: 'https://flutter.dev',
  javascriptEnabled: true,
  onPageStarted: (String url) {
    print('Page started loading: $url');
  },
  onPageFinished: (String url) {
    print('Page finished loading: $url');
  },
),

6. 注意事项

  • iOS 配置：在 iOS 上使用 WebView 时，需要在 Info.plist 文件中添加以下配置以允许加载 HTTP 内容：
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
回到顶部