题记：

​ 自律的最高境界是孤独， 孤独的最高境界是自由

​ --每天学一点, 知识不断积累.

先看下效果图

timg的副本

本文讲一个经典商品详情案例,使用的是RefreshIndicator+CustomScrollView+SliverAppBar 布局

代码如下：

 ///定义滑动监听类
 ScrollController scrollController;
 ///false 代表没折叠  true代表折叠
  bool silverCollapsed = false;
  
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    scrollController = new ScrollController();
    scrollController.addListener(() {
    ///130 这个值根据下面的expandedHeight值自己调整 看效果可以就行
      if (scrollController.offset >= 130) {
        silverCollapsed = true;
      } else {
        silverCollapsed = false;
      }
      setState(() {

      });
    });
  }
  
  
///RefreshIndicator 控制下拉刷新功能
body: RefreshIndicator(
///转动箭头颜色
  color: Colors.red,
  ///背景颜色
  backgroundColor: Colors.lightBlue,
  onRefresh: () async{
     setState(() {
            /// 下拉刷新回调
     });
  },
  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
      ),
      )],
  ),
),