Flutter Widget 之GridView

313 阅读1分钟

你曾经在一列中创建多行复杂布局?

image.png

哇,我希望有更简单的方法来创建网格

GridView可以帮助你。

虽然有许多GridView构造函数,但创建GridView的最常见方法是使用count构造函数。

首先在网格中列出你想要的所有项目, 但你所要做的不仅于此

通过设置crossAxisCount属性来控制你想要在网格中显示的项目数量。设置为1使它看起来像一个正常的列表

GridView.count(
    crossAxisCount: 1,
    children: [allItems],
)

image.png

但设置为4呢?这就是另一个层次了

GridView.count(
    crossAxisCount: 4,
    children: [allItems],
)

image.png

如果你的item想要一些间距呢? mainAxisSpacing提供给行与行之间的水平空间

GridView.count(
    mainAxisSpacing: 20.0,
    crossAxisCount: 4,
    children: [allItems],
)

image.png

而crossAxisSpacing提供列与列之间的垂直空间

GridView.count(
    crossAxisSpacing: 20.0,
    crossAxisCount: 4,
    children: [allItems],
)

image.png

它最棒的一点是:就像listView一样你可以滚动浏览你的项目。

ezgif.com-gif-maker.gif

不要忘记检查gridview的其他构造函数,如builder、custom和extent构造函数

如果想了解有关GridView 的内容,或者关于Flutter的其他功能,请访问flutter.dev

原文翻译自视频:视频地址