作为一名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" /> < rogressBar 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 rientation="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 呢？ 可以看个结果图，
，使用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, ), ), ), ); }看下终极结果：（包容下?，现在我的级别还不能插入视频，先上图片看看吧）
这时你会发现一个征象， 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 的配景致哟~~~
看下结果图，各人可以对比上面的结果图，其他滑动结果和上面是一样的哈！
|
