(1)效果图:
(2)实现要点:
- 循环遍历很多数量的图片用到了list
- 图片尽可能的小,方便快速加载
- GridView主要用于实现商品列表
- 给widget设置高度无用,它会自适应(滚动加载所有图片)
- SizeBox实现文字图片的间距
(3)实现代码:
import 'package:flutter/material.dart';
import 'listData.dart';
class GridPage extends StatelessWidget {
List<Widget> _getListData() {
var tempList = listData.map((value) {
return Container(
child: Column(
children: <Widget>[
Image.asset(value["imageUrl"]),
SizedBox(
height: 12
),
Text(value["title"],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0
),),
],
),
decoration: BoxDecoration(
border: Border.all(color: Color.fromRGBO(233, 233, 233, 0.9),
width: 1
)
),
);
});
return tempList.toList();
}
Widget centerSection() {
return GridView.count(
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
padding: EdgeInsets.all(10),
crossAxisCount: 2,
children: this._getListData(),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("甜宠软妹"),
centerTitle: true,),
body: centerSection(),
);
}
}
listData.dart文件里面的代码
List listData = [{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
{
"title":"icecream",
"author":"candy",
"imageUrl":"images/candy.png",
},
];