Flutter - 加载沉重的小部件时防止交互

如何解决Flutter - 加载沉重的小部件时防止交互

看看这个由 Visibility 小部件创建的例子：

https://user-images.githubusercontent.com/7369151/125171550-16608600-e1ca-11eb-8aad-b674a2aae49d.mp4

我认为没有办法放置加载栏或任何解决方法，因为会影响所有交互，您应该等到 HeavyPage 加载结束。

// ignore_for_file: sized_box_for_whitespace

import 'package:arsa_shop_admin/HeavyPage.dart';

import 'package:arsa_shop_admin/TinyPage.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

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

class _MainPageState extends State<MainPage> {
  // final _bodyScaffold = GlobalKey();
  bool hide = false;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Column(
      children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(padding: const EdgeInsets.all(20)),onPressed: () {
            setState(() {
              hide = !hide;
            });
          },child: const Text("Toggle"),),Container(
          width: 50,height: 50,padding: const EdgeInsets.symmetric(vertical: 10),child: const CircularProgressIndicator(),Container(
          width: 500,height: 300,decoration:
              BoxDecoration(border: Border.all(color: Colors.black,width: 1)),child: Stack(
            children: [
              Visibility(
                child: const HeavyPage(),visible: hide,Visibility(
                child: const TinyPage(),visible: !hide,],));
  }
}

颤动医生 --verbose :

[✓] Flutter (Channel master,2.4.0-1.0.pre.94,on Ubuntu 20.04.2 LTS
    5.8.0-59-generic,locale en_US.UTF-8)
    • Flutter version 2.4.0-1.0.pre.94 at /home/mrtdeh/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba143ae21e (3 days ago),2021-07-06 22:01:02 -0700
    • Engine revision 60eea42346
    • Dart version 2.14.0 (build 2.14.0-284.0.dev)
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /media/mrtdeh/softwares/android-tools
    • Platform android-30,build-tools 29.0.3
    • ANDROID_HOME = /media/mrtdeh/softwares/android-tools
    • ANDROID_SDK_ROOT = /media/mrtdeh/softwares/android-tools
    • Java binary at: /usr/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_292-8u292-b10-0ubuntu1~20.04-b10)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from
      https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup
      for detailed instructions).

[✓] VS Code (version 1.57.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.24.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114

! Doctor found issues in 1 category.

pubspec.yaml :

name: arsa_shop_admin
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots,like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number,respectively.
# In Android,build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS,build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available,run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  get: ^4.1.4
  

dev_dependencies:
  build_runner: ^2.0.6
  build_web_compilers: ^3.2.0
  build_test: any
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0
  

# For information on the generic Dart part of this file,see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application,so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application,add an assets section,like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants",see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies,see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application,add a fonts section here,# in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name,and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,# see https://flutter.dev/custom-fonts/#from-packages

在所有浏览器上测试并测试构建模式但问题仍然存在， 这个问题甚至适用于其他小部件，例如：offstage、opacity、pageView 以及当 push 进入新屏幕时， 在“android”和“web”上进行测试。