如何在颤振中创建网页视图

Posted 2023-02-23

【中文标题】如何在颤振中创建网页视图

【英文标题】：How to create webview in flutter

【发布时间】：2021-04-21 03:10:08

【问题描述】：

我正在尝试在 Flutter 中使用 Web 视图。我关注了这篇中型文章，它描述了我们如何使用 Flutter embed webview 创建一个简单的应用程序。

https://medium.com/@ekosuprastyo15/webview-in-flutter-example-a11a24eb617f

我能够成功创建应用程序，但现在该应用程序在按钮单击时打开，如上面的文章所示。

我想要什么 - 现在我想创建一个在加载时在 webview 中加载 URL 的应用程序（即用户无需单击任何按钮或链接即可打开该 URL）。

到目前为止我们做了什么？

我们已经尝试过 Flutter url_launcher 插件和 flutter_webview_plugin插件。

【问题讨论】：

medium.com/flutter/…

【参考方案1】：

添加这个库Flutter WebView

import 'package:webview_flutter/webview_flutter.dart';

return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.io',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );

【讨论】：

我们如何使用这个插件添加滚动选项？

Webview 是自动滚动的。只需将其包装在具有屏幕高度的容器中即可。

非常感谢@Deepak Ror。还有一件事，我想问一下如何快速更改应用标题和应用图标？

要更改应用程序的标题，只需更改 main.dart。文件。当您想要更改应用程序图标时，不仅仅是替换项目 android 目录中的图标。 yourProject/Android/app/src/main/res/mipmap 文件夹

或者只是更改 App Manifest 文件中的图标。 android:icon="@mipmap/ic_launcher" 或 android:icon="@drawable/logo"

【参考方案2】：

如果您想在不按任何按钮的情况下直接打开您想要的网站，您应该提供初始网址。但你应该 nagivate.push 从其他页面到这里。就是这样；

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

class WebViewExample extends StatefulWidget 

  @override
  WebViewExampleState createState() => WebViewExampleState();


class WebViewExampleState extends State<WebViewExample> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: const Text("webview"),
      ),
      body: WebView(
        initialUrl: "https://www.google.com/",
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );