先來(lái)一張效果圖：
需求說(shuō)明：列表滾動(dòng)到頂部祖能，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:'國(guó)家寶藏'),
? ? 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 設(shè)置
? _tabBar() {
????return DefaultTabController(
? ? ? length:tabs.length,
? ? ? child:Scaffold(
????????// appBar: AppBar(
????????//? backgroundColor: Color(0xffF65884),
????????//? title:_title(),
????????// ),
? ? ? ? ? body:NestedScrollView(
????????????????headerSliverBuilder: (context, bool) {
????????????????return [
????????????????????SliverAppBar(
????????????????????///合并的高度温治，默認(rèn)是狀態(tài)欄的高度加AppBar的高度
? ? ? ? ? ? ? ? ? ? expandedHeight:200.0,
? ? ? ? ? ? ? ? ? ? ///設(shè)置標(biāo)題
? ? ? ? ? ? ? ? ? ? title:Text('頻道'),
? ? ? ? ? ? ? ? ? ? ///左側(cè)返回鍵
? ? ? ? ? ? ? ? ? ? leading:new IconButton(
????????????????????icon:Icon(Icons.arrow_back_ios), onPressed: () {}),
? ? ? ? ? ? ? ? ? ///標(biāo)題右側(cè)的操作
? ? ? ? ? ? ? ? ? ? actions: [
????????????????????????IconButton(
????????????????????????????icon:Icon(Icons.add),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?onPressed: (){})
????????????????????????????],
? ? ? ? ? ? ? ? ? ? ///滑動(dòng)是否懸浮
? ? ? ? ? ? ? ? ? ? floating:true,
? ? ? ? ? ? ? ? ? ? ///標(biāo)題欄是否固定
? ? ? ? ? ? ? ? ? ? pinned:true,
? ? ? ? ? ? ? ? ? ? ///配合floating 使用
? ? ? ? ? ? ? ? ? ? snap:false,
? ? ? ? ? ? ? ? ? ? ///SliverAppBar 可以理解為背景內(nèi)容區(qū)域
? ? ? ? ? ? ? ? ? ? flexibleSpace:FlexibleSpaceBar(
????????????????????///設(shè)置背景
? ? ? ? ? ? ? ? ? ? ? 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(
????????????????????????//? "我是可以跟著滑動(dòng)的title",
????????????????????????// ),
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? new SliverPersistentHeader(
????????????????????????delegate:new SliverTabBarDelegate(
????????????????????????new TabBar(
????????????????????????///設(shè)置左右可以滑動(dòng)
? ? ? ? ? ? ? ? ? ? ? ? ? isScrollable:true,
? ? ? ? ? ? ? ? ? ? ? ? ? ///設(shè)置滑動(dòng)線顏色
? ? ? ? ? ? ? ? ? ? ? ? ? indicatorColor: Colors.white,
? ? ? ? ? ? ? ? ? ? ? ? ? ///設(shè)置滑動(dòng)線寬度
? ? ? ? ? ? ? ? ? ? ? ? ? indicatorWeight:2,
? ? ? ? ? ? ? ? ? ? ? ? ? indicatorSize: TabBarIndicatorSize.label,
? ? ? ? ? ? ? ? ? ? ? ? ? ///設(shè)置點(diǎn)擊顏色
? ? ? ? ? ? ? ? ? ? ? ? ? labelColor: Colors.red,
? ? ? ? ? ? ? ? ? ? ? ? ? ///設(shè)置字體顏色
? ? ? ? ? ? ? ? ? ? ? ? ? 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()))),
? ? );
? }
///最頂層布局設(shè)置
? _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,
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ],
? ? ? ? ? ? )),
? ? ? ],
? ? );
? }
}
