GridView.count 静态网格布局
页面均分布局,对设置高度,宽度是无效的.但是可以通过childAspectRatio(宽度/高度的比例.)属性来配置宽高比例来控制显示效果.
| 名称 | 类型 | 说明 |
|---|---|---|
| scrollDirection | Axis | 滚动方法 |
| padding | EdgeInsetsGeometry | 内边距 |
| resolve | bool | 组件反向排版 |
| crossAxisSpacing | double | 水平子Widget 之间间距 |
| mainAxisSpacing | double | 垂直子Widget 之间间距 |
| crossAxisCount | int | 一行的Widget 数量 |
| childAspectRatio | fouble | 子Widget 宽高比例 |
| children | <Widget> [] | |
| gridDelegate | SliverGridDelegateWithFixedCrossAxisCount(常用)SliverGridDelegateWithMaxCrossAxisExtent | 控制布局主要用在GridView.builder 里面 |
通过循环一套数据,使用上面的属性来控制GridView效果:
import "package:flutter/material.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
title: 'belineApp',
home: Scaffold(
appBar: AppBar(
title: Text('my app'),
),
body: StateList()
)
)
);
}
}
class StateList extends StatelessWidget {
@override
List<Widget> _getListData() {
List<Widget> list = new List();
for(var i=0; i< 2000; i ++) {
list.add(
Container(
alignment: Alignment.center,
color:Colors.orange,
child: Text('这是第${i}个盒子',
textAlign: TextAlign.center,
),
)
);
}
return list;
}
Widget build(BuildContext context) {
return GridView.count(
padding: EdgeInsets.all(16), //- 距离页面边框的宽度
crossAxisSpacing: 20.0, //- 水平子Widget 之间间距
mainAxisSpacing: 20.0, //- 垂直子Widget 之间间距
crossAxisCount: 4, //- 一行的Widget 数量
children: _getListData(),
);
}
}
页面展现:
image.png
下面我们模拟一个真实的列表数据渲染到页面上注意的知识点:
1.Column 竖向布局方式
竖向布局虽然能够像html一样,竖向进行布局,但是这里采用的网格布局会限制成一个正方形,如果图片是长方形,会被拆切,所以需要用到childAspectRatio控制比例,竖向长方形进行显示
2.toList()
此处我们采用是模拟数据,通过map方法便利之后,获得的数据格式为:('****','****').所以我们要最后返回的时候调用toList()方法,才能够正确返回一个List
3.SizedBox
由于Text组件没有padding和margin属性,所以文字的上方,我们可以使用SizedBox组件撑开一定高度
4.decoration: BoxDecoration()
Container修饰功能,可以对Container添加很多属性,例如border边框
先把页面效果展示一下
image.png
代码如下:
import "package:flutter/material.dart";
import 'src/datalist.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
title: 'belineApp',
home: Scaffold(
appBar: AppBar(
title: Text('my app'),
),
body: StateList()
)
)
);
}
}
class StateList extends StatelessWidget {
@override
List<Widget> _getListData() {
List<Widget> list = new List();
var tempList = dataList.map((val) {
return Container(
child: Column (
children: <Widget>[
Image.network(val['picUrl']),
SizedBox(height: 10), //- Text组件是没有padding和margin属性的,所以可以使用SizedBox把文本顶下来
Text(
val['title'],
textAlign: TextAlign.center, //- 文字居中
style: TextStyle( //- 设置样式
fontSize: 14
)
)
],
),
decoration: BoxDecoration( //- 修饰Container
border: Border.all( //- 设置边框
color:Color.fromRGBO(233, 233, 233, 0.9),
width: 1
)
),
);
});
return tempList.toList();
}
Widget build(BuildContext context) {
return GridView.count(
padding: EdgeInsets.all(16), //- 距离页面边框的宽度
crossAxisSpacing: 20.0, //- 水平子Widget 之间间距
mainAxisSpacing: 20.0, //- 垂直子Widget 之间间距
crossAxisCount: 2, //- 一行的Widget 数量,
childAspectRatio: 0.6, //- 设置宽度和高度的比例
children: _getListData(),
);
}
}
GridView.builder 动态网格布局
- 使用动态网格布局,
GridView.builder下的itemBuilder需要通过访问下文context自动遍历数组内容,返回值要求是一个Widget所以,我们的_getListData函数无需再次遍历数组,只需要通过传入的index渲染对应的数据,返回一个Widget即可. - 通过
itemCount属性设置显示的条数 -
GridView.builder是不能直接设置间距以及比例和一行的数量的,需要通过调用gridDelegate: SliverGridDelegateWithFixedCrossAxisCount()进行配置.
最后呈现的效果如下:
image.png
代码内容:
import "package:flutter/material.dart";
import 'src/datalist.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
title: 'belineApp',
home: Scaffold(
appBar: AppBar(
title: Text('my app'),
),
body: StateList()
)
)
);
}
}
class StateList extends StatelessWidget {
Widget _getListData(context, index) {
return Container(
child: Column (
children: <Widget>[
Image.network(dataList[index]['picUrl']),
SizedBox(height: 10), //- Text组件是没有padding和margin属性的,所以可以使用SizedBox把文本顶下来
Text(
dataList[index]['title'],
textAlign: TextAlign.center, //- 文字居中
style: TextStyle( //- 设置样式
fontSize: 14
)
)
],
),
decoration: BoxDecoration( //- 修饰Container
border: Border.all( //- 设置边框
color:Color.fromRGBO(233, 233, 233, 0.9),
width: 1
)
),
);
}
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 20.0, //- 水平子Widget 之间间距
mainAxisSpacing: 20.0, //- 垂直子Widget 之间间距
crossAxisCount: 2, //- 一行的Widget 数量,
childAspectRatio: 0.65, //- 设置宽度和高度的比例
),
itemCount: dataList.length,
itemBuilder: _getListData
);
}
}
这样两种方式就介绍完了.下面提供页面中使用的引入数据:datalist.dart
List dataList= [
{
'id': 1,
'title': '逃离比勒陀利亚 BD高清',
'picUrl': 'https://maopu.tv/d/thumb/c7fdf27814c2968a48afeee047cc6cf1.jpg'
},
{
'id': 2,
'title': '公子多情 BD高清',
'picUrl': 'https://maopu.tv/d/thumb/253a5b3fb4cee46f8410627c0e57d74c.jpg'
},
{
'id': 3,
'title': '布娃娃 BD高清',
'picUrl': 'https://maopu.tv/d/thumb/489f4fa35ad58fb414c3bae1bc071d47.jpg'
},
{
'id': 4,
'title': '新咒怨(美版) BD高清',
'picUrl': 'https://maopu.tv/d/thumb/68ee6e7c4415c2f1f14d54b93a623ce2.jpg'
},
{
'id': 5,
'title': '勇敢者游戏2：再战巅峰 BD',
'picUrl': 'https://maopu.tv/d/thumb/0fe2c0e536079bcdcebc10e1e4c05685.jpg'
},
{
'id': 6,
'title': '1917：逆战救兵 BD高清',
'picUrl': 'https://maopu.tv/d/thumb/224759a75c7ee82d16ae13f274beef67.jpg'
},
{
'id': 7,
'title': '漫画威龙之大话特务 BD高清',
'picUrl': 'https://maopu.tv/d/thumb/8694144414306752f759c0d30bfd0323.jpg'
},
{
'id': 8,
'title': '霹雳娇娃 BD高清',
'picUrl': 'https://maopu.tv/d/thumb/5c9f6f0c74681e0c9fc7408d9193f30a.jpg'
},
];
