Question

这是一个简单的代码，可以根据随机数显示不同的文本。当用户按下“下一步”按钮并且方法“ getRandom”延迟5秒时，我想显示CircularProgressIndicator。

CircularProgressIndicator永远不会显示...为什么？

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}


class MyAppState extends State<MyApp> {
  Future<String> random;

  @override
  void initState() {
    super.initState();
    random = getRandom();
  }

  Future<String> getRandom() async{
    print("getRandom");
    Future.delayed(const Duration(seconds: 5));
    return "the number is"+Random().nextInt(100).toString();
  }


  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
          appBar: AppBar(title: Text("Random Widget")),
          body: Center(child:
          FutureBuilder(
              future:random,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Column(children: [
                    Text(snapshot.data,textScaleFactor: 4),
                    getNextButton()
                  ]);
                } else if (snapshot.hasError) {
                  return Text("ERROR");
                }
                return CircularProgressIndicator();
              }
          )
      )),
    );
  }

  Widget getNextButton(){
      return RaisedButton(
          child: Text("NEXT"),
          color: Colors.red,
          onPressed: () {
            setState(() {
              random=getRandom();
            });
          }
      );
  }
}

提前谢谢！

Answer 1

如果您未在FutureBuilder中使用initialData字段，则删除后代码将起作用。如果出于某种原因需要该值，请在末尾添加以下语句：

if(snapshot.data != 'starting') {
  return CircularProgressIndicator();
}

有关使用方法的示例，请参见docs

Answer 2

您的代码中有几个错误。

您正在传递initialData。因此，snapshot.hasData在一开始便是正确的。
您不是第一次初始化随机变量。
您必须等待Future.delay

更改getRandom实现：

Future<String> getRandom() async{
   await Future.delayed(const Duration(seconds: 5));
   return "the number is"+ Random().nextInt(100).toString();
}

实施initState初始化随机未来：

@override
void initState() {
  super.initState();
  random = getRandom();
}

更改将来的构建器：

FutureBuilder(
   future:random,
   builder: (context, snapshot) {
      if (snapshot.hasData && snapshot.connectionState == ConnectionState.done) {
         return Column(children: [
            Text(snapshot.data,textScaleFactor: 4),
            getNextButton()
          ]);
       } else if (snapshot.hasError) {
          return Text("ERROR");
       }
       return CircularProgressIndicator();
    }
)

为什么此代码未显示CircularProgressIndicator？

2 个答案: