Flutter series part: detailed explanation of GridView layout commonly used in flutter

brief introduction

GridView Is a grid layout , If the subassemblies in the filling process are beyond the scope of the display , that GridView It will scroll automatically .

Because of this scrolling feature , therefore GridView Is a very easy to use Widget. Today, let's explore GridView This layout Secrets of components .

GridView Detailed explanation

GridView Is a scrollable view, That is to say ScrollView, in fact GridView Inherited from BoxScrollView:

class GridView extends BoxScrollView


And its parent class BoxScrollView, It is inherited from ScrollView:

abstract class BoxScrollView extends ScrollView 


You can see BoxScrollView Is an abstract class , It has two subclasses , These are what we are going to talk about today GridView And the next issue ListView.

The difference between the two components is GridView It's a 2D Layout , and ListView It's a linear layout Layout .

As BoxScrollView Subclasses of ,GridView Need to achieve buildChildLayout The method is as follows ：

 @override
 Widget buildChildLayout(BuildContext context) {
 return SliverGrid(
 delegate: childrenDelegate,
 gridDelegate: gridDelegate,
 );
 }


here GridView Returned a SliverGrid, This SliverGrid There are two properties in , Namely childrenDelegate and gridDelegate.

among gridDelegate It's a SliverGridDelegate Example , Used to control sub components in GridView Layout in .

childrenDelegate It's a SliverChildDelegate Example , Used to generate GridView The subcomponents in .

These two attributes are GridView In the constructor of , We will explain it in detail next .

GridView Constructor for

GridView There are many constructors , The first is a full - parameter constructor that contains all the parameters :

 GridView({
 Key? key,
 Axis scrollDirection = Axis.vertical,
 bool reverse = false,
 ScrollController? controller,
 bool? primary,
 ScrollPhysics? physics,
 bool shrinkWrap = false,
 EdgeInsetsGeometry? padding,
 required this.gridDelegate,
 bool addAutomaticKeepAlives = true,
 bool addRepaintBoundaries = true,
 bool addSemanticIndexes = true,
 double? cacheExtent,
 List<Widget> children = const <Widget>[],
 int? semanticChildCount,
 DragStartBehavior dragStartBehavior = DragStartBehavior.start,
 Clip clipBehavior = Clip.hardEdge,
 ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
 String? restorationId,
 })


In this constructor , You need to pass in a custom gridDelegate, So in the constructor gridDelegate yes required state ：

required this.gridDelegate


It's mentioned above that GridView Two custom attributes in , The other one is childrenDelegate, This attribute is constructed from other parameters passed in , As shown below ：

childrenDelegate = SliverChildListDelegate(
 children,
 addAutomaticKeepAlives: addAutomaticKeepAlives,
 addRepaintBoundaries: addRepaintBoundaries,
 addSemanticIndexes: addSemanticIndexes,
 ),


Another one GridView The constructor for is called GridView.builder, The difference between this constructor and the default constructor is childrenDelegate Different implementations of , Let's see GridView.builder in childrenDelegate The implementation of the ：

childrenDelegate = SliverChildBuilderDelegate(
 itemBuilder,
 childCount: itemCount,
 addAutomaticKeepAlives: addAutomaticKeepAlives,
 addRepaintBoundaries: addRepaintBoundaries,
 addSemanticIndexes: addSemanticIndexes,
 ),


Compared with ,GridView.builder Medium childrenDelegate Two more parameters , Namely itemBuilder and itemCount.

So what are these two parameters used for ？

Consider one that has many chil Of GridView, In order to improve GridView Display performance , We can't take out all of them at once child Element , Instead, it will be dynamically created and drawn in scrolling , And here it is itemCount Namely child Maximum capacity of .

and itemBuilder Is a dynamic creation child Creator of , Thus, dynamic creation child The needs of .

The next constructor is called GridView.custom, Because it's called custom, So this constructor's SliverGridDelegate and SliverChildDelegate It's all customizable , In other words, these two parameters can be passed in from the outside , So these two parameters are both necessary ：

 required this.gridDelegate,
 required this.childrenDelegate


GirdView There is also a constructor called GridView.count, there count Refer to GridView You can specify cross axis The number of components that can be included in the , So here gridDelegate It USES one SliverGridDelegateWithFixedCrossAxisCount:

gridDelegate = SliverGridDelegateWithFixedCrossAxisCount(
 crossAxisCount: crossAxisCount,
 mainAxisSpacing: mainAxisSpacing,
 crossAxisSpacing: crossAxisSpacing,
 childAspectRatio: childAspectRatio,
 ),


You can set crossAxisCount Value .

the last one GridView The constructor for is called GridView.extent, It and count The constructor for is very similar to , however extent What is provided is a maximum cross-axis extent, Instead of a fixed count value , So here gridDelegate It's a SliverGridDelegateWithMaxCrossAxisExtent object ：

gridDelegate = SliverGridDelegateWithMaxCrossAxisExtent(
 maxCrossAxisExtent: maxCrossAxisExtent,
 mainAxisSpacing: mainAxisSpacing,
 crossAxisSpacing: crossAxisSpacing,
 childAspectRatio: childAspectRatio,
 ),


How do you understand that ？ for instance , If GirdView It is vertical rolling , And its width yes 400 pixels, If this time maxCrossAxisExtent Set to 120, So a row can only have three columns . We can adjust maxCrossAxisExtent Value , To adjust view The display of .

We can select the corresponding constructor according to our needs , So as to meet our different needs .

GridView Use

With GridView Constructor for ,GridView It's easy to use .

For example, we dynamically create a containing image Of child, Form a gridView：

class GridViewApp extends StatelessWidget{

 @override
 Widget build(BuildContext context) {
 return GridView.extent(
 maxCrossAxisExtent: 100,
 padding: const EdgeInsets.all(4),
 mainAxisSpacing: 4,
 crossAxisSpacing: 4,
 children: buildChild(10));
 }


there buildChild Used to generate a containing Widget Of list, As shown below ：

 List<Widget> buildChild(int number) {
 return List.generate(
 number, (i) => Container(
 child: Image.asset('images/head.jpg')));
 }


Finally, the GridViewApp Put it in Scaffold Of body Run in ：

 Widget build(BuildContext context) {

 return Scaffold(
 appBar: AppBar(
 title: Text(widget.title),
 ),
 body: Center(
 child: GridViewApp(),
 ),
 );
 }


Finally, we can get the following image ：

Here we are using GridView.extent Constructors , You can try other constructors by yourself .

summary

GridView Is a component that we often use in our daily work , I hope you can master .

Examples of this article ：

https://github.com/ddean2009/learn-flutter.git