Common properties of GridView (grid list):
There are two common ways we create grid lists:
1. Realize grid layout through GridView.count
2. Realize grid layout through GridView.builder
1.GridViewcoun
Simple usage example of GridViewcount:
return GridView.count(
crossAxisCount: 3,//列数
children: [
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
],
);
Next, the list of tables will be implemented by traversing a list of containers:
class HomeContent extends StatelessWidget {
List<Widget> _getListdate() {
List<Widget> list = [];
for (var i = 0; i < 20; i++) {
list.add(Container(
alignment: Alignment.center,
color: Colors.blue,
child: Text('这是第$i条数据'),
));
}
return list.toList();
}
@override
Widget build(BuildContext context) {
return GridView.count(
padding: EdgeInsets.all(5),//控制整个表上下左右的间距
childAspectRatio: 0.7,//调整容器高度，表示宽度和高度的比例
crossAxisSpacing: 2, //控制表格左右的距离
mainAxisSpacing: 2, //控制表格上下的距离
crossAxisCount: 2, //列数
children: this._getListdate());
}
}
Effect:
It should be noted that the height of the Container cannot be adjusted by height here, so childAspectRatio is used
ListDate.dart:
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',
}
];
Convert the above data into a dynamic table:
import 'package:flutter/material.dart';
import 'res/ListDate.dart';
class MyApp_GridViewLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
List<Widget> _getListdate() {
var tempList = listData.map((e) {
return Container(
child: Column(
children: [
Image.network(
e['imageUrl'],
),
SizedBox(
height: 10,
), //设置text和image之间的距离
Text(
e['title'],
style: TextStyle(fontSize: 20),
),
],
),
decoration: BoxDecoration(
border: Border.all(color: Colors.lightGreen, width: 1) //设置四个边框
), //listview会平铺数据，Column会垂直排列
);
});
return tempList.toList();
}
@override
Widget build(BuildContext context) {
return GridView.count(
padding: EdgeInsets.all(5),
//控制整个表上下左右的间距
//childAspectRatio: 0.7,//调整容器高度，表示宽度和高度的比例
crossAxisSpacing: 2,
//控制表格左右的距离
mainAxisSpacing: 2,
//控制表格上下的距离
crossAxisCount: 2,
//列数
children: this._getListdate());
}
}
Effect:
2.GridViewbuilder
The usage of gridviewbuilder is similar to count, but there are also differences. Use builder to achieve the same function as above:
import 'package:flutter/material.dart';
import 'res/ListDate.dart';
class MyApp_GridViewLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
Widget _getListdate(context,index){
return Container(
child: Column(
children: [
Image.network(
listData[index]['imageUrl'],
),
SizedBox(
height: 10,
), //设置text和image之间的距离
Text(
listData[index]['title'],
style: TextStyle(fontSize: 20),
),
],
),
decoration: BoxDecoration(
border: Border.all(color: Colors.lightGreen, width: 1) //设置四个边框
), //listview会平铺数据，Column会垂直排列
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: listData.length, //循环数量
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 2,
//控制表格左右的距离
mainAxisSpacing: 2,
//控制表格上下的距离
crossAxisCount: 2,
//列数
),
itemBuilder: this._getListdate);
}
}
Effect:
