flutter - 交错网格视图无法在 2 列中显示数据

问题描述

我是 Dart 的新手，所以如果这个问题看起来微不足道或不需要，我深表歉意！

我想为我的提要实现 Pinterest 样式的网格布局，只有 2 列。我正在使用staggered_grid_layout并尝试从 stackoverflow 问题中实现答案。到目前为止，这是我的代码：

主页.dart

SizedBox(
            height: 535,
            width: 180,
            child: new StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) => Card(
                child: Column(
                  children: <Widget>[
                    Image.network(storiesList[index]),
                    Text("Some text"),
                  ],
                ),
              ),
              staggeredTileBuilder: (int index) =>
              new StaggeredTile.fit(2),
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
          )

链接到完整代码

注意：我添加了，SizedBox()因为我遇到了Vertical viewport was given unbounded height错误，如果不行，请推荐一个替代方案

谢谢！

编辑：现在的样子

编辑：它应该看起来如何

标签： flutterlistviewflutter-layoutflutter-widgetstaggered-gridview

感谢更新，查看下面的代码不需要 StaggeredGridView 而是使用 GridTile，

GridView.count(
          physics: const NeverScrollableScrollPhysics(),
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          crossAxisCount: 2,
          childAspectRatio: 1.0,              
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: new List<Widget>.generate(3, (index) {
            return new GridTile(
              child: InkResponse(
                child: new Card(
                // color:Colors.white,
                child: new Center(
                  child: new Text('XYZ'),
                 ),
                ),
                enableFeedback: true,
                onTap: () => _onSelected(index, items[index].toString().substring(0,10)), // Whatever you want on tap
                ),
              );
          }),
        ),

flutter - 交错网格视图无法在 2 列中显示数据

问题描述

解决方案

推荐阅读