颤动中具有相同单元格高度的动态交错网格

Question

GridView List

我正在尝试制作具有相同图像单元格高度的交错网格列表我找到了一个插件 https://pub.dev/packages/flutter_staggered_grid_view 但它对我不起作用，我需要第 2 列来降低一些 space 并且列高应该相同，我应该怎么做？

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,
      );
  }
}

输出：

颤动中具有相同单元格高度的动态交错网格

Dynamic staggered grid with same cell height in flutter

dart

flutter

flutter-dependencies

flutter-layout

flutter-animation