GridView of basic component of shutter

GridView Not as good as ListView It's used a lot , however ListView If it is scrolling vertically , Then it is generally counted as one on one line Item, If it is a horizontal scroll , So one in a column is generally counted as one Item, If you need to show more than one Item But if you need to scroll vertically , Need GridView 了 , In certain situations , For example, when displaying pictures, the effect is better than ListView Better , So this is also a very important component .

because GridView Many attributes follow ListView almost , For the usage of all partial attributes, please refer to Fluutter Basic components ListView

 

1 Construction method

GridView({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, List<Widget> children: const [], int semanticChildCount })

Construct a GridView, The required parameters are SliverGridDelegate, It is equivalent to a structure GridView Client of , This parameter is explained below .

GridView.builder({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, @required IndexedWidgetBuilder itemBuilder, int itemCount, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, int semanticChildCount })

Customize the creation as needed  ListView, This construction method has one more must pass itemBuilder, Same as ListView equally , It's a  IndexedWidgetBuilder , Its constructor will return index, According to this index To make the ListView The son of Item There are different displays .

GridView.count({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required int crossAxisCount, double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0, double childAspectRatio: 1.0, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, List<Widget> children: const [], int semanticChildCount })

Equivalent to specifying the first construction method  gridDelegate by  SliverGridDelegateWithFixedCrossAxisCount.

GridView.custom({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, @required SliverChildDelegate childrenDelegate, double cacheExtent, int semanticChildCount })

Create a custom model GridView.

GridView.extent({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required double maxCrossAxisExtent, double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0, double childAspectRatio: 1.0, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, List<Widget> children: const [], int semanticChildCount })

Equivalent to specifying the first construction method  gridDelegate by  SliverGridDelegateWithMaxCrossAxisExtent.

 

2 Common properties

gridDelegate： structure GridView Client of ,GridView.count It's equivalent to specifying gridDelegate by  SliverGridDelegateWithFixedCrossAxisCount,GridView.extent It's equivalent to specifying gridDelegate by  SliverGridDelegateWithMaxCrossAxisExtent, They are equivalent to a kind of encapsulation of common construction methods . Its value is a SliverGridDelegate object , Reference resources 2.1 SliverGridDelegate.

cacheExtent： Same as ListView, Preloaded areas .

controller： Same as ListView, Slide monitor , It's worth one ScrollController object , This attribute should be used for pull-down refresh and garbage loading , We will study it in detail later .

padding： Same as ListView, Whole GridView The inner spacing of .

physics： Same as ListView, Set up GridView  How to respond to user's sliding behavior , It's worth one ScrollPhysics object , Its implementation classes are commonly used ：
    AlwaysScrollableScrollPhysics： Can always slide .
    NeverScrollableScrollPhysics： No rolling .
    BouncingScrollPhysics： More than one screen , Pull up has a rebound effect .
    ClampingScrollPhysics： The contents of the package , There will be no rebound , Feeling heel  AlwaysScrollableScrollPhysics almost .

reverse：Item Whether the order of is reversed , if true Then reverse , This flip is just a row flip , That is, the first line becomes the last line , But the subcomponents in each row are placed from left to right , Few development scenarios use this attribute .

scrollDirection：GirdView The direction of , by Axis.vertical It means vertical , by Axis.horizontal It means horizontal , Horizontal words CrossAxis and MainAxis The indicated axes are also swapped , by Axis.Horizontal The situation is also less .

semanticChildCount： Don't know much about it .

shrinkWrap： Don't know much about it .

children： Child components , Needless to say .

 

The following is a that sets some of the above properties Demo：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String> imgUrlList = new List();
    imgUrlList.add("assets/images/a.jpg");
    imgUrlList.add("assets/images/b.jpg");
    imgUrlList.add("assets/images/c.jpg");
    imgUrlList.add("assets/images/d.jpg");
    imgUrlList.add("assets/images/e.jpg");
    imgUrlList.add("assets/images/f.jpg");
    imgUrlList.add("assets/images/g.jpg");
    imgUrlList.add("assets/images/h.jpg");
    imgUrlList.add("assets/images/i.jpg");
    imgUrlList.add("assets/images/j.jpg");
    imgUrlList.add("assets/images/k.jpg");
    imgUrlList.add("assets/images/l.jpg");
    imgUrlList.add("assets/images/m.jpg");

    return MaterialApp(
      // Whether or not shown  debug  label 
      debugShowCheckedModeBanner: false,
      title: "GridView",
      home: Scaffold(
        appBar: AppBar(
          title: Text("GridView"),
        ),
        body: Container(
          child: MyGridView(imgUrlList),
        ),
      ),
    );
  }
}

class MyGridView extends StatelessWidget {
  List<String> imgUrlList;

  MyGridView(this.imgUrlList);

