GridView 列表组件
GridView可以创建一个二维网格列表.
构造方法
GridView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required this.gridDelegate,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List children = const [],
int semanticChildCount,
}) : assert(gridDelegate != null),
childrenDelegate = SliverChildListDelegate(
children,
addAutomaticKeepAlives: addAutomaticKeepAlives,
addRepaintBoundaries: addRepaintBoundaries,
addSemanticIndexes: addSemanticIndexes,
),
super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: semanticChildCount ?? children.length,
);
通过 GridView.builder 实现网格布局
GridView.builder({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required this.gridDelegate,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
int semanticChildCount,
}) : assert(gridDelegate != null),
childrenDelegate = SliverChildBuilderDelegate(
itemBuilder,
childCount: itemCount,
addAutomaticKeepAlives: addAutomaticKeepAlives,
addRepaintBoundaries: addRepaintBoundaries,
addSemanticIndexes: addSemanticIndexes,
),
super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: semanticChildCount ?? itemCount,
);
通过 GridView.count 实现网格布局
GridView.count({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required int crossAxisCount,
double mainAxisSpacing = 0.0,
double crossAxisSpacing = 0.0,
double childAspectRatio = 1.0,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List children = const [],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
}) : gridDelegate = SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: mainAxisSpacing,
crossAxisSpacing: crossAxisSpacing,
childAspectRatio: childAspectRatio,
),
childrenDelegate = SliverChildListDelegate(
children,
addAutomaticKeepAlives: addAutomaticKeepAlives,
addRepaintBoundaries: addRepaintBoundaries,
addSemanticIndexes: addSemanticIndexes,
),
super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: semanticChildCount ?? children.length,
dragStartBehavior: dragStartBehavior,
);
常用属性
| 属性名 | 功能 | 值所属类型 |
|---|---|---|
| scrollDirection | 滚动方法 | Axis |
| padding | 内边距 | EdgeInsetsGeometry |
| resolve | 组件反向排序 | bool |
| crossAxisSpancing | 水平子Widget之间间距 | double |
| mainAxisSpancing | 垂直子Widget 之间间距 | double |
| crossAxisCount | 一行Widget的数量 | int |
| childAspectRatio | 子widget的宽高比例 | double |
| children | 子控件 | |
| gridDelegate | 一个控制 GridView 中子项布局的委托。 | |
| itemBuilder | 遍历数返回Widget | widget |
| itemCount 子控件数量 | int | |
| controller | 滚动控制（滚动监听） | |
| primary | 如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。 | |
| physics | 滑动类型设置 | |
| AlwaysScrollableScrollPhysics() | 总是可以滑动 | |
| NeverScrollableScrollPhysics | 禁止滚动 | |
| BouncingScrollPhysics | 内容超过一屏 上拉有回弹效果 | |
| ClampingScrollPhysics | 包裹内容 不会有回弹 |
/*
* 网格布局的基本使用
*/
class MyGridView extends StatelessWidget {
List getListData() {
List list = [];
for (int i = 0; i < 100; i++) {
list.add(i.toString());
}
return list;
}
List getWidgetList() {
return getListData().map((item) => getItemContainer(item)).toList();
}
Widget getItemContainer(String item) {
return Container(
alignment: Alignment.center,
child: Text(
item,
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
color: Colors.blue,
);
}
@override
Widget build(BuildContext context) {
return GridView.count(
//一行的Widget数量 int 型
crossAxisCount: 3,
//水平子Widget之间间距
crossAxisSpacing: 10.0,
//GridView内边距
padding: EdgeInsets.all(6.0),
//子Widget宽高比例
childAspectRatio: 3.0,
//垂直子Widget之间间距
mainAxisSpacing: 30.0,
//GirdView 的方向，为 Axis.vertical 表示纵向，为 Axis.horizontal 表示横向，横向的话 CrossAxis 和 MainAxis 表示的轴也会调换
scrollDirection: Axis.vertical,
//预加载区域
cacheExtent: 0,
children: getWidgetList(),
//设置 GridView 如何响应用户的滑动行为，值为一个 ScrollPhysics 对象，它的实现类常用的有：
//AlwaysScrollableScrollPhysics：总是可以滑动
//NeverScrollableScrollPhysics：禁止滚动
// BouncingScrollPhysics：//内容超过一屏，上拉有回弹效果
//ClampingScrollPhysics：包裹内容，不会有回弹，感觉跟 AlwaysScrollableScrollPhysics 差不多
physics: new BouncingScrollPhysics(),
);
}
}
image.png
class MyGridView1 extends StatelessWidget {
List getListData() {
List list = [];
for (int i = 0; i < 100; i++) {
list.add(i.toString());
}
return list;
}
List getWidgetList() {
return getListData().map((item) => getItemContainer(item)).toList();
}
Widget getItemContainer(String item) {
return Container(
alignment: Alignment.center,
child: Text(
item,
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
color: Colors.blue,
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: getListData().length,
//SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//横轴元素个数
crossAxisCount: 10,
//纵轴间距
mainAxisSpacing: 50.0,
//横轴间距
crossAxisSpacing: 10.0,
//子组件宽高长度比例
childAspectRatio: 1.0),
itemBuilder: (BuildContext context, int index) {
//Widget Function(BuildContext context, int index)
return getItemContainer(getListData()[index]);
});
}
}
image.png