在Listview.builder中建立索引 [英] Indexing in Listview.builder

问题描述

我从REST api获得的响应看起来像这样

The response i get from my REST api looks like this

{
    "result": {
        "newsfeed": [
            {
                "_id": "5fa52495f0e30a0017f4dccf",
                "video": null,
                "image": null,
                "author": [
                    {
                        "_id": "5f6a412d2ea9350017bec99f",
                        "userProfile": {
                            "visits": 0,
                            "bio": "Nothing for you ",
                            "gender": "Male",
                            "university": "Bells University Of Technology"
                        },
                        "name": "Jo Shaw ",
                        "__v": 0
                    }
                ],
                "text": "have you seen this ?",
                "campus": "Technology",
                "isLiked": false
            }
        ]
    }
}

我正在使用FutureBuilder来处理数据提取，并且FutureBuilder返回一个ListView.builder，用于根据响应中的项目数来构建布局

I am using a FutureBuilder to handle fetching the data and the FutureBuilder returns a ListView.builder which i use to build my layout depending on the number of items in the response

这是我的用户界面代码

     return Scaffold(
        body: FutureBuilder<TimelineModel>(
          future: _future,
          builder: (context, snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
                return Text('none');
              case ConnectionState.waiting:
                return Center(
                  child: CircularProgressIndicator(),
                );
              case ConnectionState.active:
                return Text('');
              case ConnectionState.done:
                if (snapshot.hasError || snapshot.data == null) {
                  return Scaffold(
                    backgroundColor: Theme.of(context).backgroundColor,
                    body: Column(
                      children: [
                        Container(
                          child: Center(
                            child: Text("It's empty here"),
                          ),
                        ),
                      ],
                    ),
                  );
                }  else {
                  print("length: " +
                      snapshot.data.result.newsfeed.length.toString());
                  return RefreshIndicator(
                    onRefresh: _getData,
                    child: ListView(
                      children: [
                        ListView.builder(
                            itemCount: snapshot.data.result.newsfeed.length,
                            itemBuilder: (context, index) {
                              return Column(
                                      children: <Widgets>[
//This line of code works properly and no error is gotten 
                                    Text( snapshot.data.result.newsfeed[index].text),

//Once I put in this line of code, i receive a range error (RangeError (index): Invalid value: Only valid value is 0: 1)
                                  Text(snapshot.data.result.newsfeed[index].author[index].name),
                                 ],
                              );
                           }
                         )
                       ]
                     )
                   )
                 }
               }
             }
           )
         );

这是我尝试执行snapshot.data.result.newsfeed [index] .author [index] .name或使用author数组内的对象中的任何项目时看到的错误

This is the error seen when i try to do snapshot.data.result.newsfeed[index].author[index].name or use any of the items in the object inside the author array

推荐答案

正如@xion所述，您正在对 author 数组使用 newsfeed 索引.您应该做的是将每个 newsfeed 项目中的所有作者分配给字符串，然后使用该值.下面的代码可让您对应该执行的操作有所了解.由于我无权访问您的API，因此我对您的json响应进行了硬编码.

As @xion mentioned, you are using newsfeed index for author array. What you should do is assign all authors within each newsfeed item to string and then use that value instead. Below is the code to give you an idea on what you should do. Since i don't have access to your API, i hardcoded your json response.

class MyApp extends StatefulWidget {
  MyApp({Key key, this.title}) : super(key: key);

  final String title;

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  var testJson = json.decode('''
  {
    "result": {
      "newsfeed": [
        {
          "_id": "5fa52495f0e30a0017f4dccf",
          "video": null,
          "image": null,
          "author": [
            {
              "_id": "5f6a412d2ea9350017bec99f",
              "userProfile": {
                "visits": 0,
                "bio": "Nothing for you ",
                "gender": "Male",
                "university": "Bells University Of Technology"
              },
              "name": "Jo Shaw ",
              "__v": 0
            },
            {
              "_id": "5f6a412d2ea9350017bec99f",
              "userProfile": {
                "visits": 0,
                "bio": "Nothing for you ",
                "gender": "Male",
                "university": "Bells University Of Technology"
              },
              "name": "Jo Shaw ",
              "__v": 0
            }
          ],
          "text": "have you seen this ?",
          "campus": "Technology",
          "isLiked": false
        }
      ]
    }
  }
  ''');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Center(
              child: ListView(children: [
                ListView.builder(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: testJson["result"]["newsfeed"].length,
                    itemBuilder: (context, index) {
                      String authors = '';
                      List<dynamic> authorsArray = testJson["result"]["newsfeed"][index]["author"];
                      for (int i = 0; i < authorsArray.length; i++) {
                        authors += i == (authorsArray.length - 1) ? authorsArray[i]["name"].toString() : authorsArray[i]["name"].toString() + ", ";
                      }
                      return Column(
                        children: [
                          Padding(
                            padding: EdgeInsets.all(10.0),
                            child: Text(
                              "Title: " +
                                  testJson["result"]["newsfeed"][index]["text"],
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 18.0),
                            ),
                          ),
                          Text("Authors: " + authors,
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontStyle: FontStyle.italic)),
                        ],
                      );
                    }),
              ]),
            ),
        ),
    );
  }
}

屏幕截图:

这篇关于在Listview.builder中建立索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！