Flutter组件基础——GridView
原创
Flutter组件基础——GridView
GridView是网格布局，类似于iOS中的UICollectionView，可设置每行多少个、单个对象的宽高比、对象水平方向的间距、垂直方向的间距等等。
<!--more-->
GridView的常用属性
- GridView
- scrollDirection: 滑动方向
- Axis.horizontal: 水平方向滑动
- Axis.vertical: 垂直方向滑动，默认为这个。
- padding: GridView相对于父视图的边距
- crossAxisCount: 每行多少个
- mainAxisSpacing: 与滑动方向垂直的方向的间距，eg: 当横向滑动时，这个代表垂直方向对象之间的间距；
- crossAxisSpacing: 与滑动方向平行的方向的间距，eg: 当横向滑动时，这个代表水平方向对象之间的间距；
- childAspectRatio：单个元素的宽高比(或者高宽比)，当scrollDirection为vertical时，代表宽高比；当scrollDirection为horizontal时，代表高宽比。
- scrollDirection: 滑动方向
简单使用
代码如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GridView widget',
home: Scaffold(
body: GridView.count(
scrollDirection: Axis.vertical,
childAspectRatio: 2,
padding: const EdgeInsets.all(40.0),
crossAxisSpacing: 10.0,
mainAxisSpacing: 20.0,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sourd of screams but the'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.teal[600],
),
],
),
));
}
}效果如下：
<!--<img src="https://inews.gtimg.com/newsapp_ls/0/13801876945/0.png" style="width:200px" />-->
wecom20210723-152108.png
动态列表
代码如下：
class MyGridView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.builder(
padding: EdgeInsets.all(40.0),
scrollDirection: Axis.horizontal,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 20.0,
crossAxisSpacing: 10.0,
childAspectRatio: 2.0),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
return Card(
color: Colors.amber,
child: Center(
child: Text('$index'),
),
);
});
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(
title: new Text('GridView builder'),
),
body: MyGridView(),
),
);
}
}效果如下：
<!--<img src="https://inews.gtimg.com/newsapp_ls/0/13801891164/0.png" style="width:200px" />-->
wecom20210723-152407.png
参考
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录