Question

在颤振上有没有像 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 类似，因此 IDK 如果有帮助，请先尝试一下。

或者你只是使用内联 if 语句来实现你想要的。像这样：

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

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

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

Flutter IndexedStack 替代方案

1 个答案: