Flutter IndexedStack 替代方案答案

【问题标题】：Flutter IndexedStack alternativeFlutter IndexedStack 替代方案
【发布时间】：2021-04-24 05:55:45
【问题描述】：

在颤振上是否有类似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,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

您也可以使用 AnimatedSwitcher：Youtube

AnimatedSwitcher 类似于 IndexedStack，所以 IDK 如果有帮助，请先尝试一下。

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

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

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

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

【讨论】：