flutter - 如何创建自定义启动屏幕？

我正在制作Flutter应用程序，在第二个屏幕上有一个列表，该列表非常耗时。因此，我想到了在后台构建列表时向用户显示的启动屏幕或小部件。
我有一个 bool(boolean) 变量isLoading，如果列表已完全加载，则应更改为false。
我该如何实现？
这是我的main.dart中的代码:

import 'package:LaunchScreen/screen2.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Launch Screen', theme: ThemeData(), home: MyHome());
  }
}

class MyHome extends StatelessWidget {
  static var isLoading = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Launch Screen',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Launch Screen"),
        ),
        body: Container(
          child: isLoading
              ? Center(
                  child: Text("Loading..."),
                )
              : Screen2(),
        ),
      ),
    );
  }
}

这是显示列表的窗口小部件的代码:

import 'package:flutter/material.dart';

List<String> myList = [
  "Afghanistan",
  "Albania",
  "Algeria",
  "Andorra",
  "Angola",
  "Antigua and Barbuda",
  "Argentina",
  "Armenia",
  "Australia",
  "Austria",
  "Azerbaijan",
];

class countryList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        itemCount: myList.length,
        itemBuilder: (ctx, i) {
          return Container(
            child: Text(myList[i]),
          );
        },
      ),
    );
  }
}

加载一些列表项并不是什么大问题，但是稍后它应该通过json加载整个列表。

最佳答案

第一:

将myHome转换为StatefulWidget。

isLoading不应为静态。它属于Widget的状态。

然后，您可以继续执行状态逻辑。默认情况下，您将执行的操作将显示加载页面，因此我们将执行isLoading = true，然后在完成任何渲染后，可以使用setState触发build()函数再次运行，但这一次是isLoading = false。
这是build()中的示例_MyHomeState方法，您可以查看完整的示例on DartPad。在此示例中，我们将通过单击按钮来调用setState，但您可以在_MyHomeState内部的任意位置调用它，即，在ListView呈现之后。

bool isLoading = true;

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Launch Screen',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text("Launch Screen"),
      ),
      body: Container(
        child: isLoading
            ? Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("Loading..."),
                      RaisedButton(
                          child: Text("Press me!"),
                          onPressed: () => setState(() => isLoading = false))
                    ]),
              )
            : Screen2(),
      ),
    ),
  );
}

关于flutter - 如何创建自定义启动屏幕？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62561240/