美文网首页Flutter
Flutter 滑动列表隐藏头部,显示标题动画

Flutter 滑动列表隐藏头部,显示标题动画

作者: 景小帮 | 来源:发表于2021-04-02 14:36 被阅读0次

    先来一张效果图:

    需求说明:列表滚动到顶部,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,

                    ),

                  ],

                )),

          ],

        );

      }

    }

    相关文章

      网友评论

        本文标题:Flutter 滑动列表隐藏头部,显示标题动画

        本文链接:https://www.haomeiwen.com/subject/pphtkltx.html