一.复习上一节
- listView动态列表实现两种方式
1.通过for循环遍历数据 创建itemView
2.通过ListView.build实现 需要itemcount 和itemBuild参数
二.GridView常用属性
1 .GridView创建网格有很多种,主要常用的两种
1.通过GridVIew.count实现网格布局
2.通过GridView.build实现网格布局
2.常用属性
- scrollDirecation:滚动方法
- padding:内边距
- resovle:组件反向排序
- crossAxisCount:一行展示几个
- childAspectRation:子View的宽高比例
- child:数组放入子view
- grideDelegate:控制布局样式 用在GrideView.build里面,
三.GridVIew.count实现网格布局
import 'package:flutter/material.dart';
import 'data.dart';
void main() {
runApp(MyContent());
}
class MyContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(appBar: AppBar(title: Text("标题")), body: MyBody()));
}
}
class MyBody extends StatelessWidget {
List<Widget> _getItemView() {
var list = listData.map((value) {
return Container(
alignment: Alignment.center,
child: Column(
//竖向排布的布局
children: <Widget>[
Image.network(value["iamge"]),
SizedBox(height: 10),
Text(value["title"]),
SizedBox(height: 10),
Text(value["subTitle"])
],
),
decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
);
});
return list.toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return GridView.count(
childAspectRatio: 0.7,
crossAxisCount: 2,
crossAxisSpacing: 10,
//水平子view的间距
mainAxisSpacing: 10,
//竖直子view 的间距
children: this._getItemView(),
);
}
}
- 注意
- Column 组件和listView组件很相似都是竖向排列但是有区别后面讲解。
- SizedBox 组件用来实现 居上边距。
- list.map 返回的是(xx,xx)需要tolist转换成集合。
- gridView 子view的heigth失效,需要结合childAspectRatio来设置子view 的高度。
四.GridVIew.build实现网格布局
- GridView.build 和ListView.build 使用方法相同
class MyBody extends StatelessWidget {
Widget _getItemView(context, index) {
return Container(
alignment: Alignment.center,
child: Column(
//竖向排布的布局
children: <Widget>[
Image.network(listData[index]["iamge"]),
SizedBox(height: 10),
Text(listData[index]["title"]),
SizedBox(height: 10),
Text(listData[index]["subTitle"])
],
),
decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 0.7, //宽高比
crossAxisSpacing: 10, //水平间距
mainAxisSpacing: 10, //垂直间距
crossAxisCount: 2),
itemBuilder: this._getItemView,
itemCount: listData.length,
);
}
}
- 注意
1.GridView和listView 一样需要 itemBuilder 和itemCount。
- GridView.build中没有设置相应间距、行数等参数需要使用gridDelegate 完成(参数 输入SliverGrid敲with回车)。
- GridView中不设置gridDelegate会报错必须要设置。
-
效果图
image.png
总结
1.GridVIew.count实现网格布局
- gridView 子view的heigth失效,需要结合childAspectRatio来t调整子view 的高度。
2.GridView.build实现网格布局
- GridView和listView 一样需要 itemBuilder 和itemCount。
- GridView.build中没有设置相应间距、行数等参数需要使用gridDelegate 完成(参数 输入SliverGrid敲with回车)。
- Column组件用来实现竖向排列布局
Column(children: <Widget>[])
- SizedBox组件用来实现间距
SizedBox(height: 10)
网友评论