我想在 Shared Preferences 中保留一个 Webview

Question

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

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

enter image description here

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

enter image description here

从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) {
              }),
        ]),
      ),
    );
  }
}

enter image description here

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

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用FutureBuilder、widget，它基于与Future 交互的最新快照构建自身。
代码sn-p

  Future<String> _future;  

  Future<String> _load() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    _view = pref.getString('url') ?? '';
    return Future.value(_view);
  }

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

  @override
  Widget build(BuildContext context) {
  ...
        body: FutureBuilder(
            future: _future,
            builder: (context, AsyncSnapshot<String> snapshot) {
              switch (snapshot.connectionState) {
                ...
                case ConnectionState.done:
                  if (snapshot.hasError) {
                    return Text(
                      '${snapshot.error}',
                      style: TextStyle(color: Colors.red),
                    );
                  } else {
                    return WebView(
                      initialUrl: _view,
                      javascriptMode: JavascriptMode.unrestricted,
                      javascriptChannels: Set.from([
                        JavascriptChannel(
                            name: "getData",
                            onMessageReceived: (JavascriptMessage result) {}),
                      ]),
                    );
                  }
              }
            }));

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:shared_preferences/shared_preferences.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> {
  Future<String> _future;
  String _view = "message";

  Future<String> _load() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    _view = pref.getString('url') ?? '';
    return Future.value(_view);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(_view),
        ),
        //drawer: DrawerScreen(),
        body: FutureBuilder(
            future: _future,
            builder: (context, AsyncSnapshot<String> snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return Text('none');
                case ConnectionState.waiting:
                  return Center(child: CircularProgressIndicator());
                case ConnectionState.active:
                  return Text('');
                case ConnectionState.done:
                  if (snapshot.hasError) {
                    return Text(
                      '${snapshot.error}',
                      style: TextStyle(color: Colors.red),
                    );
                  } else {
                    return WebView(
                      initialUrl: _view,
                      javascriptMode: JavascriptMode.unrestricted,
                      javascriptChannels: Set.from([
                        JavascriptChannel(
                            name: "getData",
                            onMessageReceived: (JavascriptMessage result) {}),
                      ]),
                    );
                  }
              }
            }));
  }
}

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences pref = await SharedPreferences.getInstance();
  await pref.setString('url', 'https://twitter.com/home');
  runApp(MyApp());
}

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

Answer 2

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

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

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

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

当App完全关闭并被用户重新打开时，它会检查是否有要恢复的东西，如果有，它会通过@987654341恢复用户打开的所有配置和WebView Tabs @ 方法（您可以在同一个BrowserModel 类here 中找到它）。