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

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) {
      setState(() {
        response['message'].forEach((value) {
          items.add(Image.network(value));
        });
      });
    });
  }

  @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: items,
        ));
  }
}

当您从服务器异步获取数据时，您需要在从服务器获取数据后调用setState，以便重新构建窗口小部件。

Answer 2

我在这里看到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),
          ));
    }

Flutter：无法将列表动态添加到子代小部件列表

2 个答案: