Flutter吸顶效果_flutter 吸顶

前言：

关于吸顶效果，在Flutter当中，已经提供了这么一个控件，但是由于太复杂，所以网上的资料有些少，本文章主要利用Flutter自带的这种吸顶动画控件，配合着动画完成的一个用户中心的页面。

import 'package:flutter/material.dart';

class UserPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;
    return Scaffold(
      body: MainPage(rpx: rpx,),
    );
  }
}

class MainPage extends StatefulWidget {
  MainPage({Key key, this.rpx});
  final double rpx;
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> with TickerProviderStateMixin {
  double extraPichHeight = 0;   // 图片变化的高度
  double prevdy;                 // 初始点击位置
  BoxFit fitType;               // 图片的适应方式

  AnimationController animationcontroller;        // 动画控制器
  Animation<double> animation;                    // 动画

  @override
  void initState() {
    super.initState();
    prevdy = 0;
    fitType = BoxFit.fitWidth;
    animationcontroller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));   // 动画时间
    animation = Tween(begin: 0.0, end: 0.0).animate(animationcontroller);       // 效果绑定动画时间
  
  }

  // 手饰点击的时候执行
  updatePicHeight(changed){
    print('prevdy：$prevdy');
    print('changed:$changed');
    // 如果初始点击位置为0，那么记录传入进来的点击的值
    // 如果之前没有点过，那么首次点击的位置就是手饰按下去的位置
    if(prevdy == 0){
      prevdy = changed;
    }
    //计算图片应该变化的高度
    // 图片容器增长的高度 += 改变的高度坐标 - 鼠标上一个点的坐标（也就代表一直增长）
    extraPichHeight += changed - prevdy;
    // 如果下拉过了200后，就修改图片的适应格式
    if(extraPichHeight >= 200 * widget.rpx){
      fitType = BoxFit.fitHeight;
    }else{
      fitType = BoxFit.fitWidth;
    }
    setState(() {
      prevdy = changed;
      extraPichHeight = extraPichHeight;
      fitType = fitType;
    });
  }
  // 手饰抬起的时候执行
  runAnimate(){
    setState(() {
      animation = Tween(begin: extraPichHeight, end: 0.0).animate(animationcontroller)..addListener((){
        if(extraPichHeight >= 200 * widget.rpx){
          fitType = BoxFit.fitHeight;
        }else{
          fitType = BoxFit.fitWidth;
        }
        setState(() {
          extraPichHeight = animation.value;
          fitType = fitType;
        });
      });
      // 执行完回弹之后，初始点击变化值 再次初始化为0（保证移动-鼠标位置 = 增长的高度）
      //（避免保留着上一次的鼠标点击值，造成下一次点击的时候，移动的高度比点击的位置小）
      prevdy = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;
    return Listener(
      onPointerMove: (result){
        updatePicHeight(result.position.dy);
      },
      onPointerUp: (_){
        runAnimate();
        animationcontroller.forward(from: 0);     //
      },
      child: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            floating: true,
            leading: IconButton(
              icon: Icon(Icons.search),
              onPressed: (){},
            ),
            expandedHeight: 500 * rpx + extraPichHeight,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('用户中心'),
              centerTitle: true,
              background: SliverTopBar(extraPicHeight: extraPichHeight, fitType: fitType,),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index){
              return Container(height: 30, color: Colors.blue,);
            }, childCount: 20)
          )
        ],
      ),
    );
  }
}

class SliverTopBar extends StatelessWidget {
  const SliverTopBar({Key key, @required this.extraPicHeight, @required this.fitType});
  final double extraPicHeight;
  final BoxFit fitType;
  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;
    return Stack(
      children: <Widget>[
        Column(
          children: <Widget>[
            Image.asset(
              'static/timg.jpg',
              width: 750 * rpx,
              height: 300 * rpx + extraPicHeight,
              fit: fitType,
            ),
            Container(
              height: 100 * rpx ,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal:10.0),
              child: Divider(
                color: Colors.grey[700],
              ),
            ),
            Container(
              height: 100 * rpx,
            ),
          ],
        ),
        Positioned(
          top:250 * rpx + extraPicHeight,
          left: 35 * rpx,
          child: Container(
            width: 130 * rpx,
            height: 130 * rpx,
            child: CircleAvatar(
              backgroundImage: NetworkImage('http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg'),
            ),
          ),
        )
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166