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

Question

我想在每 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,
    ),
  );

标签： fluttergridviewstaggered-gridview

Answer 1

@w461 给出的答案非常简单，唯一的问题是您将跳过小部件的每个第 7gridTile个小部件，如果这是预期的行为，那么 @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,
          ),
        ));
  }
}