  @override
  Widget build(BuildContext context) {
    List<Widget> widgetList = new List();
    for (int i = 0; i < imgUrlList.length; i++) {
      widgetList.add(MyImage(imgUrlList.elementAt(i)));
    }
    return GridView(
      // structure  GridView  Client of ,GridView.count  It's equivalent to specifying  gridDelegate  by  SliverGridDelegateWithFixedCrossAxisCount,
      //GridView.extent  It's equivalent to specifying  gridDelegate  by  SliverGridDelegateWithMaxCrossAxisExtent, They are equivalent to a kind of encapsulation of common construction methods 
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        // Must pass parameters ,Cross  Axis （ stay  GridView  Middle is usually the horizontal axis , That is, each line ） Number of sub components 
        crossAxisCount: 3,
        // Sub assembly aspect ratio , Such as  2  Indicates width ： high =2:1, Such as  0.5  Indicates width ： high =0.5:1=1:2, Simply put, the value is greater than  1  It will be wider than higher , Less than  1  The width will be smaller than the height 
        childAspectRatio: 0.8,
        //Cross  Spacing of shaft subassemblies , No interval is added to the left of the first child component in a row , The right side of the last sub component does not add an interval , That's great 
        crossAxisSpacing: 3,
        //Main  Axis （ stay  GridView  The middle is usually the vertical axis , That is, each column ） Subcomponent spacing , That is, the interval between each line , Similarly, the upper edge of the first row and the lower edge of the last row do not add a gap 
        mainAxisSpacing: 3,
      )
//      SliverGridDelegateWithMaxCrossAxisExtent(
//        // Must pass parameters ,Cross  Axis （ stay  GridView  Middle is usually the horizontal axis , That is, each line ） Maximum width of sub assembly , According to this value, several sub components will be placed in a row 
//          maxCrossAxisExtent: 130)
          ,
      // Preload area 
      cacheExtent: 0,
      // Slide monitor , It's worth one  ScrollController  object , Same as  ListView
//      controller:,
      // padding 
      padding: EdgeInsets.all(10),
      // Set up  GridView  How to respond to user's sliding behavior , It's worth one  ScrollPhysics  object , Its implementation classes are commonly used ：
      //AlwaysScrollableScrollPhysics： Can always slide 
      //NeverScrollableScrollPhysics： No rolling 
      //BouncingScrollPhysics： More than one screen , Pull up has a rebound effect 
      //ClampingScrollPhysics： The contents of the package , There will be no rebound , Feeling heel  AlwaysScrollableScrollPhysics  almost 
      physics: new BouncingScrollPhysics(),
      //Item  Whether the order of is reversed , if  true  Then reverse , This flip is just a row flip , That is, the first line becomes the last line , But the subcomponents in each row are placed from left to right 
//      reverse: true,
      //GirdView  The direction of , by  Axis.vertical  It means vertical , by  Axis.horizontal  It means horizontal , Horizontal words  CrossAxis  and  MainAxis  The indicated axes are also swapped 
      scrollDirection: Axis.vertical,
      // Don't know much about it 
//      semanticChildCount: ,
      // Don't know much about it 
//      shrinkWrap: ,
      // Child components 
      children: widgetList,
    );
  }
}

class MyImage extends StatelessWidget {
  String imgUrl;

  MyImage(this.imgUrl);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Image(
        image: AssetImage(imgUrl),
        width: 300,
        height: 300,
        fit: BoxFit.cover,
      ),
    );
  }
}

 

The operation effect is as follows ：

 

GridView Other construction methods will not be demonstrated , Its basic usage is similar to ListView almost , Just study it a little when you use it .

 

2.1 SliverGridDelegate

structure GridView Client of , It has two implementation classes ：

2.1.1 SliverGridDelegateWithFixedCrossAxisCount

This delegate is usually used when the number of subcomponents in each row is fixed , It can specify the following properties ：

crossAxisCount： Must pass parameters ,Cross Axis （ stay GridView Middle is usually the horizontal axis , That is, each line ） Number of sub components .

childAspectRatio： Sub assembly aspect ratio , Such as 2 Indicates width ： high =2:1, Such as 0.5 Indicates width ： high =0.5:1=1:2, Simply put, the value is greater than 1 It will be wider than higher , Less than 1 The width will be smaller than the height .

crossAxisSpacing：Cross Spacing of shaft subassemblies , No interval is added to the left of the first child component in a row , The right side of the last sub component does not add an interval , That's great .

mainAxisSpacing：Main Axis （ stay GridView The middle is usually the vertical axis , That is, each column ） Subcomponent spacing , That is, the interval between each line , Similarly, the upper edge of the first row and the lower edge of the last row do not add a gap .

 

2.1.2 SliverGridDelegateWithMaxCrossAxisExtent

maxCrossAxisExtent： Must pass parameters ,Cross Axis （ stay GridView Middle is usually the horizontal axis , That is, each line ） Maximum width of sub assembly , According to this value, several sub components will be placed in a row .

Other properties  childAspectRatio、crossAxisSpacing、mainAxisSpacing Same as  SliverGridDelegateWithFixedCrossAxisCount.

 

3 summary

GridView Follow Android Medium GridView Also almost , So it feels quite simple , And it's just like ListView almost , So don't go too far . Because I do it myself Android Of , therefore  Flutter So far, there is still no trouble in learning , Continue to work hard .