Flutter 如何创建自定义启动屏幕？_Flutter_Dart_Screen_Launch

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

flutter dart

Flutter 如何创建自定义启动屏幕？,flutter,dart,screen,launch,Flutter,Dart,Screen,Launch,我正在制作一个颤振应用程序，在第二个屏幕上有一个列表，这非常耗时。因此，我想到了一种启动屏幕或小部件，当列表在后台生成时，我会向用户显示我有一个布尔变量isLoading，如果列表已完全加载，该变量应更改为false 我怎样才能做到这一点以下是my main.dart中的代码： import 'package:LaunchScreen/screen2.dart'; import 'package:flutter/material.dart'; void main() => runAp

我正在制作一个颤振应用程序，在第二个屏幕上有一个列表，这非常耗时。因此，我想到了一种启动屏幕或小部件，当列表在后台生成时，我会向用户显示

我有一个布尔变量

isLoading

，如果列表已完全加载，该变量应更改为

false

我怎样才能做到这一点

以下是my 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]),
          );
        },
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
列表myList=[
“阿富汗”，
“阿尔巴尼亚”，
“阿尔及利亚”，
“安道尔”，
“安哥拉”，
“安提瓜和巴布达”，
“阿根廷”，
“亚美尼亚”，
“澳大利亚”，
“奥地利”，
“阿塞拜疆”，
];
类countryList扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
子项：ListView.builder(
itemCount:myList.length，
项目生成器：（ctx，i）{
返回容器(
子项：文本（myList[i]），
);
},
),
);
}
}

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

首先：

将

myHome

转换为

StatefulWidget

isLoading

不应是静态的。它属于小部件的状态

然后，您可以继续您的状态逻辑。默认情况下，您将执行的操作将显示加载页面，因此我们将执行

isLoading=true

，然后在渲染完任何内容后，您可以使用

setState

触发

build（）

函数再次运行，但这次使用

isLoading=false

下面是

\u MyHomeState

中的示例

build（）

方法，您可以查看完整示例。对于本例，我们将通过单击按钮调用

setState

，但您可以从

\u MyHomeState

中的任何位置调用它，即在您的

列表视图

呈现之后

bool isLoading=true；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“启动屏幕”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：脚手架(
appBar:appBar(
标题：文本（“启动屏幕”），
),
主体：容器(
孩子：孤岛
？中心(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
文本（“加载…”），
升起的按钮(
孩子：文本（“按我！”），
按下时：（）=>setState（（）=>isLoading=false））
]),
)
：Screen2（），
),
),
);
}

首先：

将

myHome

转换为

StatefulWidget

isLoading