Flutter教學(xué)目錄持續(xù)更新中

Github源代碼持續(xù)更新中

1.SliverPersistentHeader介紹

可以根據(jù)滾動而變大變小的組件，SliverAppBar就是基于這個實現(xiàn)的

2.SliverPersistentHeader屬性

• delegate：SliverPersistentHeaderDelegate
• pinned = false：SliverPersistentHeader介紹收縮到最小高度的時候SliverPersistentHeader介紹是否可見，
  true：SliverPersistentHeader介紹會以折疊高度固定顯示在頭部，false：縮小到折疊高度后滑出頁面
• floating = false：true 的時候下滑先展示SliverPersistentHeader介紹，展示完成后才展示其他滑動組件內(nèi)容

3.使用

這里需要自己實現(xiàn)SliverPersistentHeaderDelegate，SliverAppBar也是基于這個實現(xiàn)的，只是邏輯更復(fù)雜

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

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

  bool _pinned = true;
  bool _floating = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomScrollView(
        slivers: [
          _mySliverAppBar(),
          SliverPersistentHeader(
            delegate: _MySliverPersistentHeaderDelegate(),
            pinned: _pinned,
            floating: _floating,
          ),
          SliverList(
            delegate: _mySliverChildBuilderDelegate(),
            // delegate: _mySliverChildListDelegate(),
          ),
        ],
      ),
    );
  }
}

class _MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double _minExtent = 80;
  final double _maxExtent = 250;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    //創(chuàng)建child子組件
    //shrinkOffset：child偏移值minExtent~maxExtent
    //overlapsContent：SliverPersistentHeader覆蓋其他子組件返回true，否則返回false
    print('shrinkOffset = $shrinkOffset overlapsContent = $overlapsContent');
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(ImageUrlConstant.imageUrl1),
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  //SliverPersistentHeader最大高度
  @override
  double get maxExtent => _maxExtent;

  //SliverPersistentHeader最小高度
  @override
  double get minExtent => _minExtent;

  @override
  bool shouldRebuild(covariant _MySliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }

image.png

下一節(jié)：Scroll組件之GridView

Flutter（79）：Scroll組件之GridView

Flutter教學(xué)目錄持續(xù)更新中

Github源代碼持續(xù)更新中