GridView 是一个网格布局的列组件。GridView 继承至 CustomScrollView,有 CustomScrollView 的特性。
通常,我们可以利用 GridView 构建这样的界面。
String imgsrc = 'http://5b0988e595225.cdn.sohucs.com/images' +
'/20171218/342e43903694448b91698b5ce7623314.jpeg';
List<Widget> buildGridTileList(int number) {
List<Widget> widgetList = new List();
for (int i = 0; i < number; i++) {
widgetList.add(new Container(
decoration: new BoxDecoration(
color: Colors.white,
image: new DecorationImage(
image: new NetworkImage(this.imgsrc),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
boxShadow: <BoxShadow>[
new BoxShadow(
offset: new Offset(0.0, 1.0),
blurRadius: 2.0,
color: const Color(0xffaaaaaa),
),
],
),
));
}
return widgetList;
}
// GridView 默认滚动方向是垂直的。
new GridView.count(
padding: const EdgeInsets.all(8.0),
primary: false,
mainAxisSpacing: 12.0, // 竖向间距
crossAxisCount: 3, // 横向 Item 的个数
crossAxisSpacing: 12.0, // 横向间距
children: buildGridTileList(15),
),