在 ListView 中使用 setState答案

【问题标题】：Use setState in ListView在 ListView 中使用 setState
【发布时间】：2020-04-10 19:06:50
【问题描述】：

我试图从两个表中获取数据并显示到 ListView。

 child: Container(
                  child: StreamBuilder<List<ABC>>(
                      stream: _abcBloc
                          .getListStream,
                      builder: (context, snapshot) {
                        switch (snapshot.connectionState) {
                          case ConnectionState.waiting:
                            return Center(
                              child: Image.asset(
                                'assets/loading.gif',
                                width: 200.0,
                                height: 200.0,
                              ),
                            );
                            break;

                          case ConnectionState.active:
                            if (snapshot.data.isEmpty) {
                              return Container(child: Text('empty'));
                            } else {
                              return ListView.builder(
                                  shrinkWrap: true,
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (context, index) {
                                    var _reading = snapshot.data[index];
                                    var name;

                                    _abcBloc.getName(_reading.Id)
                                        .then((onValue) {
                                      name = onValue.name;
                                    });

                                    return InkWell(
                                        onTap: () {},
                                        child: Padding(
                                          padding: EdgeInsets.all(10),
                                          child: Column(
                                            children: <Widget>[
                                              Text(name == null ? '' : name),
                                            ],
                                          ),
                                        ));
                                  });
                            }
                            break;

                          default:
                            return Text("edwqd");
                        }
                      }))

首先它会调用_abcBloc.getListStream。我能够得到这一行的数据 (var _reading = snapshot.data[index];)。

之后，我想通过调用此函数_abcBloc.getName(_reading.Id) 从另一个表中获取名称。但是，名称总是显示为空。

【问题讨论】：

试试这个：name = await _abcBloc.getName(_reading.Id); 它应该可以工作，因为name 被用作Text 的值。

标签： listview flutter dart setstate

【解决方案1】：

每当您使用 Future 并根据您未来的价值创建小部件时，您应该始终使用 FutureBuilder。

将您的 ListView.builder 替换为以下代码：

ListView.builder(
  shrinkWrap: true,
  itemCount: snapshot.data.length,
  itemBuilder: (context, index) {
  var _reading = snapshot.data[index];
  var name;

  // _abcBloc.getName(_reading.Id)
  //     .then((onValue) {
  //   name = onValue.name;
  // });

  return FutureBuilder(
    future: _abcBloc.getName(_reading.Id),
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if(!snapshot.hasData) return Container();
      name = snapshot.data;
      return InkWell(
      onTap: () {},
      child: Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Text(name == null ? '' : name),
          ],
        ),
      ))
    },
  );
});

希望对您有所帮助，如有任何疑问，请发表评论。如果它对您有用，请不要忘记接受并投票给答案。

【讨论】：

我已经更新了我的答案，希望对您有所帮助。如有任何疑问，请发表评论。