了解 Flutter 中的 Future 和 Completer ....如何使用 controller 從 webview 加載新的 url

Question

我無法在 flutter Webview 中加載新的 URL... 我在 flutter Webview Controller 中使用then和Future時遇到問題...

在 flutter Webview中，我想加載initialUrl ，然后以編程方式從該 web 頁面檢索一些信息......到目前為止一切正常......但后來我希望Webview自動加載另一個網頁......但我是不確定如何使用controller和Completer來做到這一點

片段：

WebView(
  initialUrl: 'https://flutter.dev',
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
    },
  onPageFinished: (String url) async{
    if (url == 'https://flutter.dev') {
      // *** I retrieve some data, then I want to navigate ***
      _controller!.loadUrl('https://google.com'); // *** ERROR HERE ***
    }
  },
)

我嘗試直接使用controller ，

_controller!.loadUrl('https://google.com');

如果我不使用Completer而只是分配controller ，它就會工作

_controller = webViewController;

但似乎不是推薦的選擇：

我找到了其他使用FutureBuilder的示例，但我沒有嘗試構建任何東西

這是完整的代碼，以防有用：

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

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  final Completer<WebViewController> _controller = Completer<WebViewController>();
  
  @override Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter WebView'),),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
          },
        onPageFinished: (String url) async{
          if (url == 'https://flutter.dev') {
            // *** I retrieve some data, then I want to navigate ***
            _controller!.loadUrl('https://google.com'); // *** ERROR HERE ***
          }
        },
      ),
    );
  }
}

Answer 1

關於在那種情況下如何使用完成器的主題！

將onPageFinished回調替換為以下代碼片段並仔細閱讀評論

  onPageFinished: (String url) async{
              // add the missing '/' at the end of the url since the url string is 'https://flutter.dev/' 
              // NOT 'https://flutter.dev'
              if (url == 'https://flutter.dev/') {
                // *** I retrieve some data, then I want to navigate ***
                final wvController = await _controller.future;
                await wvController.loadUrl('https://google.com');
                // ***
                // No More ERROR
                // HERE ***)
              }
            },

Answer 2

最好的方法是使用迭代器和控制器。 不需要弄亂索引。 調用moveNext() function后，更新迭代器中的URL。 也可以用controller的loadUrl() function打開一個新的URL。

import 'dart:io';

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

class SamplePage extends StatefulWidget {
  const SamplePage({super.key});

  @override
  State<SamplePage> createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  late WebViewController _webViewController;
  Iterable<String> urlStrings = [
    'https://www.google.com/',
    'https://www.yahoo.com/',
    'https://www.bing.com/',
    'https://flutter.dev/',
    'https://altavista.com/'
  ];
  late Iterator<String> urlIterator;

  @override
  void initState() {
    super.initState();
    // init url iterator.
    urlIterator = urlStrings.iterator;
    urlIterator.moveNext();

    // Enable virtual display.
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        onWebViewCreated: (controller) => setState(() => _webViewController = controller),
        initialUrl: urlIterator.current,
        onPageFinished: (url) {
          urlIterator.moveNext();
          _webViewController.loadUrl(urlIterator.current);
        },
      ),
    );
  }
}