时间戳

首页 > 解决方案 > 我想在共享首选项中保留 Web 视图

flutter - 我想在共享首选项中保留 Web 视图

问题描述

当我打开应用程序时，我想按原样显示我过去访问过的网页。作为初步步骤，实施 Webview 需要时间。

画面将从设置画面变为查看画面。首先，在设置画面中输入希望在 Webview 中显示的 URL。当您按下连接按钮时，屏幕将转换到以 URL 作为参数的视图屏幕。

在此处输入图像描述

在视图屏幕上，应该会显示带有此 URL 的页面，但它是一个空白屏幕，如下图所示。

在此处输入图像描述

从appbar中的文字，可以看到参数本身已经接收到了。

视图屏幕上的 view.dart 编码如下。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'Widgets/drawer.dart';

class ViewScreen extends StatefulWidget {
  static const routeName = '/view';
  final String url;

  viewScreen({Key key, @required this.url}) : super(key: key);

  @override
  State<StatefulWidget> createState() => ViewScreenState();
}

class ViewScreenState extends State<ViewScreen> {
  String _view = "message";

  void _load() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    setState(() {
      _view = pref.getString('url') ?? '';
    });
  }

  @override
  void initState() {
    super.initState();
    _load();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_view),
      ),
      drawer: DrawerScreen(),
      body: WebView(
        initialUrl: _view,
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: Set.from([
          JavascriptChannel(
              name: "getData",
              onMessageReceived: (JavascriptMessage result) {
              }),
        ]),
      ),
    );
  }
}

想知道是不是需要设置网络，直接把https://twitter.com/home写到initialUrl（你想在Webview中显示的URL设置为String的部分），连接建立了。

import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'Widgets/drawer.dart';

class ViewScreen extends StatefulWidget {
  static const routeName = '/view';
  final String url;

 ViewScreen({Key key, @required this.url}) : super(key: key);

  @override
  State<StatefulWidget> createState() =>ViewScreenState();
}

classViewScreenState extends State<ViewScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
     appBar: AppBar(
        title: Text(widget.url),
      ),
      drawer: _drawer(context),
      body: WebView(
        initialUrl: widget.url,
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: Set.from([
          JavascriptChannel(
              name: "getData",
              onMessageReceived: (JavascriptMessage result) {
              }),
        ]),
      ),
    );
  }
}

在此处输入图像描述

如果您有任何想法，如果您能指出来，我将不胜感激。

标签： flutterwebviewsharedpreferences

解决方案

您可以采用与我开发 Android 示例应用程序相同的方法：Flutter Browser。这是一个使用我的flutter_inappwebview插件开发的 Web 浏览器（如果你想看的话，可以在 Google Play 上发布） 。

我正在使用该provider 包进行状态管理，当发生触发 URL 更改的事件时，例如onLoadStart或，我使用插件onLoadStop保存当前的 WebView 选项卡 URL 。shared_preferences

我有 2 个主要模型：BrowserModel 和WebViewModel，其中第一个包含浏览器和每个 WebView 选项卡的所有一般信息/配置。每个 WebView Tab 都有自己WebViewModel的代表当前状态，例如 URL、启用/禁用配置等。

两者BrowserModel 和WebViewModel都转换为 JSON 格式并shared_preferences使用save() 和flush()方法保存（这两种方法都在此处BrowserModel的类中定义）。

当App完全关闭后被用户重新打开时，会检查是否有需要恢复的东西，如果有则通过该restore() 方法恢复用户一直打开的所有配置和WebView Tabs（可以找它在这里同一个BrowserModel班级）。

推荐阅读