【问题标题】:How to next activity after progress indicator in Flutter WebView?如何在 Flutter WebView 中的进度指示器之后进行下一个活动?
【发布时间】:2020-04-01 05:34:53
【问题描述】:

我正在尝试构建一个 webview 项目,我想在加载指示器后转到下一页,但它不工作,有什么我错过或搞砸的吗?我希望在加载指示器后我加载的 webviewsite 会自动显示。 我正在尝试构建一个 webview 项目,我想在加载指示器后转到下一页,但它不工作,有什么我错过或搞砸的吗?我希望在加载指示器后我加载的 webviewsite 会自动显示

这是我的代码-

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

【问题讨论】:

标签: flutter dart webview


【解决方案1】:

试试这个,它会很适合你


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

【讨论】:

    【解决方案2】:

    看起来您已将 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。

    【讨论】:

    • 我试过了,但它不起作用,我的意思是说我想在加载屏幕后重定向 webview。就像我想显示加载屏幕 5 秒然后它会自动关闭并显示 webview。
    • class _SplashScreenState extends State&lt;SplashScreen&gt; { @override void initState() { super.initState(); loadData(); } Future&lt;Timer&gt; loadData() async { return new Timer(Duration(seconds: 1), onDoneLoading); } onDoneLoading() async { Navigator.of(context) .push(MaterialPageRoute(builder: (context) =&gt; HomeScreen())); } 这有一个带有加载屏幕持续时间的计时器(在本例中为 SplashScreen),您可以将其设置为您想要的任何时间。
    • 此处未正确编辑 - 但您可以将内容隔开以了解该过程。希望有帮助!
    猜你喜欢
    • 1970-01-01
    • 2020-03-28
    • 2021-12-11
    • 1970-01-01
    • 2020-02-10
    • 2013-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多