Flutter for loop with json sublist

Question

我有一个json，它有一个列表值，我想在gridview.builder下使用这个值，我试着用" for“它只取第一个列表的第一项，并根据相关索引的长度重复它，比如第一个(878,878)，第二个(878,878,878)等等，我错过了什么？

我的目标是获得相关类型的it (我稍后会把它们的名字)旁边的相关卡，但现在看起来是这样；

​

​

我的代码和json示例如下；

body: Container(
                    padding: EdgeInsets.all(4),
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    child: GridView.builder(
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: mediaQueryData.orientation == Orientation.portrait ? 1 : 2,
                          childAspectRatio: mediaQueryData.orientation == Orientation.portrait ? MediaQuery.of(context).size.height/MediaQuery.of(context).size.width/1.05  : MediaQuery.of(context).size.width/(MediaQuery.of(context).size.height-29),
                        ),
                        itemCount: snapshot.data.results.length,
                        itemBuilder: (context, index) {
                          return
                            Padding(
                              padding: const EdgeInsets.all(3.0),
                              child: Container(
                                child: Stack(
                                  alignment: AlignmentDirectional.center,
                                  children: <Widget>[
                                    InkWell(
                                      onTap:  (){
                                        setState(() {
                                          firstRun = true;
                                          String tempName;
                                          tempName = _name;
                                          String name = "imdbid=${snapshot.data.results[index].id}&language=${AppLocalizations.of(
                                              context)
                                              .translate(
                                              'lan_code')}@$tempName";
                                          saveNamedPreference(name).then((
                                              bool committed) {Navigator.of(context).pushNamed(
                                              MovieDetailPage.routeName);
                                          });
                                        });
                                      },
                                      child: Container(
                                        width: MediaQuery.of(context).size.width,
                                        alignment: Alignment.bottomLeft,
                                        height: 245,
                                        child: Stack(
                                          alignment: Alignment.centerLeft,
                                          children: <Widget>[
                                            Card(
                                              margin: EdgeInsets.only(top: 40),
                                              elevation: 5,
                                              child: Stack(
                                                children: <Widget>[
                                                  Container(
                                                    padding:EdgeInsets.only(right:10.0),
                                                    alignment: Alignment.bottomRight,
                                                    child: CircularPercentIndicator(
                                                      radius: 40.0,
                                                      lineWidth: 5.0,
                                                      percent: snapshot.data.results[index].voteAverage/10,
                                                      center: Stack(
                                                        children: <Widget>[
                                                          Text(
                                                            snapshot.data.results[index].voteAverage.toString(),
                                                            style: TextStyle(
                                                              foreground: Paint()
                                                                ..style = PaintingStyle.stroke
                                                                ..strokeWidth = 3
                                                                ..color = Colors.black,
                                                            ),
                                                          ),
                                                          new Text(snapshot.data.results[index].voteAverage.toString(),
                                                            style: TextStyle(
                                                              fontWeight: FontWeight.bold,
                                                              color: Colors.amber,),),
                                                        ],
                                                      ),
                                                      progressColor: Colors.amber,
                                                    ),
                                                  ),
                                                  Container(
                                                    padding: mediaQueryData.orientation == Orientation.portrait ? EdgeInsets.only(left:170.0, top: 10) : EdgeInsets.only(left:140.0, top: 10),
                                                    alignment: Alignment.topLeft,
                                                    child: Column(
                                                      mainAxisAlignment: MainAxisAlignment.start,
                                                      crossAxisAlignment: CrossAxisAlignment.start,
                                                      children: <Widget>[
                                                        Text("${snapshot.data.results[index].title}",
                                                          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Theme.of(context).brightness == Brightness.dark  ? Colors.white : Colors.black,shadows: [
                                                            Shadow(color:Colors.grey,blurRadius: 0,offset: Offset(0,2)),
                                                          ]),maxLines: 3, textAlign: TextAlign.left,),
                                                        Text("(${snapshot.data.results[index].releaseDate.toString().substring(0,4)})",
                                                            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Theme.of(context).brightness == Brightness.dark  ? Colors.white : Colors.black,shadows: [
                                                              Shadow(color:Colors.grey,blurRadius: 0,offset: Offset(0,2)),
                                                            ]),maxLines: 1, textAlign: TextAlign.left),
                                                        Container(
                                                          width: 150,
                                                          height: 120,
                                                          child: GridView.builder(
                                                              shrinkWrap: true,
                                                            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                                              crossAxisCount: 3,
                                                              childAspectRatio: 2/1,),
                                                            itemCount: snapshot.data.results[index].genreIds.length,
                                                            itemBuilder: (context, index) {
                                                                  for(var i = 0; i < snapshot.data.results[index].genreIds.length; i++, index++){
                                                                    print("${snapshot.data.results[index].genreIds.toString()}");
                                                                    return Text("${snapshot.data.results[index].genreIds.toString()}",);
                                                              }
                                                            return Container();}),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                            Card(
                                              elevation: 3,
                                              child: Padding(
                                                padding: mediaQueryData.orientation == Orientation.portrait ? const EdgeInsets.all(6.0) : const EdgeInsets.all(4.0),
                                                child: Container(
                                                  alignment: Alignment.centerLeft,
                                                  width: mediaQueryData.orientation == Orientation.portrait ? 140 : 120,
                                                  height: 245,
                                                  child:  ClipRRect(
                                                    borderRadius: BorderRadius.circular(15.0),
                                                    child: Image.network(
                                                      snapshot.data.results[index].posterPath != null ? "http://image.tmdb.org/t/p/w500/${snapshot
                                                          .data.results[index].posterPath}" : "https://i.hizliresim.com/bbn0VB.jpg", fit: BoxFit.contain,),
                                                  ),
                                                ),
                                              ),
                                            ),

                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                        }
                    ),
                  ),

Answer 1

首先，为了避免混淆，可以在两个构建器中以不同的方式命名index变量，然后您可以很容易地看到，您可以使用两个索引而不是for循环：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(...),
  itemCount: snapshot.data.results.length,
  itemBuilder: (context, index) {
    return GridView.builder(
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(...),
      itemCount: snapshot.data.results[index].genreIds.length,
      itemBuilder: (context, indexGenre) {
        return Text("${snapshot.data.results[index].genreIds[indexGenre].toString()}");
      },
      return Container();
    );
  }
)

如果你仍然想以一种更“程序化”的方式使用你的循环，那么直接使用GridView默认构造函数(而不是GridView.builder构造函数)，这样你就可以“手动”构建孩子的列表：

GridView(
  children: <Widget>[
    for (var film in snapshot.data.results)
      GridView(
        children: <Widget>[
          for (var genre in film.genreIds)
            Text("${genre.toString()}")
        ],
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(...),
      )
  ],
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(...),
),

请注意，最后一个解决方案需要Dart > 2.3。