无法在交错列表视图颤动中显示不同的小部件答案

【问题标题】：Unable to show different widgets in staggered list view flutter无法在交错列表视图颤动中显示不同的小部件
【发布时间】：2021-03-21 13:21:45
【问题描述】：

我想在每 7 个索引后显示不同的小部件，为此我有以下代码。但问题是在每第 7 个索引之后，我必须从列表中显示一个不同的小部件 - 'listOfWidgets'，如代码中所示。简而言之，在第 7 个索引之后，我想显示该列表的第一个元素，然后在第 14 个索引之后显示第二个，依此类推。

代码：-

return StaggeredGridView.countBuilder(
    shrinkWrap: true,
    crossAxisCount: 3,
    itemCount: gridTile.length,
    itemBuilder: (context,index)=>index % 7 == 0 ? listOfWidgets[]: gridTile[index],
    staggeredTileBuilder: (index)=>StaggeredTile.count(
      1,(index%7==0)?2:1,
    ),
  );

【问题讨论】：

标签： flutter gridview staggered-gridview

【解决方案1】：

@w461 给出的答案非常简单，唯一的问题是您将跳过gridTile 小部件的每个第 7 个小部件，如果这是预期的行为，那么@w461 的答案非常适合这个用例，如果没有，请查看以下实现：

最终输出：

完整源代码：

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class StaggeredExample extends StatelessWidget {

  List gridTile = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35",
  ];
  List listOfWidgets = ["Listone","Listtwo","Listthree","Listfour","ListFive","ListSix",
  ];

/**
 * in the following function, i am merging the gridTile and listOfWidgets
 * where element of listOfWidgets is inserted every 7'th place.
 * after that the list to solution is returned which we will
 * use in the StaggeredGridView.countBuilder. 
 */

  List driverFunction() {
    List solution = [];
    int j = 0;
    for (int i = 0; i < gridTile.length; i++) {
      if ((solution.length + 1) % 7 == 0) {
        solution.add(listOfWidgets[j]);
        solution.add(gridTile[i]);
        j++;
      } else {
        solution.add(gridTile[i]);
      }
    }
    return solution;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Staggered Example"),
        ),
        body: StaggeredGridView.countBuilder(
          shrinkWrap: true,
          crossAxisCount: 3,
          itemCount: driverFunction().length,
          itemBuilder: (context, index) => Card(
              color: (index + 1) % 7 == 0 ? Colors.greenAccent : Colors.amber,
              child: Center(
                  child: Text(
                driverFunction()[index],
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ))),
          staggeredTileBuilder: (index) => StaggeredTile.count(
            1,
            (index % 7 == 0) ? 2 : 1,
          ),
        ));
  }
}

【讨论】：

感谢您的积极思考，因为您提到的问题不是问题的一部分 :-) 除了有趣之外，很高兴知道这种方法。我，作为一个数学家，会为 `gridTile[index] 创建一些有趣的表达式来完成这个：-D
我希望我擅长数学:)，我羡慕数学家。

【解决方案2】：

除非我误解了这个问题，否则这将是一个简单的数学问题：

index % 7 == 0 ? listOfWidgets[index / 7]: gridTile[index]

【讨论】：