GridView组件
1. 常用属性
scrollDirection | Axis 滚动方法 |
---|---|
padding | EdgeInsetsGeometry 内边距 |
reverse | boolean 组件反向排序 |
crossAxisSpacing | double 水平子Widget之间间距 |
mainAxisSpacing | double 垂直子Widget之间间距 |
crossAxisCount | int 一行的Widget数量 |
childAspectRatio | double 子Widget宽高比例 |
children | [] |
gridDelegate | SliverGridDelegateWithFixedCrossAxisCount(常用), SliverGridDelegateWithMaxCrossAxisExtent 控制布局主要用在GridView.builder里面 |
2. GridView第一种使用方式 ————GridView.count
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
}
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2, //一行的 Widget 数量
// childAspectRatio: 6,
children: <Widget>[
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要'),
Text('世界不需要')
],
);
}
}
——————弊端: item不能复用,内容过多,占用内存过多,类似于android scrollview的使用
3.GridView第二种使用方式———— GridView.builder
import 'package:flutter/material.dart';
import '../res/listData.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
}
class LayoutDemo extends StatelessWidget {
Widget _getListData (context,index) {
return Container(
child:Column(
children: <Widget>[
Image.network(listData[index]['imageUrl']),
SizedBox(height: 12),
Text(
listData[index]['title'],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20
),
)
],
),
decoration: BoxDecoration(
border: Border.all(
color:Color.fromRGBO(233, 233,233, 0.9),
width: 1
)
),
// height: 400, //设置高度没有反应
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
//注意
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing:10.0 , //水平子 Widget 之间间距
mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
crossAxisCount: 2, //一行的 Widget 数量
),
itemCount: listData.length,
itemBuilder:this._getListData,
);
}
}
————对于SliverGridDelegateWithMaxCrossAxisExtent
而言,水平方向元素个数不再固定,其水平个数也就是有几列,由maxCrossAxisExtent
和屏幕的宽度以及padding
和mainAxisSpacing
等决定。
数据源
List listData=[
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/1.png',
},
{
"title": 'Childhood in a picture',
"author": 'Google',
"imageUrl": 'https://www.itying.com/images/flutter/2.png',
},
{
"title": 'Alibaba Shop',
"author": 'Alibaba',
"imageUrl": 'https://www.itying.com/images/flutter/3.png',
},
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/4.png',
},
{
"title": 'Tornado',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/5.png',
},
{
"title": 'Undo',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/6.png',
},
{
"title": 'white-dragon',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/7.png',
}
];
4. 使用GridView注意点
1.设置图片宽度是无效的,需要通过 childAspectRatio: 0.7,
2.开发中推荐第二种使用方式,复用item
5.如何解决手机相册中图片问题
1.切勿直接使用GridView和ImageView加载,内存暂用过多,加载,缓慢,毕竟相册图片目前主流手机都是5M以上
2.应该将图片进行裁剪压缩进行加载
参考文章:https://blog.csdn.net/weixin_39982537/article/details/111220902?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161734520216780255211420%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161734520216780255211420&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2blogfirst_rank_v2~rank_v29-10-111220902.pc_v2_rank_blog_default&utm_term=Flutter+GridView%E7%BB%84%E4%BB%B6