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

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

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

native_webview 是一个允许你在Flutter应用中嵌入WebView的插件。它旨在提供iOS和Android标准的WebView功能，同时保持实现简单。

动机

虽然Flutter已经有一些用于处理WebViews的库，但它们各有优缺点。有些库实现简单但缺乏功能，而另一些则功能非常强大但实现复杂。native_webview旨在为用户提供由iOS和Android提供的标准WebView功能，同时保持实现简单。

要求

  • Dart: >=2.10.0 <3.0.0
  • Flutter: >=1.22.0 <2.0.0
  • Android: minSdkVersion 24, AndroidX, Kotlin, Chrome版本>=74.0.3729.185
  • iOS: iOS版本>=11.0, Xcode版本>=11, Swift

快速开始

使用方法

下面是一个简单的示例，展示了如何在Flutter应用中使用native_webview来加载初始URL：

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

class InitialUrlScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Initial URL"),
      ),
      body: WebView(
        initialUrl: "https://flutter.dev",
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: InitialUrlScreen()));

如果你想要查看更多例子，可以参考GitHub上的示例或查看DartDoc文档。

已知问题

运行测试

测试位于example/integration_test/tests目录下。你需要启动iOS模拟器或Android模拟器来运行这些测试。

make test

完整示例Demo

这里提供一个更完整的示例，包括多个WebView的例子，用户可以通过点击列表中的选项来导航到不同的WebView示例页面：

import 'package:flutter/material.dart';
// 假设你已经导入了所有必要的包
// import 'package:native_webview_example/screens/basic_auth_screen.dart';
// ... 其他导入

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final items = [
    // 列表中的每个项代表一个不同的WebView示例屏幕
    InitialUrlScreen(),
    // InitialDataScreen(),
    // ... 其他示例屏幕
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('native_webview example app'),
        ),
        body: ListView.builder(
          itemBuilder: (context, index) {
            final item = items[index];
            return ListTile(
              title: Text(item.toString()),
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => item,
                  ),
                );
              },
            );
          },
          itemCount: items.length,
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用native_webview插件来展示网页视图的代码示例。这个示例展示了如何集成native_webview插件，并在Flutter应用中加载一个网页。

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

dependencies:
  flutter:
    sdk: flutter
  native_webview: ^0.7.0  # 请注意版本号，根据实际情况选择最新版本

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

接下来，创建一个Flutter项目（如果你还没有的话），并在lib/main.dart文件中编写以下代码：

import 'package:flutter/material.dart';
import 'package:native_webview/native_webview.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 _controller = WebViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Demo'),
      ),
      body: WebView(
        initialUrl: 'https://www.example.com', // 替换为你想要加载的URL
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
        onPageFinished: (String url) {
          print("Page finished loading: $url");
        },
        gestureNavigationEnabled: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 使用控制器执行一些操作，比如前进或后退
          // await _controller.future.then((controller) {
          //   controller.goBack();
          // });
        },
        tooltip: 'Action',
        child: Icon(Icons.add),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

这个示例代码做了以下几件事：

  1. 依赖添加：在pubspec.yaml文件中添加了native_webview依赖。
  2. 主应用：创建了一个简单的Flutter应用，其中包含一个WebViewDemo页面。
  3. WebViewDemo页面：
    • 使用WebView小部件来展示网页。
    • 设置了初始加载的URL（在这个例子中是https://www.example.com）。
    • 启用了JavaScript（javascriptMode: JavascriptMode.unrestricted）。
    • 在onWebViewCreated回调中完成了WebViewController的初始化。
    • 在onPageFinished回调中打印了页面加载完成的URL。
    • 添加了一个浮动操作按钮（FAB），虽然在这个例子中它没有执行任何操作，但你可以通过取消注释相关代码来使用控制器执行一些操作，比如前进或后退。

这个代码提供了一个基本的框架，你可以根据需要进一步扩展和自定义。例如，你可以添加更多的按钮来控制WebView的行为，或者处理更复杂的URL加载逻辑。

回到顶部