当前位置：网站首页>Flutter series part: detailed explanation of GridView layout commonly used in flutter

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

2022-06-28 13:01:00 【51CTO】

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:

And its parent class BoxScrollView, It is inherited from 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,
    );
  }

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.

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,
  })

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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

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,
       ),

     
      1.
      2.
      3.
      4.
      5.
      6.

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,
       ),

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.

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 ：

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,
       ),

     
      1.
      2.
      3.
      4.
      5.
      6.

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,
       ),

     
      1.
      2.
      3.
      4.
      5.
      6.

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));
  }

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.

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')));
  }

     1.
2.
3.
4.
5.

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(),
      ),
    );
  }

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.

Finally, we can get the following image ：

flutter Series of :flutter Commonly used GridView layout Detailed explanation _ Program those things

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

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206281233043385.html