flutter - flutter 中具有相同像元高度的动态交错网格

Question

GridView List

我正在尝试使用相同的图像单元格高度制作交错网格列表
我找到了https://pub.dev/packages/flutter_staggered_grid_view插件，但对我不起作用，
我需要第二列才能腾出一些空间，并且列高度应该相同，该怎么办？

Answer 1

flutter_staggered_grid_view插件。

试试这个:

  class MyHomeScreen extends StatefulWidget {
   @override
   _MyHomeScreenState createState() => _MyHomeScreenState();
  }

class _MyHomeScreenState extends State<MyHomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Staggered Grid View with image demo"),),
      body: Center(
        child: sliverGridWidget(context),
      ),
    );
  }

  Widget sliverGridWidget(BuildContext context){
    return StaggeredGridView.countBuilder(
        padding: const EdgeInsets.all(8.0),
        crossAxisCount: 4,
        itemCount: 10, //staticData.length,
        itemBuilder: (context, index){
          return Card(
            elevation: 8.0,
            child:InkWell(
             child: Hero(
               tag: index,// staticData[index].images,
               child: new FadeInImage(
                 width: MediaQuery.of(context).size.width,
                 image: NetworkImage("https://images.unsplash.com/photo-1468327768560-75b778cbb551?ixlib=rb-1.2.1&w=1000&q=80"), // NetworkImage(staticData[index].images),
                 fit: BoxFit.cover,
                 placeholder: AssetImage("assets/images/app_logo.png"),
               ),
             ),
             onTap: (){
               //
              }
            )
          );
        },
         staggeredTileBuilder: (index) => StaggeredTile.count(2,index.isEven ? 2: 3),
         mainAxisSpacing: 8.0,
         crossAxisSpacing: 8.0,
      );
  }
}

输出: