Listview 如何在颤振中建立动态列表？

我将此小部件连接到

支架

主体。小部件获取一个返回json对象的

async

方法

我想从这个json对象动态地构建一个列表。问题是屏幕是空的。。出于某种原因，当列表准备就绪或类似情况时，此小部件需要刷新自身

有什么想法吗

class TestList extends StatelessWidget {
  final quiz;

  TestList({this.quiz});

  @override
  Widget build(BuildContext context) {
    var listArray = [];

    this.quiz.then((List value) {   // this is a json object

      // loop through the json object
      for (var i = 0; i < value.length; i++) {

        // add the ListTile to an array
        listArray.add(new ListTile(title: new Text(value[i].name));

      }
    });

    return new Container(
        child: new ListView(
      children: listArray     // add the list here.
    ));
  }
}

class TestList扩展了无状态小部件{
期末测验；
测试列表（{this.quick}）；
@凌驾
小部件构建（构建上下文）{
var listary=[]；
this.quick.then（（列表值）{//这是一个json对象
//循环遍历json对象
对于（变量i=0；i

您可以使用

设置状态来重建UI

例如：

class TestList extends StatefulWidget {

  final Future<List> quiz;

  TestList({this.quiz});

  @override
  _TestListState createState() => new _TestListState();

}

class _TestListState extends State<TestList> {

  bool loading = true;

  _TestListState(){
    widget.quiz.then((List value) {

      // loop through the json object
      for (var i = 0; i < value.length; i++) {

        // add the ListTile to an array
        listArray.add(new ListTile(title: new Text(value[i].name));

        }

            //use setState to refresh UI
            setState((){
          loading = false;
        });

    });
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> listArray = [];

    return new Container(
        child: new ListView(
            children: loading?[]:listArray     // when the state of loading changes from true to false, it'll force this widget to reload
        ));

  }

}

类TestList扩展StatefulWidget{
期末测验；
测试列表（{this.quick}）；
@凌驾
_TestListState createState（）=>new_TestListState（）；
}
类TestListState扩展了状态{
布尔加载=真；
_TestListState（）{
widget.quick.then（（列表值）{
//循环遍历json对象
对于（变量i=0；i
您可以使用FutureBuilder帮助处理小部件状态：

new FutureBuilder<List>(
  future: widget.quiz,
  builder:
      (BuildContext context, AsyncSnapshot<List> snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.none:
        return new Text('Waiting to start');
      case ConnectionState.waiting:
        return new Text('Loading...');
      default:
        if (snapshot.hasError) {
          return new Text('Error: ${snapshot.error}');
        } else {
          return new ListView.builder(
              itemBuilder: (context, index) =>
                  new Text(snapshot.data[index].name),
              itemCount: snapshot.data.length);
        }
    }
  },
)

new FutureBuilder(
未来：widget.quick，
建设者：
（BuildContext上下文，异步快照）{
交换机（快照.连接状态）{
案例连接状态。无：
返回新文本（“等待开始”）；
案例连接状态。正在等待：
返回新文本（'加载…'）；
违约：
if（snapshot.hasError）{
返回新文本（'Error:${snapshot.Error}'）；
}否则{
返回新的ListView.builder(
itemBuilder：（上下文，索引）=>
新文本（snapshot.data[index].name），
itemCount:snapshot.data.length）；
}
}
},
)

基本上，它会根据未来的状态通知builder上指定的方法。一旦future收到一个值并且不是错误，您可以使用ListView.builder创建列表，这是一种方便的方法，可以在所有项都属于同一类型时创建列表

更多信息，在类TestList中未定义
setState（）
hmm将您的TestList设置为StatefulWidget。等一下，我将编辑我的答案以实现StatefulWidget。我认为
setState（（）{loading=false；}）；
可能需要设置在循环之外是的，这肯定有些奇怪。如果我注释掉
setState（）
，
加载
在
小部件.quick.then中为false，除非我移动
bool load=true；
正好在它上面。并且
设置状态（（）{load=false；}）
在
小部件内。测验。然后..
出于某种原因执行无限循环。可能存在一些范围问题..虽然您的答案更符合异步标准，但我不知道为什么会收到多个调用和快照。执行hasrerror时，ListBuilder从未执行过