网格布局组件GridView可以实现多行多列布局的应用场景。使用GridView创建网格列表有多种方式:
- GridView.count:通过单行展示个数创建
- GridView.extent:通过最大宽度创建
常用属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
scrollDirection | Axix | Axis.vertical | 滚动的方向,Axis.vertical为垂直方向,是默认值,Axis.horizontal为水平方向 |
reverse | bool | false | 默认是从上或者左,向下或者右滚动的,这个属性控制是否反向,默认值为false |
controller | ScrollController | - | 控制child滚动时的位置 |
primary | bool | - | 是否是父节点的PrimaryScrollController所关联的主滚动视图 |
phisics | ScrollPhysics | - | 滚动的视图如何响应用户的输入 |
shrinkWrap | bool | false | 滚动方向的滚动视图内容是否应该由正在查看的内容所决定 |
padding | EdgInsetsGeometry | - | 四周的空白区域 |
gridDelegate | SliverGridDelegate | - | 控制GridView中子节点布局的delegate |
cacheExtent | double | - | 缓存区域 |
示例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GridView示例'),
),
body:
// GridView.count(
// crossAxisCount: 2, //交叉轴
//// scrollDirection: Axis.horizontal,
// childAspectRatio: 3 / 4, //1.0宽高比
// children: List.generate(100, (index) {
// return Container(
// color: Color(0xffff0000),
// margin: EdgeInsets.all(10.0),
// child: Text(
// '$index',
// style: TextStyle(fontSize: 20.0),
// ),
// );
// }),
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
print('$index');
return Container(
color: Color(0xffff0000),
margin: EdgeInsets.all(10.0),
child: Text(
'$index',
style: TextStyle(fontSize: 20.0),
),
);
}),
));
}
}
显示效果: