作为一名Flutter 浩瀚码海中的一名Android 转学生，最近开发中遇到一个功能，要实现一个类似Android CollapsingToolbarLayout 折叠布局的效果，在Android 开发中我们通过 CoordinatorLayout + AppBarLayout +CollapsingToolbarLayout 来实现这个效果，但是在Flutter 中，则是通过 SliverAppBar ，借助它的属性 flexibleSpace 来实现。

咱们可以先来看看Android 实现代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".chat.activitys.IntimacyActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_intimacy"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
                app:statusBarScrim="@android:color/transparent">

                <!-- 需要折叠的布局-->
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_310">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@drawable/intimacy_bg" />
                    <TextView
                        android:id="@+id/tv_familiar_count"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="@dimen/dp_26"
                        android:layout_marginTop="@dimen/dp_74"
                        android:background="@drawable/familiar_count_bg"
                        android:gravity="center"
                        android:text="相识天数\n1000天"
                        android:textColor="@color/white"
                        android:textSize="@dimen/sp_11"
                        android:textStyle="bold" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignTop="@id/iv_my_head"
                        android:layout_marginStart="@dimen/dp_30"
                        android:layout_marginTop="@dimen/dp_18"
                        android:layout_toRightOf="@id/tv_familiar_count"
                        android:background="@drawable/intimacy_lighting" />

                    <com.donews.renrenplay.android.views.CircleImageView
                        android:id="@+id/iv_my_head"
                        android:layout_width="@dimen/dp_72"
                        android:layout_height="@dimen/dp_72"
                        android:layout_alignTop="@id/tv_familiar_count"
                        android:layout_marginTop="@dimen/dp_31"
                        android:layout_toRightOf="@id/tv_familiar_count"
                        android:src="@drawable/intimacy_head_bg"
                        app:borderColor="@color/white"
                        app:borderWidth="@dimen/dp_1" />

                    <com.donews.renrenplay.android.views.CircleImageView
                        android:id="@+id/iv_other_head"
                        android:layout_width="@dimen/dp_72"
                        android:layout_height="@dimen/dp_72"
                        android:layout_alignTop="@id/iv_my_head"
                        android:layout_marginStart="@dimen/dp_60"
                        android:layout_toRightOf="@id/iv_my_head"
                        android:src="@drawable/intimacy_head_bg"
                        app:borderColor="@color/white"
                        app:borderWidth="@dimen/dp_1" />

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dp_51"
                        android:layout_below="@id/iv_my_head"
                        android:layout_marginStart="@dimen/dp_51"
                        android:layout_marginTop="@dimen/dp_34"
                        android:layout_marginEnd="@dimen/dp_51"
                        android:layout_marginBottom="@dimen/dp_11"
                      android:background="@drawable/shape_14_gradient_ffffff_f7e8ff">

                        <TextView
                            android:id="@+id/tv_intimacy_tip"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="@dimen/dp_14"
                            android:layout_marginTop="@dimen/dp_8"
                      android:background="@drawable/shape_4_gradient_c3a5ff_dfcdff"
                            android:paddingStart="@dimen/dp_4"
                            android:paddingEnd="@dimen/dp_4"
                            android:text="亲密度"
                            android:textColor="@color/white"
                            android:textSize="@dimen/sp_12" />

                        <TextView
                            android:id="@+id/tv_intimacy_percent_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_marginTop="@dimen/dp_6"
                            android:layout_marginEnd="@dimen/dp_15"
                            android:includeFontPadding="false"
                            android:text="0/0"
                            android:textColor="@color/c_8B5AED"
                            android:textSize="@dimen/sp_9" />

                        <ProgressBar
                            android:id="@+id/pb_intimacy_progress"
                            style="@android:style/Widget.ProgressBar.Horizontal"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/dp_6"
                            android:layout_alignBaseline="@id/tv_intimacy_tip"
                            android:layout_marginStart="@dimen/dp_7"
                            android:layout_marginEnd="@dimen/dp_14"
                            android:layout_toRightOf="@id/tv_intimacy_tip"
                            android:max="100"
  android:progressDrawable="@drawable/layer_intimacy_pb_drawable" />

                        <TextView
                            android:id="@+id/tv_intimacy_authentication"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_below="@id/pb_intimacy_progress"
                            android:layout_marginStart="@dimen/dp_17"
                            android:layout_marginTop="@dimen/dp_4"
                            android:text="亲密度1000可认证亲密关系，快去提升亲密度吧~"
                            android:textColor="@color/c_C4A7FF"
                            android:textSize="@dimen/sp_10" />
                    </RelativeLayout>
                </RelativeLayout>

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/tb_intimacy"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_80"
                    android:background="@color/white"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="pin">

                    <com.donews.renrenplay.android.views.TitleLayout
                        android:id="@+id/tl_intimacy"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingTop="@dimen/dp_20"
                        app:showTitleStr="你和朋友的亲密关系" />
                </androidx.appcompat.widget.Toolbar>
            </com.google.android.material.appbar.CollapsingToolbarLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginTop="-20dp"
                android:background="@drawable/shape_22_top_ffffff"
                android:orientation="vertical">

                <com.donews.renrenplay.android.views.SimpleViewpagerIndicator
                    android:id="@+id/indicator_intimacy"
                    android:layout_width="wrap_content"
                    android:layout_height="@dimen/dp_58"
                    android:layout_gravity="center"
                    android:tag="overScroll"
                    app:isshow_underline="true"
                    app:selected_textcolor="@color/c_333333"
                    app:selected_textsize="@dimen/sp_16"
                    app:unselected_textcolor="@color/c_999999"
                    app:unselected_textsize="@dimen/sp_16" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_1"
                    android:background="@color/c_F5F5F5" />

            </LinearLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_intimacy"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这个是实现的效果就是折叠完布局之后，有个tab 指示器，下面是viewpage 页。

我们在实现这个效果之前先来看看 SliverAppbar 的一些比较重要的属性，

title ：SliverAppbar 的标题 title；
centerTitle ：标题居中；
pinned ：true时 SliverAppBar 会固定在页面顶部；false时，SliverAppBar 会
随着滑动向上滑动；
floating ：当值为true时 SliverAppBar设置的title会随着上滑动隐藏
然后配置的bottom会显示在原AppBar的位置
当值为false时 SliverAppBar设置的title会不会隐藏
然后配置的bottom会显示在原AppBar设置的title下面；
snap：当snap配置为true时，向下滑动页面，SliverAppBar（以及其中配置的
flexibleSpace内容）会立即显示出来，
反之当snap配置为false时，向下滑动时，只有当ListView的数据滑动到
顶部时，SliverAppBar才会下拉显示出来；
expandedHeight：完全展开的高度；
elevation：阴影高度；
flexibleSpace：appbar 折叠的内容区域；
bottom：appbar 底部区域。
1、SliverAppbar 主要有三部分，
第一部分：标题，通过 title 属性配置；
第二部分：折叠的内容部分，通过 flexibleSpace 属性配置的
FlexibleSpaceBar 中配置 background；
第三部分：tabbar 标签栏，通过bottom属性配置，在这里结合
PreferredSize 来使用。
2、接下来我们将这三部分进行配置，我们现在initState 函数中设置tabController 属性，以及tabs ，tabviews，其中HomePage()，ProfilePage() 就是两个单独拎出来的widget，vsync: this 中的这个this ，得让state 继承SingleTickerProviderStateMixin。

  TabController? tabController;
 //tabs
  List<Tab> tabs = [
    Tab(text: 'Home'),
    Tab(text: 'Profile'),
  ];

  //tabviews
  List<Widget> tabViews = [HomePage(), ProfilePage()];
  @override
  void initState() {
    super.initState();
    this.tabController = TabController(length: 2, vsync: this);
  }

3、接下来就是 build 函数，配置sliverAppbar ，TabBar， TabView 。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ExtendedNestedScrollView(
      onlyOneScrollInBody: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
          // sliverappbar 有三部分， 第一部分 标题，通过title属性配置;
          // 第二部分就是用来折叠部分的轮播图，通过 flexibleSpace 属性
          // 配置的FlexibleSpaceBar中配置;
          //第三部分就是通过 bottom 配置的 TabBar 标签栏，在这里结合 PreferredSize 来使用;
          SliverAppBar(
            //SliverAppbar 的标题 title
            title: buildHeader(),
            //标题居中
            centerTitle: true,
            //true时 SliverAppBar 会固定在页面顶部；false时，SliverAppBar 会随着滑动向上滑动
            pinned: true,
            //当值为true时 SliverAppBar设置的title会随着上滑动隐藏
            //然后配置的bottom会显示在原AppBar的位置
            //当值为false时 SliverAppBar设置的title会不会隐藏
            //然后配置的bottom会显示在原AppBar设置的title下面
             floating: false,
            // //当snap配置为true时，向下滑动页面，SliverAppBar（以及其中配置的flexibleSpace内容）会立即显示出来，
            // //反之当snap配置为false时，向下滑动时，只有当ListView的数据滑动到顶部时，SliverAppBar才会下拉显示出来。
             snap: false,
            // automaticallyImplyLeading: true,
            //展开的高度
            expandedHeight: 200,
            elevation: 0,
            //appbr 下的内容区域
           flexibleSpace: FlexibleSpaceBar(
              //背景
              //配置的是一个widget也就是说在这里可以使用任意的
              //Widget组合 在这里直接使用的是一个图片
              background: buildFlexibleSpaceWidget(),
        ),
            bottom: buildFlexibleTooBarWidget(), //appbar 底部区域
          ),
        ];
      },
      body: TabBarView(
        controller: this.tabController,
        children: tabViews,
      ),
    ));
  }

可以看到在这里我们用到了一个插件 ExtendedNestedScrollView，为啥用这个呢？而不是CustomScrollview 呢？可以看个效果图，

1655982361669.jpg

，使用CustomScrollview 时，当我们将列表滑动上去之后，会出现这种情况，item1，2 在上面固定拉不下来，除非当我们将折叠内容展开之后，列表才能拉下来正常展示。所以我们这里用到了ExtendedNestedScrollView插件。
3、在配置SliverAppbar 中用到的方法函数

buildFlexibleSpaceWidget() {
    return Stack(
      children: [
        Image.asset('assets/images/integral_center_bg.png', width: MediaQuery.of(context).size.width,fit: BoxFit.fill,),
        Container(
            margin: EdgeInsets.only(top: 100),
            child: Column(
              children: [
                Text('我是小米'),
                SizedBox(
                  height: 20,
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('我的性别女'),
                    SizedBox(
                      width: 20,
                    ),
                    Text('我的年龄19'),
                  ],
                )
              ],
            )),
      ],
    );
  }

  //构建SliverAppBar的标题title
  buildHeader() {
    //透明组件
    return Container(
      width: double.infinity,
      padding: EdgeInsets.only(left: 10),
      height: 38,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.white),
        borderRadius: BorderRadius.circular(30),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.search_rounded,
            size: 18,
          ),
          SizedBox(
            width: 4,
          ),
          Text(
            "搜索",
            style: TextStyle(
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  //[SliverAppBar]的bottom属性配制
  buildFlexibleTooBarWidget() {
    //[PreferredSize]用于配置在AppBar或者是SliverAppBar
    //的bottom中 实现 PreferredSizeWidget
    return PreferredSize(
      //定义大小
      preferredSize: Size(MediaQuery.of(context).size.width, 44),
      //配置任意的子Widget
      child: Container(
        alignment: Alignment.center,
        child: Container(
          // color: Colors.grey,
          //随着向上滑动，TabBar的宽度逐渐增大
          //父布局Container约束为 center对齐
          //所以程现出来的是中间x轴放大的效果
          width: MediaQuery.of(context).size.width,
          child: TabBar(
            controller: tabController,
            tabs: tabs,
          ),
        ),
      ),
    );
  }

看下最终效果：（原谅下😀，目前我的级别还不能插入视频，先上图片看看吧）

1655983825671.jpg

1655983851869.jpg

1655983881794.jpg

这时你会发现一个现象， tabbar 现在是在sliverAppbar 底部，有些人可能不太想要这个效果，就想要将tabbar 放在SliverAppbar 的下面，其实也是可以的哦~~

我们可以将SliverAppbar 原来的基础上将bottom属性去掉，然后再追加个SliverPersistentHeader 组件，我把整个修改后的build函数中的代码展示下，这样方便和上面的代码做对比。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ExtendedNestedScrollView(
      onlyOneScrollInBody: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
          // sliverappbar 有三部分， 第一部分 标题，通过title属性配置;
          // 第二部分就是用来折叠部分的轮播图，通过 flexibleSpace 属性
          // 配置的FlexibleSpaceBar中配置;
          //第三部分就是通过 bottom 配置的 TabBar 标签栏，在这里结合 PreferredSize 来使用;
          SliverAppBar(
            //SliverAppbar 的标题 title
            title: buildHeader(),
            //标题居中
            centerTitle: true,
            //true时 SliverAppBar 会固定在页面顶部；false时，SliverAppBar 会随着滑动向上滑动
            pinned: true,

            //当值为true时 SliverAppBar设置的title会随着上滑动隐藏
            //然后配置的bottom会显示在原AppBar的位置
            //当值为false时 SliverAppBar设置的title会不会隐藏
            //然后配置的bottom会显示在原AppBar设置的title下面
            // floating: false,
            //
            // //当snap配置为true时，向下滑动页面，SliverAppBar（以及其中配置的flexibleSpace内容）会立即显示出来，
            // //反之当snap配置为false时，向下滑动时，只有当ListView的数据滑动到顶部时，SliverAppBar才会下拉显示出来。
            // snap: false,
            // automaticallyImplyLeading: true,
            //展开的高度
            expandedHeight: 200,
            elevation: 0,
            //appbr 下的内容区域
            flexibleSpace: FlexibleSpaceBar(
              //背景
              //配置的是一个widget也就是说在这里可以使用任意的
              //Widget组合 在这里直接使用的是一个图片
              background: buildFlexibleSpaceWidget(),
            ),

            // bottom: buildFlexibleTooBarWidget(), //appbar 底部区域
          ),
          SliverPersistentHeader(
            pinned: true,
            delegate: StickyTabBarDelegate(
              child: TabBar(
                labelColor: Colors.black,
                controller: this.tabController,
                tabs: tabs,
              ),
            ),
          ),
        ];
      },
      body: TabBarView(
        controller: this.tabController,
        children: tabViews,
      ),
    ));
  }

其中我们会发现，SliverPersistentHeader 中的delegate 是我们创建的一个class类StickyTabBarDelegate，

 class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar child;

  StickyTabBarDelegate({required this.child});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.green,
      child: this.child,
    );
  }

  @override
  double get maxExtent => this.child.preferredSize.height;

  @override
  double get minExtent => this.child.preferredSize.height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

在build 函数中我们可以设置tabbar 的背景色哟~~~
看下效果图，大家可以对比上面的效果图，其他滑动效果和上面是一样的哈！

微信图片_20220624150323.jpg

（一）Flutter 实现 Android CollapsingToolbarLayout折叠布局效果

（一）Flutter 实现 Android CollapsingToolbarLayout折叠布局效果

咱们可以先来看看Android 实现代码：

我们在实现这个效果之前先来看看 SliverAppbar 的一些比较重要的属性，

这时你会发现一个现象， tabbar 现在是在sliverAppbar 底部，有些人可能不太想要这个效果，就想要将tabbar 放在SliverAppbar 的下面，其实也是可以的哦~~