Welcome to follow the official wechat account: FSA Full stack action 👋

A ListView,

  • ListView(): This can be used when the number of children is small and the list items are loaded all at once
  • Listview.builder (): Used when the number of children is large, created when the item is about to be displayed
  • Separated (): More function than ListView.Builder ()

1, the ListView ()

The default constructor for ListView() creates a list that loads all the items at once, which is performance expensive. It can be used when there are only a few items in the list.

  • ScrollDirection: Indicates the scrolling direction of a list. The default value is vertical and can be usedAxis.horizontalInstead of the horizontal
  • ItemExtent: The size of an item in the scrollDirection. If the list is vertical, it is the height of the item and if it is horizontal, it is the width of the item
  • Reverse: sort backwards, default forward (false)
  • Children: All the child widgets in the list can be used if the item type is the sameList.generate()Create a batch
class ListViewDemo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      // scrollDirection: Axis. Horizontal, // scrollDirection
      // itemExtent: 100, // Size of the item in the scrollDirection
      reverse: true,
      children: List.generate(100, (index) {
        // return Text("Hello lqr : $index", style: TextStyle(fontSize: 30));
        return ListTile(
          leading: Icon(Icons.people),
          trailing: Icon(Icons.delete),
          title: Text("Contact$index"),
          subtitle: Text("Contact Number :18812345678")); })); }}Copy the code

2, ListView. Builder ()

A list created using the ListView’s named constructor Builder () will be created and loaded only when the item needs to be displayed (calling the itemBuilder function).

  • ItemCount: The number of items in a list. If not specified, there are infinite items
  • ItemExtent: The size of an item in the scrollDirection. If the list is vertical, it is the height of the item and if it is horizontal, it is the width of the item
  • ItemBuilder: the function used to create an item,(BuildContext context, int index){}

Typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

class ListViewDemo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 100,
      itemExtent: 60,
      itemBuilder: (BuildContext context, int index) {
        return Text("Hello lqr: $index", style: TextStyle(fontSize: 20)); }); }}Copy the code

3, ListView. Separated ()

Separated () creates a list using the ListView named constructor Separated (), which, like Builder (), creates and loads items on demand, except that separated() can draw a dividing line. The common properties are as follows:

  • SeparatorBuilder: function to create a separator line,(BuildContext context, int index){}

Typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

The Divider widget is used to create the Divider. Its constructor parameters are:

  • Divider
    • Color: indicates the color of the dividing line
    • The height of the Divider itself
    • Thickness: the thickness of a dividing line
    • Indent: Space at the front of a dividing line
    • EndIndent: The space at the end of a dividing line
class ListViewDemo3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 100,
      itemBuilder: (BuildContext context, int index) {
        return Text("Hello lqr: $index", style: TextStyle(fontSize: 20));
      },
      separatorBuilder: (BuildContext context, int index) {
        return Divider(
          color: Colors.red,
          height: 40.// Height of the widget
          thickness: 10.// The thickness of the dividing line
          indent: 10.// The gap at the front of the dividing line
          endIndent: 30.// The gap at the end of the dividing line); }); }}Copy the code

Second, the GridView

  • GridView(): All list items are loaded at once
  • The GridView. The count () : it isGridView() + SliverGridDelegateWithFixedCrossAxisCountThe shorthand
  • The GridView. Among () : it isGridView() + SliverGridDelegateWithMaxCrossAxisExtentThe shorthand
  • Gridview.builder (): Created when the item will be displayed

1, the GridView ()

A grid created using the default GridView constructor will load all items at once. It is suitable for scenarios with a small number of items. The GridView can be thought of as a multi-column ListView, and when there are rows and columns, there will be a need to customize the column style. The gridDelegate is of type SliverGridDelegate. This abstract class has two implementation classes:

  • SliverGridDelegateWithFixedCrossAxisCount: cross shaft fixed item number a few columns (ourselves)
  • SliverGridDelegateWithMaxCrossAxisExtent: cross shaft item maximum range (a few columns to flutter)

GridDelegate: A grid agent that controls the placement of child widgets in the GridView

SliverGridDelegateWithFixedCrossAxisCount common parameters are:

  • CrossAxisCount: number of items that cross axes (if the grid is vertical, specify the number of columns in the grid, if the grid is vertical, specify the number of rows in the grid)
  • ChildAspectRatio: Width to height ratio of an item
  • The spacing between axis items (vertical: column spacing)
  • The spacing between main axis items (vertical: row spacing)
class GridViewDemo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// SliverGridDelegateWithFixedCrossAxisCount: cross shaft fixed item number a few columns (ourselves)
    /// Gridview.count (crossAxisCount: 3)
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: 8..// ratio = width/height
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      children: List.generate(100, (index) {
        return Container(
          color: Color.fromARGB(
            255,
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextInt(256),),); })); }}Copy the code

SliverGridDelegateWithMaxCrossAxisExtent common parameters are:

  • MaxCrossAxisExtent: The maximum range of items on a cross axis (vertical: the Flutter automatically calculates the number of columns based on the screen width and the maximum range of items)
  • ChildAspectRatio: Width to height ratio of an item
  • The spacing between axis items (vertical: column spacing)
  • The spacing between main axis items (vertical: row spacing)
class GridViewDemo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView(
      /// SliverGridDelegateWithMaxCrossAxisExtent: cross shaft item maximum range (a few columns to flutter)
      /// Gridview. extent(maxCrossAxisExtent: 400)
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 400,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        childAspectRatio: 1.8,
      ),
      itemCount: 100,
      children: List.generate(100, (index) {
        return Container(
          color: Color.fromARGB(
            255,
            Random().nextInt(256),
            Random().nextInt(256),
            Random().nextInt(256),),); })); }}Copy the code

2, the GridView. Builder ()

The GridView named constructor Builder () creates a grid that loads items on demand and is suitable for scenarios with a large amount of data. The common parameters are:

  • GridDelegate: a gridDelegate used to control the placement of child widgets in a GridView. The type is SliverGridDelegate.
    • SliverGridDelegateWithFixedCrossAxisCount
    • SliverGridDelegateWithMaxCrossAxisExtent
  • ItemCount: Number of grid items. If not specified, there are infinite items
  • ItemBuilder: the function used to create an item,(BuildContext context, int index){}

Typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

class GridViewDemo3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
      itemCount: 100,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Color.fromARGB(255, Random().nextInt(256),
              Random().nextInt(256), Random().nextInt(256))); }); }}Copy the code

If this article is helpful to you, please click on my wechat official number: FSA Full Stack Action, which will be the biggest incentive for me. The public account not only has Android technology, but also iOS, Python and other articles, which may have some skills you want to know about oh ~