Flutter网页视图插件easy_web_view2的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter网页视图插件easy_web_view2的使用

easy_web_view2 是一个在 Flutter 应用中嵌入网页视图的强大插件。它不仅支持在 Web 和移动平台上显示 HTML 内容或单个元素，还支持 Markdown 源码，并且可以将 Markdown 转换为 HTML。

特性

  • 支持 HTML 内容或单个元素
  • 支持 Markdown 源码
  • 支持转换为 Flutter 小部件
  • 支持远程 URL 下载
  • 支持 Markdown 到 HTML 的转换
  • 支持 HTML 到 Markdown 的转换
  • 支持 URL 更改
  • 支持可选文本
  • 支持在同一屏幕上显示多个视图（如果提供了唯一的键）

在线演示

您可以查看在线演示：在线演示

安装

首先，在您的 pubspec.yaml 文件中添加依赖项：

dependencies:
  easy_web_view2: ^版本号

然后运行 flutter pub get 来获取新的依赖项。

配置

对于 iOS 设备，需要在 Info.plist 中添加以下配置：

<key>io.flutter.embedded_views_preview</key>
<true/>

使用示例

以下是一个简单的示例，展示了如何在 Flutter 应用中使用 easy_web_view2 插件。

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Easy Web View',
      theme: ThemeData.light(),
      home: HomeScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String src = "https://www.example.com";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Web View Example'),
      ),
      body: Center(
        child: EasyWebView(
          // 网页源地址
          src: src,
          // 是否使用 HTML 语法
          isHtml: false,
          // 是否使用 Markdown 语法
          isMarkdown: false,
          // 尝试转换为 Flutter 小部件
          convertToWidgets: false,
          // 可以设置宽度和高度
          width: 300,
          height: 300,
          // 提供唯一键以支持多个视图
          key: UniqueKey(),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个名为 HomeScreen 的状态管理类，并在其中定义了一个 src 字符串来存储要加载的 URL。然后在 build 方法中使用 EasyWebView 小部件来显示网页内容。

通过调用 setState 可以轻松更改 URL 或调整视图的大小和位置。

// 更改 URL
setState(() {
  src = "https://www.new-example.com";
});

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用easy_web_view2插件的示例代码。easy_web_view2是一个用于在Flutter应用中嵌入WebView的插件，它提供了丰富的功能，比如加载网页、处理JavaScript等。

首先，确保你已经在pubspec.yaml文件中添加了easy_web_view2的依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_web_view2: ^x.y.z  # 请替换为最新版本号

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

接下来，是一个简单的Flutter应用示例，展示了如何使用easy_web_view2来加载一个网页：

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

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

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

class WebViewDemo extends StatefulWidget {
  @override
  _WebViewDemoState createState() => _WebViewDemoState();
}

class _WebViewDemoState extends State<WebViewDemo> {
  final EasyWebViewController _controller = EasyWebViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Demo'),
      ),
      body: EasyWebView(
        controller: _controller,
        url: 'https://www.example.com',  // 替换为你想加载的网页URL
        onWebViewCreated: (controller) {
          // WebView创建完成后的回调，可以在这里做一些初始化操作
          print('WebView created!');
        },
        onLoadStarted: (controller, url) {
          // 网页开始加载时的回调
          print('Loading started: $url');
        },
        onLoadStopped: (controller, url) {
          // 网页加载完成时的回调
          print('Loading stopped: $url');
        },
        javascriptMode: JavascriptMode.unrestricted,  // 允许执行JavaScript
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 示例：通过JavaScript注入与WebView交互
          String result = await _controller.evaluateJavascript('document.title');
          print('Page title: $result');
        },
        tooltip: 'Evaluate JS',
        child: Icon(Icons.code),
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    _controller.dispose();
    super.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个WebView组件。EasyWebView组件接受几个重要的参数：

  • controller：用于控制WebView的EasyWebViewController实例。
  • url：要加载的网页的URL。
  • onWebViewCreated：当WebView创建完成时的回调。
  • onLoadStarted：当网页开始加载时的回调。
  • onLoadStopped：当网页加载完成时的回调。
  • javascriptMode：设置为JavascriptMode.unrestricted以允许执行JavaScript。

此外，我们还添加了一个浮动操作按钮（FAB），点击它可以执行JavaScript代码来获取当前网页的标题，并通过控制台打印出来。

这个示例展示了如何使用easy_web_view2插件在Flutter应用中嵌入并控制一个WebView。你可以根据需要进一步自定义和扩展这个示例。

回到顶部