sliview之SliverList介绍

2023-05-18  本文已影响0人  码农_小斌哥

1.SliverList介绍

CustomScrollView+SliverList组合使用其实就相当于是个ListView

2.SliverList属性

3.使用

  _mySliverAppBar() {
    return SliverAppBar(
      title: Text('SliverList'),
      expandedHeight: 250,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          ImageUrlConstant.imageUrl1,
          fit: BoxFit.cover,
        ),
        collapseMode: CollapseMode.parallax,
      ),
    );
  }

  _mySliverChildListDelegate() {
    return SliverChildListDelegate([
      Container(
        height: 80,
        color: Colors.primaries[0],
      ),
      Container(
        height: 80,
        color: Colors.primaries[1],
      ),
      Container(
        height: 80,
        color: Colors.primaries[2],
      ),
      Container(
        height: 80,
        color: Colors.primaries[3],
      ),
      Container(
        height: 80,
        color: Colors.primaries[4],
      ),
      Container(
        height: 80,
        color: Colors.primaries[5],
      ),
      Container(
        height: 80,
        color: Colors.primaries[6],
      ),
    ]);
  }

  _mySliverChildBuilderDelegate() {
    return SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      },
      childCount: 30,
    );
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        _mySliverAppBar(),
        SliverList(
          delegate: _mySliverChildBuilderDelegate(),
          // delegate: _mySliverChildListDelegate(),
        )
      ],
    );
  }

如果我们将SliverAppBar去掉,CustomScrollView+SliverList就跟ListView是一个效果

<<meta charset="utf-8">

二.GridView介绍

1.GridView属性

GridView的各项属性跟ListView几乎一样,这里就不再赘述,不了解的可以看一下:Flutter(33):Material组件之ListTile、RefreshIndicator、ListView、Divider
关于SliverGridDelegate,SliverChildDelegate在之前Flutter(73):Sliver组件之SliverGrid中也讲解过了,也不再赘述了。

  _mySliverGridDelegateWithFixedCrossAxisCount() {
    return SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      crossAxisSpacing: 5,
      childAspectRatio: 1.5,
    );
  }

  _myGridView() {
    return GridView(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image
2.GridView.builder属性
  _myGridViewBuilder() {
    return GridView.builder(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      },
      itemCount: 5,
    );
  }

image
3.GridView.count属性
  _myGridViewCount() {
    return GridView.count(
      crossAxisCount: 3,
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image
4.GridView.extent属性
  _myGridViewExtent() {
    return GridView.extent(
      maxCrossAxisExtent: 300,
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image
5.GridView.custom属性
  _myGridViewCustom() {
    return GridView.custom(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      childrenDelegate:
          SliverChildBuilderDelegate((BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      }, childCount: 5),
    );
  }

image
上一篇下一篇

猜你喜欢

热点阅读