第一百三十七回 WebView

最新推荐文章于 2025-08-15 11:12:02 发布

原创最新推荐文章于 2025-08-15 11:12:02 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发 #Flutter WebView #url_launch #浏览器组件 #webview_flutter

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章目录

概念介绍
使用方法
示例代码

我们在上一章回中介绍了WillPopScope组件相关的内容，本章回中将介绍 WebView组件.闲话休提，让我们一起Talk Flutter吧。

概念介绍

本章回中介绍的WebView组件主要用来显示网页内容，它类似于我们常用的浏览器，把它放在页面中相当于在页面中嵌套了一个浏览器。FlutterUI框架中没有提供WebView组件，我们需要在程序中导入三方包才能使用该组件。本章回将详细介绍WebView组件的使用方法.

使用方法

导入三方包:webview_flutter;
创建WebView的控制器，在控制器中添加url等信息；
创建WebView组件，并且把上一步中创建的控制器添加到组件中；

这三个步骤中，第二步操作是核心操作，这些操作与网页中的内容相关联，我们在遇到具体的场景后做详细分析。

示例代码

class _ExWebViewState extends State<ExWebView> {

  var webViewController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(Colors.lightGreen)
  ..setNavigationDelegate(
  NavigationDelegate( onProgress: (progress)=>print('onProgress'),
  ),
  )
  ..loadRequest(Uri.parse("https://.pub.dev"));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example of WebView'),
        backgroundColor: Colors.purpleAccent,
      ),
      body: Center(
        child: WebViewWidget(
          controller: webViewController,
        ),
      ),
    );
  }
}

上面的代码中没有演示引入三方包相关的代码，其它的代码完全按照上一小节中的步骤来实现。编译并且运行该程序，就会在程序的页面中显示pub.dev网站中的内容。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

此外，有些看官把WebView和url_launch这个包混淆了，虽然url_launch也可以打开网页，但是它是调用手机上的浏览器打开页面,而WebView是在程序当前页面打开网页，并没有使用手机上的浏览器。url_launch这个包类似Android原生开发中的intent.它只是在程序中添加信息(类似于给intent添加Action),然后让手机中与该信息匹配的程序来实现具体的功能。

比如，它添加了网页相关的信息，手机中的浏览器识别到这些信息后与自己匹配，就会启动浏览器来打开网页。它添加了音乐媒体信息，手机中的音乐播放器识别到这些信息与自己匹配就会打开音乐播放器播放音乐。

看官们，与"WebView组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!