技術標籤：FlutterflutterSliver

Flutter Sliver大家庭之SliverPersistentHeade和SliverToBoxAdapter實現固定頭佈局③

• SliverPersistentHeader
• SliverToBoxAdapter

經過一次付出了卻得不到回報的愛情之後，免不了對人起了疑心，總提防著。還以為這是自己長大了，也不過是小資產階級那點保本的策略：不想賠，就把錢藏好，一分也不要拿出來。這個思路，廣泛應用於各類情感，這就是通俗愛情。

今日效果圖:

效果圖(1.1):

SliverPersistentHeader

加粗是必傳引數

SliverPersistentHeader程式碼:

initSliverPersistentHeader(String title) {
    return SliverPersistentHeader(
        //是否固定頭佈局 預設false
        pinned: true,
        //是否浮動 預設false
        floating: false,
        //必傳引數,頭佈局內容
 

        delegate: MySliverDelegate(
          //縮小後的佈局高度
          minHeight: 40.0,
          //展開後的高度
          maxHeight: 80.0,
          child: Container(
              color: Colors.redAccent,
              child: Center(
                child: Text(
                  title,
                  style: TextStyle
 
(fontSize: 18, shadows: [
                    Shadow(color: Colors.white, offset: Offset(1, 1))
                  ]),
                ),
              )),
        ));
  }

class MySliverDelegate extends SliverPersistentHeaderDelegate {
  MySliverDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });
  final double minHeight; //最小高度
  final double maxHeight; //最大高度
  final Widget child; //子Widget佈局

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new SizedBox.expand(child: child);
  }

  @override //是否需要重建
  bool shouldRebuild(MySliverDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

使用程式碼:

CustomScrollView(
	....
	slivers: <Widget>[
          initSliverPersistentHeader("第一組"),

          //可隱藏掉哦...
          //initSliverToBoxAdapter(),

          initSliverPersistentHeader("第二組"),

          initSliverList(),
        ],
)

效果圖(1.2):

SliverToBoxAdapter

SliverToBoxAdapter程式碼:

 Widget initSliverToBoxAdapter() {
    return SliverToBoxAdapter(
      child: Container(
        height: 70,
        child: Center(
          child: Text(
            "可隱藏掉哦..",
            style: TextStyle(
              //背景黃色
                shadows: [Shadow(color: Colors.yellow, offset: Offset(1, 1))]),
          ),
        ),
      ),
    );
  }

效果圖(1.3):

完整專案

完整程式碼

猜你喜歡:

Flutter Slider,CupertinoSlider滑動條

Flutter Sliver大家族之CustomScrollView和SliverAppBar 元件①

Flutter Sliver大家族之SliverList(),SliverFixedExtentList(),SliverGrid()元件②

原創不易,您的點贊就是最大的支援,點個贊支援一下吧~