Question

我正在尝试构建一个Webview项目，我想在加载指示器后转到下一页，但是它不起作用，是否有任何我错过或弄乱的东西？我想在加载指示器后，加载的Webview网站会自动显示。我正在尝试构建一个Webview项目，我想在加载指示器后转到下一页，但是它不起作用，是否有任何我错过或弄乱的东西？我想要加载指示器后，加载的Webview网站会自动显示

这是我的代码-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:web2app/widgets/drawer.dart';
import 'package:webview_flutter/webview_flutter.dart';

const String flutterUrl = 'https://flutter.dev/';
const String wikiUrl = 'https://google.com/';

class X extends StatefulWidget {
  XState createState() => XState();
}

class XState extends State<X> {
  WebViewController _controller;

  bool isLoading = false;

  @override
  void initState() {
    setState(() {
      isLoading = true;
    });
    super.initState();
  }

  _back() async {
    if (await _controller.canGoBack()) {
      await _controller.goBack();
    }
  }

  _forward() async {
    if (await _controller.canGoForward()) {
      await _controller.goForward();
    }
  }

  _loadPage() async {
    var url = await _controller.currentUrl();
    _controller.loadUrl(
      url == flutterUrl ? wikiUrl : flutterUrl,
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepOrange,
          title: Text('Web2App'),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.arrow_back_ios), onPressed: _back),
            IconButton(
                icon: Icon(Icons.arrow_forward_ios), onPressed: _forward),
            SizedBox(
              width: 10,
            ),
          ],
        ),
        drawer: Drawer(
          child: DrawerPage(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _loadPage,
          child: Icon(Icons.refresh),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                isLoading
                    ? Container(
                        child: CircularPercentIndicator(
                          radius: 120.0,
                          lineWidth: 13.0,
                          animation: true,
                          animationDuration: 4500,
                          percent: 1,
                          footer: new Text(
                            "Loading...",
                            style: new TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 17.0),
                          ),
                          circularStrokeCap: CircularStrokeCap.round,
                          progressColor: Colors.purple,
                        ),
                      )
                    : WebView(
                        key: Key('webview'),
                        initialUrl: flutterUrl,
                        javascriptMode: JavascriptMode.unrestricted,
                        onWebViewCreated:
                            (WebViewController webViewController) {
                          _controller = webViewController;
                        },
                      )
              ]),
        ));
  }
}

Answer 1

似乎您已经将isLoading设置为true，而从未更改。

`void initState() {
    setState(() {
      isLoading = true;
    });
    super.initState();
  }`

但是您还没有将isLoading设置为false来加载下一个屏幕

`isLoading ? Container()
//all your code for loading screen
//you could set the state of isLoading to false here
    : WebView()
    //All your WebView code`

您要说的是isLoading == true是否继续加载，但是在小部件内没有将其设置为false的情况。

Answer 2

尝试一下，它将与您一起正常工作


class WebViewScreen extends StatefulWidget {
  final String title;
  final String selectedUrl;

  WebViewScreen({@required this.title, @required this.selectedUrl});

  @override
  _WebViewScreenState createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  Completer<WebViewController> _controller = Completer<WebViewController>();
  bool isLoading = true;

  num position = 1;

  final key = UniqueKey();

  doneLoading(String A) {
    setState(() {
      position = 0;
    });
  }

  startLoading(String A) {
    setState(() {
      position = 1;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: IndexedStack(index: position, children: <Widget>[
          WebView(
            initialUrl: widget.selectedUrl,
            javascriptMode: JavascriptMode.unrestricted,
            key: key,
            onPageFinished: doneLoading,
            onPageStarted: startLoading,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
          ),
          Container(
            color: Colors.white,
            child: Center(child: CustomAppProgressBar),
          ),
        ]));
  }
}

如何在Flutter WebView中的进度指示器之后进行下一个活动？

2 个答案: