The GridView “Build 522” article in Flutter gives you insight

This is the 8th day of my participation in Gwen Challenge

preface

In the previous article we talked about 4 ways to build Flutter, the most commonly used list component, ListView. In this article we will talk about 5 ways to build A GridView, 2 layouts and 2 subitems. See the brain map below at 👇🏻 to see the implementation and effect step by step.

• Collectively referred to as522 waysHa, ha, ha,

The first –GridViewstructure

Look at the effect

Look at the source code

One of the benefits of Flutter is that you can always view the well-commented source code. Once you have read the source code, you will know the implementation. Here is a brief overview of the core content.



We just have to focus on thatChildren, gridDelegate, childrenDelegateThese three properties, and this one right hereSliverChildListDelegateWe’ll talk a little bit about that, but here’s an idea of what we’re passing onchildrenPass to theSliverChildListDelegateSo it must be the one that finally gets through here, so let’s keep going.



Here,buildChildLayoutDoes that sound familiar? Last chatListViewThe final layout of the subitems is implemented through this method.GridViewSimilarly, the differences are as follows:

How to use it?

It’s easy to use, just build a List

passed to children and build a gridDelegate.

GridView(
  // A fixed number of sub-axis GridDelegate
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    // Set the quantity to 3
    crossAxisCount: 3.// Spindle spacing
    mainAxisSpacing: 6.// Secondary axis spacing
    crossAxisSpacing: 12.// Width to height ratio of subitems
    childAspectRatio: 4 / 3,),// Build subitems that can be viewed back to the ListView article
  children: List.generate(100, (index) {
    returngetItem(index); }),)Copy the code

Vertical screen	landscape

From the above comparison, we can see the following features regardless of screen width:

• All keep the subterms on the subaxisThe quantity is fixedThe maximum (width) range is not fixed
• Keep the spacing the same
• Same aspect to height ratio of subterm

The getItem method implementation

This is simply an Image. If you don’t understand, check out the ListView or its description of Image in my Flutter Widgets column

/// Get subitems
Widget getItem(int index) {
  var item = listData[index % 5];
  return Image.network(
    item.url,
    fit: BoxFit.cover,
  );
}
Copy the code

The second –GridView.builderbuild

Here we use an itemBuilder to build a set of subitems, a gridDelegate. Here we use a gridDelegate with a maximum sub-axis “range”. You can adjust the maximum range value to see how it looks

GridView.builder(
  // GridDelegate for the maximum sub-axis "range"
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    // Maximum secondary axis width (or height)
    maxCrossAxisExtent: 140.// Spindle spacing
    mainAxisSpacing: 6.// Secondary axis spacing
    crossAxisSpacing: 12.// Width to height ratio of subitems
    childAspectRatio: 16 / 9,
  ),
  itemBuilder: (context, index) {
    return getItem(index);
  },
  // Number of subitems
  itemCount: 100.)Copy the code

Contrast effects

Vertical screen	landscape

From the above comparison, we can see the following features regardless of screen width:

• All keep the subterms on the subaxisThe maximum range is fixedThe number is not fixed
• Keep the spacing the same
• Same aspect to height ratio of subterm

Here we also compare the SliverGridDelegateWithFixedCrossAxisCount and SliverGridDelegateWithMaxCrossAxisExtent the difference between the two GridDelegate, The former has a fixed number of ranges, while the latter has a fixed range.

The third –GridView.countbuild

GridView.count(
  crossAxisCount: 6,
  mainAxisSpacing: 6,
  crossAxisSpacing: 12,
  childAspectRatio: 4 / 3,
  children: List.generate(100, (index) {
    returngetItem(index); }),)Copy the code

I don’t need to say any more about this, but it isSliverGridDelegateWithFixedCrossAxisCountPackage bai, let’s look at the source code is not



As expected, it was packaged for our convenience.

The fourth –GridView.extentbuild

GridView.extent(
  // Maximum secondary axis range
  maxCrossAxisExtent: 140,
  mainAxisSpacing: 6,
  crossAxisSpacing: 12,
  childAspectRatio: 16 / 9,
  children: List.generate(100, (index) {
    returngetItem(index); }),)Copy the code

You can infer from this that this is rightSliverGridDelegateWithMaxCrossAxisExtentPackage, take a look at the source code verification



As expected, as we expected, look at the effect

The fifth –GridView.custombuild

The last way to look at the name is to let us customize, but the main one is to customize gridDelegate and childrenDelegate

GridView.custom(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 140,
    mainAxisSpacing: 6,
    crossAxisSpacing: 12,
    childAspectRatio: 16 / 9,
  ),
  childrenDelegate: SliverChildListDelegate(
    List.generate(100, (index) {
      returngetItem(index); }),),)Copy the code

Here we review the common constructor classes that summarize these two parameters

Late at night more text is not easy, if there is help please click 👍🏻 to give the biggest support

Source warehouse

Based on the latest version of Flutter 🔥

• Flutter Widgets warehouse

Refer to the link

• GridView (Flutter Widget of the Week)
• Flutter-GridView

Pay attention to column

• This article has been included in the column at 👇 below, you can follow it directly
• Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible