Flutter:无法动态添加 List 到 Children Widget List

Question

我想将图片动态添加到 GridView.Count 子列表中，但它不起作用。没有给出错误。

class _View1State extends State<View1> {
 String url = "https://dog.ceo/api/breed/hound/images/random/6";

  Future<Map> makeRequest() async {
    final response = await http
    .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});

   return json.decode(response.body);
  }

  List<Widget> items = new List();

  @override
  void initState() {
   super.initState();

    this.makeRequest().then((response) {
      response['message'].forEach((value) {
        items.add(Image.network(value));
      }).whenComplete(() => setState((){}));
   });
 }

 @override
 Widget build(BuildContext context) {
  return new Scaffold(
   appBar: new AppBar(
    title: new Center(child: new Text('Environment Sounds')),
   ),
   body: GridView.count(
    primary: false,
    padding: const EdgeInsets.all(20.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 2,
    children: List.generate(items == null ? 0 : items.length, (index) {
      return Image.network(items[index]);
    })
  ));
 }
}

是否需要执行其他操作才能使其正常工作？如果是这样，我还应该添加什么。

感谢所有更新了我的工作解决方案。

Answer 1

我在这里看到 2 个错误:

1- 您需要调用 setState 以使用从服务器获取的值刷新您的小部件。2- 似乎 GridView.count 没有正确处理 didUpdateWidget，所以你可以使用 GridView.builder

    @override
    void initState() {
      super.initState();
      this.makeRequest().then((response) {
        response['message'].forEach((value) {
          items.add(Image.network(value));
        });
      }).whenComplete(() {
        setState(() {});
      });
    }

    @override
    Widget build(BuildContext context) {
      return new Scaffold(
          appBar: new AppBar(
            title: new Center(child: new Text('Environment Sounds')),
          ),
          body: GridView.builder(
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemBuilder: (context, index) {
              return items[index];
            },
            itemCount: items.length,
            padding: const EdgeInsets.all(5.0),
          ));
    }