我对Flutter 翼是个新手,我正在努力学习这个平台.因此,在这里,我试图将json占位符中的信息显示到一个alert 对话框中,当按下main.dart中的按钮时被激活(我没有在这里包括代码).当数据加载时,我希望alert 对话框出现,并显示一个循环进度指示器,在数据加载之后,进度指示器被3个容器替换.

    import 'dart:math';
    import 'dart:convert';
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    showAlertDialog(BuildContext context)async
    {
      Map res=await fetchData();
      Color bc=(res["id"]%2==0)?(const Color.fromARGB(255, 44, 255, 2)):(const Color.fromARGB(255,255,0,    0));
     AlertDialog alert=AlertDialog
     (
       title: const Text("TextFromNet"),
       content:Column
       (
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,
         children:
         [
         Container
         (
          //text from res and color bc
        ),
        const SizedBox(height:15),
        Container
        (
          //text from res and color bc
        ),
        const SizedBox(height:15),
        Container
        (
          //text from res and color bc
        ),
       ]
      )
     );
    showDialog
    (
      context:context,
      builder:(BuildContext context){return alert;},
     );

    return const CircularProgressIndicator();
     }
    fetchData()async
    {
      final response=await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/${Random().nextInt(100)}'));
     if(response.statusCode==200) {return json.decode(response.body);}
     else {throw Exception('Failed to Fetch');}
    }

目前alert 对话框在按下该按钮大约1秒后出现,我希望此时在alert 对话框内显示一个循环进度指示器,标题为"TextFrom Internet".我试着寻找一些方法,但我想不出一条明确的路.我猜我必须做一些与alert 对话框状态相关的事情,但我不确定.请帮帮忙.我已经从容器中删除了代码以使代码更短.

推荐答案

因为你是新来的,我试着让它变得尽可能简单,你只需要适应你的情况.

如果我们正在等待一些值来加载我们的屏幕,使用FutureBuilder是很聪明的,因为它就是为它而生的:

ShowDialog方法:

Future<void> showCustomDialog() async {
  return await showDialog(
    context: context,
    barrierDismissible: false,
    // barrierDismissible: true or false, if you want to your dialog be closed in case your user clicks outside of it.
    builder: (context) {
      return AlertDialog(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        backgroundColor: const Color.fromRGBO(0, 0, 0, 1), //Your Theme.
        title: const Text(
          'Your title',
          style: TextStyle(color: Colors.white),
        ),
        content: SizedBox(
          //It's not a bad idea to set your Dialog to a fixed sized.
          height: 250,
          width: 250,
          child: FutureBuilder(
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      //Here you put your final widgets
                      Text(
                        snapshot.data!,
                        style: const TextStyle(color: Colors.white),
                      ),
                    ]);
              } else {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    SizedBox(
                      //Here's the loading indicator
                      width: 55,
                      height: 55,
                      child: CircularProgressIndicator(
                        color: Colors.white,
                      ),
                    ),
                  ],
                );
              }
            },
            future: fetchData(),
          ),
        ),
        actions: [
          //Actions are optional, you can insert TextButtons like this
          TextButton(
            style: ButtonStyle(
                overlayColor:
                  MaterialStateColor.resolveWith((states) => Colors.blue),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12.0),
                      side: const BorderSide(color: Colors.blue)))),
            onPressed: () => Navigator.of(context).pop(true),
            child: const Text(
              'Close',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ],
      );
    },
  );
 }

FetchData方法,它带来了我们的数据.

Future<String> fetchData() async {
    String stringReturn = ''; // You can start your variables as null and then handle if no data is found.
  await Future.delayed(const Duration(milliseconds: 4000)).then((value) {
    stringReturn = 'String returned from future fetchData()';
  });
  return stringReturn;
}

现在,只需按一个按钮就可以呼叫它,就像这样: (在我的例子中,它在脚手架中:)

floatingActionButton: FloatingActionButton(
    onPressed: showCustomDialog,
    tooltip: 'ShowDialog',
    child: const Icon(Icons.add),
  ), 

如果您需要更多帮助,请查看以下内容: https://www.youtube.com/watch?v=zEdw_1B7JHY(FutureBuilder-本周小工具)

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

https://medium.flutterdevs.com/explore-futurebuilder-in-flutter-9744203b2b8c篇(中等文章通常也有很好的信息!)

Flutter相关问答推荐

带有可滚动页面(不包括分页区)的Flutter 页面视图

如果文档确实存在,则FiRestore将";False";返回到";if-Document-Existes";...还是我说错了?

TextFormfield无法与自动路由一起正常工作

IsScrollable为True时如何删除Flutter 选项卡栏左侧填充

如何将Xpriter代码页更改为代码页27?

确保通过在CheckIfFavoriteMovieEvent((event,emit){...})上注册处理程序误差

Flutter 块消费者仅对特定的状态属性更改做出react

hooks_riverpod 有用途吗

Flutter屏幕适配 - 在模拟器和真实手机上文本尺寸不同

如何使用Riverpod提供程序正确构建搜索栏?

如何在 cupertino switch flutter 中添加文本

Flutter Websockets MacOS:相同的代码在调试模式下有效,但在发布模式下无效:(操作系统错误:提供了 node 名或服务名..)

我怎样才能一次只选中一个复选框?

Flutter:制作自定义小部件的最佳做法是什么?

使用 Chaquopy 插件后 Gradle Sync 无法正常工作

如何在dart中编写多个条件?

如何将变量翻译成其他语言

如何使用我拥有的 .jks 文件签署我的应用程序

设计响应式卡片的最佳方法,以避免像素溢出错误或 _AssertionError

如何在Flutter 的 initState 中初始化 Firestore 查询