Flutter-GridView(UICollectionVie
2019-04-01 本文已影响0人
今晚月色
Flutter
GridView
类似于iOS中的UICollectionView
,等于把UICollectionViewLayout集成在一起。与ListView类似里面的children
可以是任意的Widget
, 这个就是简单的用法,代码仅供参考!
void main() => runApp(WudanCollectionView());
class WudanCollectionView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Class Name",
home: Scaffold(
appBar: AppBar(title: Text("CollectionView"),),
body: Center(
child: GridView.count(
padding: EdgeInsets.all(10), // 内边距
scrollDirection: Axis.vertical, // 滚动方向
crossAxisSpacing: 10, // 列间距
crossAxisCount: 3, // 每行的个数(Axis.vertic == 横向三个, Axis.horizontal == 竖方向三个)
mainAxisSpacing: 10, // 行间距
children: <Widget>[
new Container(
color: Colors.lightBlue,
),
new Container(
color: Colors.lightGreen,
),
new Container(
color: Colors.red,
),
new Container(
color: Colors.orange,
),
new Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554110093883&di=9db9b92f1e6ee0396b574a093cc987d6&imgtype=0&src=http://n.sinaimg.cn/sinacn20/151/w2048h1303/20180429/37c0-fzvpatr1915813.jpg",
fit: BoxFit.cover,
),
],
),
),
),
);
}
}
属性介绍
- padding:内边距
- scrollDirection:滚动方向
- crossAxisSpacing:列间距
- mainAxisSpacing:行间距
- crossAxisCount: 每行的个数(Axis.vertic == 横向三个, Axis.horizontal == 竖方向三个)
-
children:子视图数组
示例图