Flutter 滑动列表隐藏头部，显示标题动画
先来一张效果图：
需求说明：列表滚动到顶部，Tabbar停留，置顶。
代码如下：
import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app1/module/movies/tab_bar.dart';
import 'package:flutter_app1/common/widget/text_field.dart';
import 'SliverTabBarDelegate.dart';
class MoviePage extends StatefulWidget {
@override
_MoviePageState createState() =>_MoviePageState();
}
class _MoviePageState extends State {
Listtabs = [
Tab(text:'直播'),
Tab(text:'推荐'),
Tab(text:'追番'),
Tab(text:'国家宝藏'),
Tab(text:'故事王2'),
Tab(text:'故事王2'),
Tab(text:'故事王2'),
];
Listlists = [
'assets/images/goods1.png',
'assets/images/goods1.png',
'assets/images/goods1.png',
];
@override
Widget build(BuildContext context) {
return Container(
child: _tabBar(),
);
}
///TabBar 设置
_tabBar() {
return DefaultTabController(
length:tabs.length,
child:Scaffold(
// appBar: AppBar(
// backgroundColor: Color(0xffF65884),
// title:_title(),
// ),
body:NestedScrollView(
headerSliverBuilder: (context, bool) {
return [
SliverAppBar(
///合并的高度，默认是状态栏的高度加AppBar的高度
expandedHeight:200.0,
///设置标题
title:Text('频道'),
///左侧返回键
leading:new IconButton(
icon:Icon(Icons.arrow_back_ios), onPressed: () {}),
///标题右侧的操作
actions: [
IconButton(
icon:Icon(Icons.add),
onPressed: (){})
],
///滑动是否悬浮
floating:true,
///标题栏是否固定
pinned:true,
///配合floating 使用
snap:false,
///SliverAppBar 可以理解为背景内容区域
flexibleSpace:FlexibleSpaceBar(
///设置背景
background:lists!=null &&lists.length>0?PageView.builder(
itemCount:lists.length,
itemBuilder: (BuildContext context,int position){
return Image.asset(
lists[position],
fit: BoxFit.fill,
);
},
):Text(''),
centerTitle:true,
// title: Text(
// "我是可以跟着滑动的title",
// ),
),
),
new SliverPersistentHeader(
delegate:new SliverTabBarDelegate(
new TabBar(
///设置左右可以滑动
isScrollable:true,
///设置滑动线颜色
indicatorColor: Colors.white,
///设置滑动线宽度
indicatorWeight:2,
indicatorSize: TabBarIndicatorSize.label,
///设置点击颜色
labelColor: Colors.red,
///设置字体颜色
unselectedLabelColor: Colors.black,
tabs:tabs.map((Tab tab) {
return Tab(text: tab.text);
}).toList()),
color: Colors.white,
),
pinned:true,
),
];
},
body:TabBarView(
children:tabs.map((Tab tab) {
return Container(
child:Tab(text: tab.text),
);
}).toList()))),
);
}
///最顶层布局设置
_title() {
return Row(
children: [
Container(
margin:EdgeInsets.only(right:20),
child:Row(
children: [
Icon(
Icons.list,
color: Colors.white,
),
Padding(
padding:EdgeInsets.only(left:5),
child:ClipOval(
child:Image.asset(
'assets/images/goods1.png',
width:30,
height:30,
),
),
),
],
)),
Expanded(
flex:2,
child:MyTextField(),
),
Container(
margin:EdgeInsets.only(left:20),
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.videogame_asset_sharp,
size:30,
),
Padding(
padding:EdgeInsets.fromLTRB(5, 0, 5, 0),
child:Icon(
Icons.arrow_circle_down,
size:30,
),
),
Icon(
Icons.message_rounded,
size:30,
),
],
)),
],
);
}
}
