头部折叠

使用NestedScrollView实现嵌套列表

头部使用SliverAppBar实现折叠，内容实用TabBarView + ListView实现内容列表

  1. _scrollController.addListener(() {
  2.   // print(_scrollController.offset);
  3.   if (_scrollController.offset > 159.0 && !showTitle) {
  4.     setState(() {
  5.       showTitle = true;
  6.     });
  7.   }
  8.   if (_scrollController.offset < 159 && showTitle) {
  9.     setState(() {
  10.       showTitle = false;
  11.     });
  12.   }
  13. });
  15. NestedScrollView(
  16.   controller: _scrollController,
  17.   headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  18.     return <Widget>[
  19.       SliverOverlapAbsorber(
  20.         handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
  21.         sliver: MineHeaderWidget(
  22.           showTitle: showTitle,
  23.           bgColor: AppBarBgColor,
  24.           textColor: AppBarTextColor,
  25.           tabController: _tabController,
  26.           extraPicHeight: extraPicHeight,
  27.         ),
  28.       ),
  29.     ];
  30.   },
  31.   body: TabBarView(
  32.     controller: _tabController,
  33.     children: [MineNotesWidget(), MineNotesWidget(), MineNotesWidget()],
  34.   ),
  35. ),

sliverAppBar

使用NestedScrollView的controller监听滚动位置，当头像滚上去，在title显示头像

  1. MineHeader.dart
  3. SliverAppBar(
  4.   floating: false,                           //标题栏是否悬浮
  5.   snap: false,                            //配合floating使用
  6.   pinned: true,                           //标题栏是否固定
  7.   expandedHeight: 290.0 + extraPicHeight, //伸缩高度
  8.   forceElevated: true,                                        //是否显示阴影
  9.   leading: IconButton(                    //标题栏左侧按钮，多为返回按钮
  10.     icon: Icon(Icons.menu, color: textColor),
  11.     onPressed: () {
  12.       Application.navigateTo(context, '/setting');
  13.     },
  14.   ),
  15.   title: showTitle         //使用showTitle展示头像
  16.   ? Center(
  17.     child: CircleAvatar(
  18.       radius: 18,
  19.       backgroundImage: NetworkImage(
  20.         'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
  21.     ),
  22.   )
  23.   : Text(''),
  24.   actions: [              // appbar右侧按钮
  25.     InkWell(
  26.       child: Container(
  27.         color: Colors.transparent,
  28.         padding: EdgeInsets.symmetric(horizontal: 10),
  29.         child: Icon(Icons.share, color: textColor),
  30.       ),
  31.       onTap: () {},
  32.     ),
  33.   ],
  34.   backgroundColor: bgColor,          //标题栏背景颜色
  35.   bottom: PreferredSize(             //标题栏底部内容，此处为TabBar
  36.     preferredSize: Size.fromHeight(40),
  37.     child: Container(
  38.       decoration: BoxDecoration(
  39.         color: Colors.white70,
  40.         borderRadius: BorderRadius.only(
  41.           topLeft: Radius.circular(20), topRight: Radius.circular(20)),
  42.       ),
  43.       padding: EdgeInsets.symmetric(horizontal: 70),
  44.       child: TabBar(
  45.         controller: tabController,
  46.         labelColor: Colors.black87,
  47.         labelPadding: EdgeInsets.symmetric(vertical: 12),
  48.         indicatorPadding: EdgeInsets.symmetric(horizontal: 20),
  49.         tabs: [Text('笔记'), Text('收藏'), Text('赞过')],
  50.       ),
  51.     ),
  52.   ),
  53.   flexibleSpace: FlexibleSpaceBar(        // 伸缩内容
  54.     collapseMode: CollapseMode.pin,
  55.     background: Container(
  56.       height: 290 + extraPicHeight,      // 背景图片高度
  57.       width: double.infinity,
  58.       decoration: BoxDecoration(
  59.         image: DecorationImage(
  60.           image: AssetImage("assets/images/login/login_bg_1.jpg"),
  61.           fit: BoxFit.fill,
  62.         ),
  63.       ),
  64.       child: Stack(
  65.         fit: StackFit.expand,
  66.         children: [
  67.           Positioned(
  68.             child: Container(
  69.               width: double.infinity,
  70.               height: double.infinity,
  71.               color: Color(0x99000000),
  72.             ),
  73.           ),
  74.         ],
  75.       ),
  76.     ),
  77.   ),
  78. )

头部图拉伸效果

使用Listener监听下滑动作

计算下滑距离值，使头图高度加距离实现拉伸效果

  1. late AnimationController _animationController;
  3. Animation<double>? anim;
  4. double extraPicHeight = 0;
  5. double prev_dy = 0;
  7. runAnimate() {
  8.   //设置动画让extraPicHeight的值从当前的值渐渐回到 0
  9.   setState(() {
  10.     anim =
  11.       Tween(begin: extraPicHeight, end: 0.0).animate(_animationController)
  12.       ..addListener(() {
  13.         setState(() {
  14.           extraPicHeight = anim!.value;
  15.         });
  16.       });
  17.     prev_dy = 0; //同样归零
  18.   });
  19. }
  21. updatePicHeight(changed) {
  22.   if (prev_dy == 0) {
  23.     //如果是手指第一次点下时，我们不希望图片大小就直接发生变化，所以进行一个判定。
  24.     prev_dy = changed;
  25.   }
  26.   extraPicHeight += changed - prev_dy; //新的一个y值减去前一次的y值然后累加，作为加载到图片上的高度。
  27.   setState(() {
  28.     //更新数据
  29.     prev_dy = changed;
  30.     if (extraPicHeight < 0) {     //不能使extraPicHeight小于0，
  31.       extraPicHeight = 0;
  32.     } else {
  33.       extraPicHeight = extraPicHeight;
  34.     }
  35.   });
  36. }
  39. Listener(
  40.   onPointerMove: (result) {
  41.     if (_scrollController.offset == 0) {
  42.       updatePicHeight(result.position.dy);
  43.     }
  44.   },
  45.   onPointerUp: (_) {    //抬手归0动画
  46.     runAnimate(); //动画执行
  47.     _animationController.forward(from: 0);
  48.   },
  49.   childe: NestedScrollView()
  50. }
  1. import 'package:flutter/material.dart';
  2. import 'package:myapp/components/mine/mine_header.dart';
  3. import 'package:myapp/components/mine/mine_notes.dart';
  4. import 'package:palette_generator/palette_generator.dart';
  6. class MineTwoPage extends StatefulWidget {
  7.   const MineTwoPage({Key? key}) : super(key: key);
  9.   @override
  10.   MineTwoPageState createState() => MineTwoPageState();
  11. }
  13. class MineTwoPageState extends State<MineTwoPage>
  14.     with TickerProviderStateMixin {
  15.   bool showTitle = false;
  16.   List<String> _tabs = ["Tab 1", "Tab 2", "Tab 3"];
  17.   Color AppBarBgColor = Color(0x55000000);
  18.   Color AppBarTextColor = Colors.white;
  20.   late TabController _tabController;
  21.   late PaletteGenerator _paletteGenerator;
  22.   late ScrollController _scrollController;
  23.   late AnimationController _animationController;
  25.   Animation<double>? anim;
  26.   double extraPicHeight = 0;
  27.   double prev_dy = 0;
  29.   @override
  30.   void initState() {
  31.     // TODO: implement initState
  32.     init();
  33.     super.initState();
  34.   }
  36.   @override
  37.   void dispose() {
  38.     // TODO: implement dispose
  39.     super.dispose();
  40.   }
  42.   void init() async {
  43.     _scrollController = new ScrollController();
  44.     _tabController = new TabController(length: 3, vsync: this);
  45.     _animationController =
  46.         AnimationController(vsync: this, duration: Duration(milliseconds: 300));
  47.     anim = Tween(begin: 0.0, end: 0.0).animate(_animationController);
  49.     _scrollController.addListener(() {
  50.       // print(_scrollController.offset);
  51.       if (_scrollController.offset > 159.0 && !showTitle) {
  52.         setState(() {
  53.           showTitle = true;
  54.         });
  55.       }
  56.       if (_scrollController.offset < 159 && showTitle) {
  57.         setState(() {
  58.           showTitle = false;
  59.         });
  60.       }
  61.     });
  62.     _paletteGenerator = await PaletteGenerator.fromImageProvider(
  63.       AssetImage('assets/images/login/login_bg_1.jpg'),
  64.       size: Size(double.infinity, double.infinity),
  65.       maximumColorCount: 20,
  66.     );
  68.     setState(() {
  69.       AppBarBgColor = _paletteGenerator.dominantColor!.color;
  70.       // AppBarTextColor = _paletteGenerator!.dominantColor!.bodyTextColor;
  71.     });
  72.   }
  74.   runAnimate() {
  75.     //设置动画让extraPicHeight的值从当前的值渐渐回到 0
  76.     setState(() {
  77.       anim =
  78.           Tween(begin: extraPicHeight, end: 0.0).animate(_animationController)
  79.             ..addListener(() {
  80.               setState(() {
  81.                 extraPicHeight = anim!.value;
  82.               });
  83.             });
  84.       prev_dy = 0; //同样归零
  85.     });
  86.   }
  88.   updatePicHeight(changed) {
  89.     if (prev_dy == 0) {
  90.       //如果是手指第一次点下时，我们不希望图片大小就直接发生变化，所以进行一个判定。
  91.       prev_dy = changed;
  92.     }
  93.     extraPicHeight += changed - prev_dy; //新的一个y值减去前一次的y值然后累加，作为加载到图片上的高度。
  94.     setState(() {
  95.       //更新数据
  96.       prev_dy = changed;
  97.       if (extraPicHeight < 0) {
  98.         extraPicHeight = 0;
  99.       } else {
  100.         extraPicHeight = extraPicHeight;
  101.       }
  102.     });
  103.   }
  105.   @override
  106.   Widget build(BuildContext context) {
  107.     return Listener(
  108.       onPointerMove: (result) {
  109.         if (_scrollController.offset == 0) {
  110.           updatePicHeight(result.position.dy);
  111.         }
  112.       },
  113.       onPointerUp: (_) {
  114.         runAnimate(); //动画执行
  115.         _animationController.forward(from: 0);
  116.       },
  117.       child: NestedScrollView(
  118.         controller: _scrollController,
  119.         headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  120.           return <Widget>[
  121.             SliverOverlapAbsorber(
  122.               handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
  123.               sliver: MineHeaderWidget(
  124.                 showTitle: showTitle,
  125.                 bgColor: AppBarBgColor,
  126.                 textColor: AppBarTextColor,
  127.                 tabController: _tabController,
  128.                 extraPicHeight: extraPicHeight,
  129.               ),
  130.             ),
  131.           ];
  132.         },
  133.         body: TabBarView(
  134.           // These are the contents of the tab views, below the tabs.
  135.           controller: _tabController,
  136.           children: [MineNotesWidget(), MineNotesWidget(), MineNotesWidget()],
  137.         ),
  138.       ),
  139.     );
  140.   }
  141. }