Question

我使用下面的代码在网格中显示卡片，它可以正常工作。

return new GridView.count(
  primary: false,
  padding: const EdgeInsets.all(1.5),
  crossAxisCount: 2,
  childAspectRatio: 0.80,
  mainAxisSpacing: 1.0,
  crossAxisSpacing: 1.0,
  children: _loadCategories(), //new Cards()
  shrinkWrap: true,
);

目前，横向和纵向的显示如下所示。

但我希望所有网格/卡（本例中为6个）完全填充视口。所有6张卡应该在视口中可见。目前，最后2张卡位于纵向视图端口下方，4张卡位于横向模式下方。

如何根据屏幕尺寸重新塑造所有卡片？

下面只是好奇：

是否可以使网格响应而不是连续修复项目？

EIDT 1：

我使用以下卡片6次以生成以下内容。

  List<Widget> _loadCategories() {
    List<Widget> categoryCells = [];
    List<CategoryItem> categories = new CategoryManager().categories();

    for (CategoryItem category in categories) {
      categoryCells.add(getStructuredGridCell(category));
    }

    return categoryCells;
  }

  Card getStructuredGridCell(CategoryItem item) {
    return new Card(
      elevation: 2.0,
      color: item.color,
      child: new InkWell(
        highlightColor: Colors.white.withAlpha(30),
        splashColor: Colors.white.withAlpha(20),
        child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            verticalDirection: VerticalDirection.down,
            children: <Widget>[
              new Image(image: new AssetImage(item.iconUri)),
              new Center(
                child: new Text(item.title),
              )
            ]),
        onTap: () {
          _tappedCategoryCell(item.routeName);
        },
      ),
    );
  }

Answer 1

使用MediaQuery来请求屏幕尺寸。

然后，您可以根据此值自定义布局。

Answer 2

我希望这能做得到。

public Object someMethod(){

    CompletableFuture.allOf(futureArray1).join();
    CompletableFuture.runAsync() -> // Do something for futureArray2).thenAllOf(futureArray2);
}

然后其余的工作。

Answer 3

使用屏幕的宽度来了解网格中必须设置多少行

double width=MediaQuery.of(context).size.width;
int widthCard= (YOUR WIDTH FOR ONE COLOM);    

int countRow=width~/widthCard;

**注意：宽度将为横向模式下屏幕（窗口）的高度，因此此代码在横向方向上也可以正常工作

根据屏幕尺寸

3 个答案: