Flutter

Flutter中的WebView是什么？

Flutter是一个开源应用程序开发环境，“ webview”是一个打包在手机应用程序中的程序，用于创建所谓的混合应用程序。

利用网页视图允许Flutter app  被开发利用为网络的进步，如HTML，JavaScript中，CSS，等等。但同时又像本机应用程序一样可以放置在应用程序商店中。此后，允许Flutter WebViews Developer使用众所周知的技术。

让我们通过一个例子来了解Flutter WebView。

我们将创建一个简单的Flutter Webview应用程序，在该应用程序中将有一个基本的主屏幕，其中包含一个用于打开URL的按钮。请按照以下步骤操作：

  1. 收集实现Webview所需的所有必需软件包。
  2. 导入以前收集的所有必要软件包。
  3. 要加载Web视图，请实施所需的路由。
  4. 实施路线后，添加导航。
  5. 最后，清除并刷新缓存。

请记住以下几点：

  1. Flutter没有随附默认小部件。但是，您可以在库的帮助下完成此操作。
  2. 为此，您必须导入分配给webview的包才能在应用程序中使用它。
  3. 您将从pubspec.yaml文件中获取软件包。添加flutter webview插件，然后单击get程序包。系统将为您导入所有必需的软件包。

以下是简单的flutter Webview应用程序的代码：

创建一个新的Flutter项目

与往常一样，我们将首先建立一个新项目(通过命令行方式)并添加插件：

# New Flutter project
$ flutter create my_webview_project

# Open this up inside of VS Code
$ cd my_webview_project && code .

添加WebView插件

接下来，我们需要webview_flutter在我们的插件中添加插件pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^0.3.14+1

然后，我们需要将适当的值添加到Info.plist，以选择嵌入的视图预览：

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

这就是所有必要的插件准备工作，我们现在可以在iOS或Android模拟器中打开应用程序。

给我们的项目创建一个Scaffold

现在，我们可以更新main.dart以包含HomePage我们稍后将创建的窗口小部件：

import 'package:flutter/material.dart';
import 'package:my_webview_project/home_page.dart';

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

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

该HomePage小部件将仅包含一个FlatButton带有onPressed事件的：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: FlatButton(
          child: Text("Open Webpage"),
          onPressed: () {},
        ),
      ),
    );
  }
}

使用WebView插件

让我们创建一个StatelessWidget命名MyWebView，我们可以使用一个用户导航到该页面时，我们要显示WebView的数据：

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

import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  final String title;
  final String selectedUrl;

  final Completer<WebViewController> _controller =
      Completer<WebViewController>();
      
  MyWebView({
    @required this.title,
    @required this.selectedUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: WebView(
          initialUrl: selectedUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        ));
  }
}

如果我们想要导航用户https://www.intoan.com，我们可以因此使用Navigator.push与selectedUrl等于https://www.intoan.com。让我们FlatButton在以下内容中更新我们的内容HomePage：

child: FlatButton(
  child: Text("Open Webpage"),
  onPressed: () {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (BuildContext context) => MyWebView(
              title: "剩者为王",
              selectedUrl: "https://www.intoan.com",
            )));
  },
),

我们终于得到它了！这是我们WebView显示剩者为王的主页

发表评论