新建項目-7.png
繼承關(guān)系和ListView是一樣的
構(gòu)造函數(shù)
GridView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false, //控制 GridView 里列表項的排列順序僵井，是按照插入順序排，
還是按照插入順序相反的方向排序删掀。
默認(rèn)為 false，就是按照插入順序排序诀蓉，第一個插入的在頭部
骨田，當(dāng) reverse 為 true 時埠通，第一個插入的會在底部
ScrollController controller, //可以控制 GridView 滾動的位置
ScrollController 提供以下的幾個功能：
1.設(shè)置 GridView 滑動的初始位置
2.可以控制 GridView 是否存儲和恢復(fù)滑動的位置
3.可以讀取、設(shè)置當(dāng)前滑動的位置
可以繼承 ScrollController 實現(xiàn)自定義的功能
當(dāng) primary 為 true 時晦攒，controller 必須為 null
bool primary, //是否是與父級關(guān)聯(lián)的主滾動視圖
當(dāng)為 true 時闽撤，即使 GridView 里沒有足夠的內(nèi)容也能滑動
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required this.gridDelegate, //控制 GridView 中 子Widget 布局的委托。
SliverGridDelegate 的實現(xiàn)有兩個：
SliverGridDelegateWithMaxCrossAxisExtent：橫軸 子Widget 為固定長度的布局算法
SliverGridDelegateWithFixedCrossAxisCount：橫軸 子Widget 為固定數(shù)量的布局算法
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
})
SliverGridDelegateWithFixedCrossAxisCount
該子類實現(xiàn)了一個橫軸為固定數(shù)量子元素的layout算法脯颜，其構(gòu)造函數(shù)為：
SliverGridDelegateWithFixedCrossAxisCount({
@required double crossAxisCount,
double mainAxisSpacing = 0.0,
double crossAxisSpacing = 0.0,
double childAspectRatio = 1.0,
})
-
crossAxisCount：橫軸子元素的數(shù)量哟旗。此屬性值確定后子元素在橫軸的長度就確定了，即ViewPort橫軸長度除以crossAxisCount的商栋操。 -
mainAxisSpacing：主軸方向的間距闸餐。 -
crossAxisSpacing：橫軸方向子元素的間距。 -
childAspectRatio：子元素在橫軸長度和主軸長度的比例矾芙。由于crossAxisCount指定后舍沙，子元素橫軸長度就確定了，然后通過此參數(shù)值就可以確定子元素在主軸的長度剔宪。
SliverGridDelegateWithMaxCrossAxisExtent
該子類實現(xiàn)了一個橫軸子元素為固定最大長度的layout算法拂铡，其構(gòu)造函數(shù)為：
SliverGridDelegateWithMaxCrossAxisExtent({
double maxCrossAxisExtent,
double mainAxisSpacing = 0.0,
double crossAxisSpacing = 0.0,
double childAspectRatio = 1.0,
})
maxCrossAxisExtent為子元素在橫軸上的最大長度，之所以是“最大”長度葱绒，是因為橫軸方向每個子元素的長度仍然是等分的感帅，舉個例子，如果ViewPort的橫軸長度是450地淀，那么當(dāng)maxCrossAxisExtent的值在區(qū)間[450/4失球，450/3)內(nèi)的話，子元素最終實際長度都為112.5帮毁，而childAspectRatio所指的子元素橫軸和主軸的長度比為最終的長度比她倘。其它參數(shù)和SliverGridDelegateWithFixedCrossAxisCount相同璧微。
GridView
例子:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MinePage extends StatefulWidget {
@override
_MinePageState createState() => _MinePageState();
}
class _MinePageState extends State<MinePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("我的"),
),
body: Container(
padding: EdgeInsets.all(10),
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //橫軸列數(shù)
crossAxisSpacing: 10, //橫軸間距(Y軸)
mainAxisSpacing: 10, //主軸間距(x軸)
),
children: <Widget>[
Container(color: Colors.red),
Container(color: Colors.redAccent),
Container(color: Colors.yellow),
Container(color: Colors.orange),
Container(color: Colors.brown),
Container(color: Colors.purple),
Container(color: Colors.yellowAccent),
Container(color: Colors.orangeAccent),
Container(color: Colors.green),
Container(color: Colors.blueGrey),
Container(color: Colors.lightBlueAccent),
Container(color: Colors.deepPurpleAccent),
Container(color: Colors.lightGreen),
],
),
),
);
}
}
2020-04-13 14.44.48.gif
GridView.count
GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount，我們通過它可以快速的創(chuàng)建橫軸固定數(shù)量子元素的GridView
例子:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MinePage extends StatefulWidget {
@override
_MinePageState createState() => _MinePageState();
}
class _MinePageState extends State<MinePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("我的"),
),
body: Container(
padding: EdgeInsets.all(10),
child: GridView.count(
crossAxisCount: 3, //y軸顯示列數(shù)
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: <Widget>[
Container(color: Colors.red),
Container(color: Colors.redAccent),
Container(color: Colors.yellow),
Container(color: Colors.orange),
Container(color: Colors.brown),
Container(color: Colors.purple),
Container(color: Colors.yellowAccent),
Container(color: Colors.orangeAccent),
Container(color: Colors.green),
Container(color: Colors.blueGrey),
Container(color: Colors.lightBlueAccent),
Container(color: Colors.deepPurpleAccent),
Container(color: Colors.lightGreen),
],
),
),
);
}
}
看效果是一樣的,只是這里用的是 **GridView.count **
2020-04-13 15.15.47.gif
GridView.extent
GridView.extent構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithMaxCrossAxisExtent硬梁，我們通過它可以快速的創(chuàng)建縱軸子元素為固定最大長度的的GridView
例子:
body: Container(
padding: EdgeInsets.all(10),
child: GridView.extent(
//最大寬度
maxCrossAxisExtent: 100,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: <Widget>[
Container(color: Colors.red),
Container(color: Colors.redAccent),
Container(color: Colors.yellow),
Container(color: Colors.orange),
Container(color: Colors.brown),
Container(color: Colors.purple),
Container(color: Colors.yellowAccent),
Container(color: Colors.orangeAccent),
Container(color: Colors.green),
Container(color: Colors.blueGrey),
Container(color: Colors.lightBlueAccent),
Container(color: Colors.deepPurpleAccent),
Container(color: Colors.lightGreen),
Container(color: Colors.green),
],
),
),
2020-04-13 15.36.47.gif
GridView.builder
例子:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MinePage extends StatefulWidget {
@override
_MinePageState createState() => _MinePageState();
}
class _MinePageState extends State<MinePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("我的"),
),
body: Container(
padding: EdgeInsets.all(10),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
childAspectRatio: 1.0, //寬高比例 1.0 為相等
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemBuilder: (context,index) {
return Container(
alignment: Alignment.center,
color: Colors.orange,
child: Text("$index"),
);
},
itemCount: 50,
),
),
);
}
}
2020-04-13 15.45.57.gif
