題記：

? 自律的最高境界是孤獨， 孤獨的最高境界是自由

? --每天學(xué)一點, 知識不斷積累.

先看下效果圖

timg的副本

本文講一個經(jīng)典商品詳情案例,使用的是RefreshIndicator+CustomScrollView+SliverAppBar 布局

代碼如下：

 ///定義滑動監(jiān)聽類
 ScrollController scrollController;
 ///false 代表沒折疊  true代表折疊
  bool silverCollapsed = false;
  
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    scrollController = new ScrollController();
    scrollController.addListener(() {
    ///130 這個值根據(jù)下面的expandedHeight值自己調(diào)整 看效果可以就行
      if (scrollController.offset >= 130) {
        silverCollapsed = true;
      } else {
        silverCollapsed = false;
      }
      setState(() {

      });
    });
  }
  
  
///RefreshIndicator 控制下拉刷新功能
body: RefreshIndicator(
///轉(zhuǎn)動箭頭顏色
  color: Colors.red,
  ///背景顏色
  backgroundColor: Colors.lightBlue,
  onRefresh: () async{
     setState(() {
            /// 下拉刷新回調(diào)
     });
  },
  child: CustomScrollView(
   controller: scrollController,
    slivers: <Widget>[
      SliverAppBar(
        pinned: true,
        ///這個是高度
        expandedHeight: 200.0,
          leading: Icon(Icons.arrow_back),
        flexibleSpace: FlexibleSpaceBar(
            title: Text(silverCollapsed ? '商品詳情' :''),
          background: Image.network(
              'https://i.loli.net/2020/08/09/l9Ea5uKpTDLvfG6.jpg',
          width: double.infinity,
          fit: BoxFit.fill,),
        ),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return Container(height: 60,
          color: Colors.primaries[index % Colors.primaries.length],);
         },
          childCount: 30
      ),
      )],
  ),
),