Flutter IndexedStack替代方案

Question

像flutter上的IndexedStack这样的东西有没有替代品？我以前用过IndexedStack，但我的WebView应用程序感觉很慢，有时在某些设备上会崩溃。GitHub中有人说这是使用IndexedStack和SetState的原因。有没有避免崩溃和提高WebView性能的解决方案？供您参考，我在本例中使用了InAppWebView包。

我想在onLoadStart时显示这样的加载屏幕，然后在onLoadStop时显示WebView页面。

​

​

下面是我的示例应用程序代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class SimpleWebiew extends StatefulWidget {
  @override
  _SimpleWebiewState createState() => _SimpleWebiewState();
}

class _SimpleWebiewState extends State<SimpleWebiew> {
  num _stackToView = 1;
  InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text('Simple WebView'),
        centerTitle: true,
      ),
      body: IndexedStack(
        index: _stackToView,
        children: [
          Opacity(
            opacity: _stackToView == 0 ? 1 : 0,
            child: InAppWebView(
              initialUrlRequest: URLRequest(
                url: Uri.parse('https://flutter.dev/'),
              ),
              onWebViewCreated: (InAppWebViewController controller) {
                _webViewController = controller;
              },
              onReceivedServerTrustAuthRequest: (controller, _challenge) async {
                return ServerTrustAuthResponse(
                  action: ServerTrustAuthResponseAction.PROCEED,
                );
              },
              initialOptions: InAppWebViewGroupOptions(
                android: AndroidInAppWebViewOptions(
                  allowContentAccess: true,
                  builtInZoomControls: true,
                  thirdPartyCookiesEnabled: true,
                  allowFileAccess: true,
                  geolocationEnabled: true,
                  supportMultipleWindows: true,
                ),
                crossPlatform: InAppWebViewOptions(
                  useShouldOverrideUrlLoading: true,
                  useOnDownloadStart: true,
                  allowFileAccessFromFileURLs: true,
                  allowUniversalAccessFromFileURLs: true,
                ),
              ),
              onLoadStart: (inAppWebViewController, uri) {
                setState(() {
                  _stackToView = 1;
                });
              },
              onLoadStop: (inAppWebViewController, uri) {
                setState(() {
                  _stackToView = 0;
                });
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 50.0),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.network(
                    'https://raw.githubusercontent.com/duythien0912/flutter_zalo_login/master/flutter.jpeg',
                    width: 200.0,
                    height: 200.0,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 5.0),
                    child: Text(
                      'Connecting to server ',
                      style: TextStyle(
                        fontSize: 15,
                        color: Colors.red,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

您也可以使用AnimatedSwitcher：Youtube

AnimatedSwitcher类似于IndexedStack，所以如果有帮助的话，请先试一试。

或者您只需使用内联if语句来实现您想要的功能。如下所示：

bool _isLoading = true;
...
_isLoading ? LoadingWidget : WebView

如果正在加载，将显示LoadingWidget，否则将显示WebView。

并且调试版本总是很慢。在发布版本上试用：flutter run --release