GridView.count 靜態(tài)網(wǎng)格布局
頁面均分布局,對(duì)設(shè)置高度,寬度是無效的.但是可以通過childAspectRatio(寬度/高度的比例.)屬性來配置寬高比例來控制顯示效果.
| 名稱 | 類型 | 說明 |
|---|---|---|
| scrollDirection | Axis | 滾動(dòng)方法 |
| padding | EdgeInsetsGeometry | 內(nèi)邊距 |
| resolve | bool | 組件反向排版 |
| crossAxisSpacing | double | 水平子Widget 之間間距 |
| mainAxisSpacing | double | 垂直子Widget 之間間距 |
| crossAxisCount | int | 一行的Widget 數(shù)量 |
| childAspectRatio | fouble | 子Widget 寬高比例 |
| children | <Widget> [] | |
| gridDelegate | SliverGridDelegateWithFixedCrossAxisCount(常用)SliverGridDelegateWithMaxCrossAxisExtent | 控制布局主要用在GridView.builder 里面 |
通過循環(huán)一套數(shù)據(jù),使用上面的屬性來控制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}個(gè)盒子',
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 數(shù)量
children: _getListData(),
);
}
}
頁面展現(xiàn):
image.png
下面我們模擬一個(gè)真實(shí)的列表數(shù)據(jù)渲染到頁面上注意的知識(shí)點(diǎn):
1.Column 豎向布局方式
豎向布局雖然能夠像html一樣,豎向進(jìn)行布局,但是這里采用的網(wǎng)格布局會(huì)限制成一個(gè)正方形,如果圖片是長方形,會(huì)被拆切,所以需要用到childAspectRatio控制比例,豎向長方形進(jìn)行顯示
2.toList()
此處我們采用是模擬數(shù)據(jù),通過map方法便利之后,獲得的數(shù)據(jù)格式為:('****','****').所以我們要最后返回的時(shí)候調(diào)用toList()方法,才能夠正確返回一個(gè)List
3.SizedBox
由于Text組件沒有padding和margin屬性,所以文字的上方,我們可以使用SizedBox組件撐開一定高度
4.decoration: BoxDecoration()
Container修飾功能,可以對(duì)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( //- 設(shè)置樣式
fontSize: 14
)
)
],
),
decoration: BoxDecoration( //- 修飾Container
border: Border.all( //- 設(shè)置邊框
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 數(shù)量,
childAspectRatio: 0.6, //- 設(shè)置寬度和高度的比例
children: _getListData(),
);
}
}
GridView.builder 動(dòng)態(tài)網(wǎng)格布局
- 使用動(dòng)態(tài)網(wǎng)格布局,
GridView.builder下的itemBuilder需要通過訪問下文context自動(dòng)遍歷數(shù)組內(nèi)容,返回值要求是一個(gè)Widget所以,我們的_getListData函數(shù)無需再次遍歷數(shù)組,只需要通過傳入的index渲染對(duì)應(yīng)的數(shù)據(jù),返回一個(gè)Widget即可. - 通過
itemCount屬性設(shè)置顯示的條數(shù) -
GridView.builder是不能直接設(shè)置間距以及比例和一行的數(shù)量的,需要通過調(diào)用gridDelegate: SliverGridDelegateWithFixedCrossAxisCount()進(jìn)行配置.
最后呈現(xiàn)的效果如下:
image.png
代碼內(nèi)容:
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( //- 設(shè)置樣式
fontSize: 14
)
)
],
),
decoration: BoxDecoration( //- 修飾Container
border: Border.all( //- 設(shè)置邊框
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 數(shù)量,
childAspectRatio: 0.65, //- 設(shè)置寬度和高度的比例
),
itemCount: dataList.length,
itemBuilder: _getListData
);
}
}
這樣兩種方式就介紹完了.下面提供頁面中使用的引入數(shù)據(jù):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：再戰(zhàn)巔峰 BD',
'picUrl': 'https://maopu.tv/d/thumb/0fe2c0e536079bcdcebc10e1e4c05685.jpg'
},
{
'id': 6,
'title': '1917：逆戰(zhàn)救兵 BD高清',
'picUrl': 'https://maopu.tv/d/thumb/224759a75c7ee82d16ae13f274beef67.jpg'
},
{
'id': 7,
'title': '漫畫威龍之大話特務(wù) BD高清',
'picUrl': 'https://maopu.tv/d/thumb/8694144414306752f759c0d30bfd0323.jpg'
},
{
'id': 8,
'title': '霹靂嬌娃 BD高清',
'picUrl': 'https://maopu.tv/d/thumb/5c9f6f0c74681e0c9fc7408d9193f30a.jpg'
},
];
