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

Posted 2023-02-23

【中文标题】颤动中具有相同单元格高度的动态交错网格

【英文标题】：Dynamic staggered grid with same cell height in flutter

【发布时间】：2020-04-27 20:03:16

【问题描述】：

GridView List

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

【问题讨论】：

你想让第二列有一些空间吗？

如果您的交错网格视图的子级都具有相同的高度，则每个子级将显示相同的高度。

是的，我需要第二个项目才能下来 - Naveen Avidi

【参考方案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,
      );
  

输出：

【讨论】：

谢谢，但我需要相同的图像高度并从第 2 列下来

你的意思是，所有图像的高度都应该是共同的？

是的，我正在尝试所有常见的图像高度，如下面的链接i.stack.imgur.com/8t9yP.png