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

preface

ListView is one of the most commonly used list components of Flutter. Today we will take a look at four ways to build Flutter and some practical tips to help us learn quickly and effectively.

The first –ListViewstructure

Let’s look at the source code



Here we need to pass a list of widgets, and the final implementation is bySliverChildListDelegateTo create thechildrenDelegate 。



When the subproject is finally built, it will be calledSliverListWe’re not going to talk about it here, we’re going to talk about it later, when we’re donePay attention to columnAfter the chat

How to use it?

Build a List

and pass it to children.

Here we use list. generate to generate a List of length 100 and build it as a List

ListView(
  // Generate a list of length 100
  children: List.generate(100, (index) {
    returngetItem(index); }),)Copy the code

Take a look at the getItem implementation

  • A list item can be quickly constructed using listtiles in Flutter

Because we’re doing analog data, we’re doing mod here

/// Get subitems
Widget getItem(int index) {
  // Get data
  var item = listData[index % 5];
  // Build the list item
  return ListTile(
    // Front image
    leading: Image.network(
      item.url,
      width: 80,
      height: 60,
      fit: BoxFit.cover,
    ),
    / / title
    title: Text(item.title),
    / / subtitle
    subtitle: Text(item.desc),
    // Back arrow
    trailing: Icon(Icons.keyboard_arrow_right_outlined),
    onTap: () {
      print('index');
    },
    onLongPress: () {
      print('${item.desc}'); }); }Copy the code

Add a dividing line

As you can see in the image above, we don’t have to add a separator, just use listtile. divideTiles to add a separator

ListView(
  children: ListTile.divideTiles(
    context: context,
    tiles: List.generate(100, (index) {
      return getItem(index);
    }),
  ).toList(),
)
Copy the code

The second –ListView.separatedbuild

Speaking of the partition line, we have to talk about the second construction method, let’s see how it works, and this is the other most common way to build a partition line, right

ListView.separated(
  itemBuilder: (context, index) {
    return getItem(index);
  },
  // Odd numbers have dividing lines
  separatorBuilder: (context, index) =>
  index.isOdd ? Divider(height: 10) : SizedBox(),
  // The number is 80
  itemCount: 80.)Copy the code

Instead of using a delimiter here, we’re building it up

The third –ListView.builderbuild

This is the one we use the most and it’s very simple to use

ListView.builder(
  itemBuilder: (context, index) {
    return getItem(index);
  },
  itemCount: 20.)Copy the code

Rolling direction

List class widgets have an important property called scrollDirection that controls the direction of scrolling, making it easy to adjust the direction as needed

  • Axis.verticalVertical (default)
  • Axis.horizontalThe transverse
ListView.builder(
  // Set horizontal scrolling
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) {
    return SizedBox(
      width: 300,
      child: getItem(index),
    );
  },
  itemCount: 20.)Copy the code

The fourth –ListView.custombuild

We looked at the source code, for they began to look at the fourth way, is very obvious, here we use the SliverChildBuilderDelegate after this we will be talking about details

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return getItem(index);
    },
    childCount: 100,),)Copy the code

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

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

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