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

Question

GridView 列表

我正在尝试制作具有相同图像单元格高度的交错网格列表我找到了一个插件https://pub.dev/packages/flutter_staggered_grid_view但它对我不起作用，我需要第二列来获得一些空间和列高度应该一样，我该怎么办？

标签： flutterdartflutter-layoutflutter-dependenciesflutter-animation

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

输出：