简介

SliverGrid 将多个item以每行二个的形式, 进行排列.

基本用法

创建

在排列列表时，将基于现有的小部件, 延迟创建可见子项的元素、状态和呈现对象。也就是只有视口中的元素, 才会被创建, 类似于我们网页中的懒加载.

销毁

当元素滚动到视图之外时，关联的元素子树、状态和渲染对象将被销毁, 进入视觉窗口的元素将以懒加载的形式进行创建。

实例演示

import 'package:flutter/material.dart';


class SliverGridDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<SliverGridDemo> {

  Widget showCustomScrollView() {
    return  CustomScrollView(
      slivers: <Widget>[
         SliverGrid(
          gridDelegate:  SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 4.0,
          ),
          delegate:  SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return  Container(
                alignment: Alignment.center,
                color: Colors.cyan[100 * (index % 5)],
                child:  Text('grid item $index'),
              );
            },
            childCount: 20,
          ),
        ),
//         SliverFixedExtentList(
//          itemExtent: 100.0,
//          delegate:  SliverChildBuilderDelegate(
//                (BuildContext context, int index) {
//              return  Container(
//                alignment: Alignment.center,
//                color: Colors.lightBlue[100 * (index % 9)],
//                child:  Text('list item $index'),
//              );
//            },
//          ),
//        ),
      ],
    );
  }

  Widget build(BuildContext context) {
    return Container(
      height: 400,
      color: Color(0xffc91b3a),
      child: showCustomScrollView()
    );
  }
}