flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

最近看到了一个插件，实现一个可滑动关闭组件。滑动关闭组件即手指向下滑动，组件随手指移动，当移动一定位置时候，手指抬起后组件滑出屏幕。

一、GestureDetector嵌套Container非ListView

如果要可滑动关闭，则需要手势GestureDetector，GestureDetector这里实现了onVerticalDragDown、onVerticalDragUpdate、onVerticalDragEnd，通过手势，更新AnimatedContainer的高度。

@override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        GestureDetector(
          onVerticalDragDown: _onVerticalDragDown,
          onVerticalDragUpdate: _onVerticalDragUpdate,
          onVerticalDragEnd: _onVerticalDragEnd,
          child: AnimatedContainer(
            curve: Curves.easeOut,
            duration: Duration(milliseconds: 250),
            onEnd: () {
              _onAniPositionedEnd(context);
            },
            height: yBottomOffset + widget.displayHeight,
            width: screenSize.width,
            clipBehavior: Clip.hardEdge,
            decoration: const BoxDecoration(
              color: Colors.transparent,
            ),
            child: widget.child,
          ),
        ),
      ],
    );
  }
    
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

我们通过onVerticalDragUpdate来更新AnimatedContainer的高度height，

void _onVerticalDragUpdate(DragUpdateDetails details) {
    print("_onVerticalDragUpdate");
    if (details.delta.dy <= 0) {
      // 向上
      isDragDirectionUp = true;
    } else {
      // 向下
      isDragDirectionUp = false;
    }
    yBottomOffset -= details.delta.dy;
    if (yBottomOffset > 0.0) {
      yBottomOffset = 0.0;
    }

    if (yBottomOffset < -widget.displayHeight) {
      yBottomOffset = -widget.displayHeight;
    }
    setState(() {});
  }
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

当拖动手势结束之后，来检测是否是隐藏状态。

void _onVerticalDragEnd(DragEndDetails details) {
    print("_onVerticalDragEnd");
    if (yBottomOffset < -widget.displayHeight / 3) {
      // 隐藏移除
      yBottomOffset = -widget.displayHeight;
      isCompleteHide = true;
    } else {
      yBottomOffset = 0.0;
      isCompleteHide = false;
    }
    setState(() {

    });
  }
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

AnimatedContainer中有onEnd方法回调，当动画结束之后，在此方法回调中来处理是否pop等操作

void _onAniPositionedEnd(BuildContext context) {
    print("_onAniPositionedEnd");
    if (isCompleteHide) {
      // 隐藏了，则移除
      Navigator.of(context).pop();
    }
  }
    
1
2
3
4
5
6
7
8

DragBottomSheet2完整代码如下

import 'package:flutter/material.dart';

class DragBottomSheet2 extends StatefulWidget {
  const DragBottomSheet2({
    super.key,
    required this.child,
    required this.displayHeight,
  });

  // child
  final Widget child;

  // 展示的child高度
  final double displayHeight;

  @override
  State createState() => _DragBottomSheet2State();
}

class _DragBottomSheet2State extends State {
  bool? isDragDirectionUp;
  double yBottomOffset = 0.0;
  bool isCompleteHide = false;

  void _onVerticalDragDown(DragDownDetails details) {
    print("_onVerticalDragDown");
  }

  void _onVerticalDragUpdate(DragUpdateDetails details) {
    print("_onVerticalDragUpdate");
    if (details.delta.dy <= 0) {
      // 向上
      isDragDirectionUp = true;
    } else {
      // 向下
      isDragDirectionUp = false;
    }
    yBottomOffset -= details.delta.dy;
    if (yBottomOffset > 0.0) {
      yBottomOffset = 0.0;
    }

    if (yBottomOffset < -widget.displayHeight) {
      yBottomOffset = -widget.displayHeight;
    }
    setState(() {});
  }

  void _onVerticalDragEnd(DragEndDetails details) {
    print("_onVerticalDragEnd");
    if (yBottomOffset < -widget.displayHeight / 3) {
      // 隐藏移除
      yBottomOffset = -widget.displayHeight;
      isCompleteHide = true;
    } else {
      yBottomOffset = 0.0;
      isCompleteHide = false;
    }
    setState(() {});
  }

  void _onAniPositionedEnd(BuildContext context) {
    print("_onAniPositionedEnd");
    if (isCompleteHide) {
      // 隐藏了，则移除
      Navigator.of(context).pop();
    }
  }

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        GestureDetector(
          onVerticalDragDown: _onVerticalDragDown,
          onVerticalDragUpdate: _onVerticalDragUpdate,
          onVerticalDragEnd: _onVerticalDragEnd,
          child: AnimatedContainer(
            curve: Curves.easeOut,
            duration: Duration(milliseconds: 250),
            onEnd: () {
              _onAniPositionedEnd(context);
            },
            height: yBottomOffset + widget.displayHeight,
            width: screenSize.width,
            clipBehavior: Clip.hardEdge,
            decoration: const BoxDecoration(
              color: Colors.transparent,
            ),
            child: widget.child,
          ),
        ),
      ],
    );
  }
}

    
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

点击按钮弹出bottomSheet2代码如下

void showBottomSheet2(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double displayHeight = size.height - 88;
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (ctx) {
        return DragBottomSheet2(
          displayHeight: displayHeight,
          child: Container(
            width: size.width,
            height: displayHeight,
            color: Colors.orangeAccent,
            child: Text(
              '内容',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
          ),
        );
      },
    );
  }
    
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

效果图如下

二、GestureDetector嵌套ListView

GestureDetector嵌套ListView后，Flutter会根据竞技场Arena机制，通过一定逻辑选择一个组件胜出。
Flutter为了解决手势冲突问题，Flutter给开发者提供了一套解决方案。在该方案中，Flutter引入了Arena（竞技场）概念，然后把冲突的手势加入到Arena中并竞争，谁胜利，谁就获得手势的后续处理权。

Arena竞技场的原理请看https://juejin.cn/post/6874570159768633357

所以在GestureDetector嵌套ListView后，Flutter框架会将这些Gesture与ListView组件都加入竞技场，然后通过一定的逻辑选择一个组件胜出，通常同类组件嵌套时最内层的组件胜出，胜出的组件会处理接下来的move和up事件，其它组件则不会继续处理这些事件了。所以在GestureDetector嵌套ListView的场景中，由于是ListView最终胜出，所以后续的事件都交由ListView处理，而GestureDetector收不到后续的事件，也就不会响应用户的手势了。因此，我们解决这个问题的第一步就是要让GestureDetector在这种场景下也能收到后续的事件

参考请看https://zhuanlan.zhihu.com/p/680586251

我们需要根据GestureDetector真正处理用户手势事件的是内部的Recognizer，比如处理上下滑动的是VerticalDragGestureRecognizer而Recognizer在竞技场失败后也可以单方面宣布自己胜出这样即使在竞技场失败了，GestureDetector也能收到后续的手势事件
因此我们现定义一个单方面宣布胜出的Recognizer

class _MyVerticalDragGestureRecognizer extends VerticalDragGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    // 单方面宣布自己胜出
    acceptGesture(pointer);
  }
}
    
1
2
3
4
5
6
7
8

我们需要将Recognizer加入到GestureDetector中，会用到RawGestureDetector

RawGestureDetector(
      gestures: {
        _MyVerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<
                _MyVerticalDragGestureRecognizer>(
            () => _MyVerticalDragGestureRecognizer(),
            (_MyVerticalDragGestureRecognizer recognizer) {
          recognizer
            ..onStart = (DragStartDetails details) {
              
            }
            ..onUpdate = (DragUpdateDetails details) {
              
            }
            ..onEnd = (DragEndDetails details) {
             
            };
        }),
      },
      child: ...
    );
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这时候当滚动ListView时候，也能收到手势事件了。

监听ListView的滚动，时候我们需要用到NotificationListener

 NotificationListener(  // 监听内部ListView的滑动变化
              onNotification: (ScrollNotification notification) {
                if (notification is OverscrollNotification && notification.overscroll < 0) {
                  // 用户向下滑动，ListView已经滑动到顶部，处理GestureDetector的滑动事件
                } else if (notification is ScrollUpdateNotification) {
                  // 用户在ListView中执行滑动动作，关闭外部GestureDetector的滑动处理
                } else {
                  
                }

                return false;
              },
              child:  //ListView
            ),
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最后DragGestureBottomSheet完整代码如下

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_demolab/drag_sheet_controller.dart';

class DragGestureBottomSheet extends StatefulWidget {
  const DragGestureBottomSheet({
    super.key,
    required this.child,
    required this.displayHeight,
    this.duration = const Duration(milliseconds: 200),
    this.openDraggable = true,
    this.autoNavigatorPop = true,
    this.onShow,
    this.onHide,
  });

  // child
  final Widget child;

  // 展示的child高度
  final double displayHeight;

  // 拖动动画时长duration
  final Duration duration;

  // 是否需要拖动
  final bool openDraggable;

  // 是否需要自动pop
  final bool autoNavigatorPop;

  // This method will be executed when the solid bottom sheet is completely
  // opened.
  final void Function()? onShow;

  // This method will be executed when the solid bottom sheet is completely
  // closed.
  final void Function()? onHide;

  @override
  State createState() => _DragGestureBottomSheetState();
}

class _DragGestureBottomSheetState extends State {
  bool? isDragDirectionUp;
  double yBottomOffset = 0.0;
  bool isDraggable = false;
  bool isCompleteHide = false;

  DragSheetController? dragSheetController;

  @override
  void initState() {
    // TODO: implement initState
    dragSheetController = DragSheetController();
    dragSheetController?.dispatch(widget.displayHeight);
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    dragSheetController?.dispose();
    super.dispose();
  }

  void _onVerticalDragUpdate(data) {
    if (widget.openDraggable) {
      print("data.delta.dy:${data.delta.dy}");
      if (data.delta.dy <= 0) {
        // 向上
        isDragDirectionUp = true;
      } else {
        // 向下
        isDragDirectionUp = false;
      }
      yBottomOffset -= data.delta.dy;
      if (yBottomOffset > 0.0) {
        yBottomOffset = 0.0;
      }

      if (yBottomOffset < -widget.displayHeight) {
        yBottomOffset = -widget.displayHeight;
      }

      double height = widget.displayHeight + yBottomOffset;
      dragSheetController?.dispatch(height);
    }

  }

  void _onVerticalDragEnd(data) {
    if (widget.openDraggable) {
      // 根据判断是否隐藏与显示
      if (false == isDragDirectionUp) {
        if (yBottomOffset < -widget.displayHeight / 3) {
          // 隐藏移除
          yBottomOffset = -widget.displayHeight;
          isCompleteHide = true;
        } else {
          yBottomOffset = 0.0;
          isCompleteHide = false;
        }
      } else {
        yBottomOffset = 0.0;
        isCompleteHide = false;
      }

      double height = widget.displayHeight + yBottomOffset;
      dragSheetController?.dispatch(height);
    }
  }

  void _onAniPositionedEnd(BuildContext context) {
    // 动画结束
    print("_onAniPositionedEnd");
    if (isCompleteHide) {
      // 隐藏，则调用hiden
      if (widget.onHide != null) {
        widget.onHide!.call();
      }
    } else {
      // 显示，则调用show
      if (widget.onShow != null) {
        widget.onShow!.call();
      }
    }

    if (isCompleteHide && widget.autoNavigatorPop) {
      // 隐藏了，则移除
      Navigator.of(context).pop();
    }
  }

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        RawGestureDetector(
          gestures: {
            _MyVerticalDragGestureRecognizer:
                GestureRecognizerFactoryWithHandlers<
                        _MyVerticalDragGestureRecognizer>(
                    () => _MyVerticalDragGestureRecognizer(),
                    (_MyVerticalDragGestureRecognizer recognizer) {
              recognizer
                ..onStart = (DragStartDetails details) {}
                ..onUpdate = (DragUpdateDetails details) {
                  if (!isDraggable) {
                    return;
                  }
                  _onVerticalDragUpdate(details);
                }
                ..onEnd = (DragEndDetails details) {
                  _onVerticalDragEnd(details);
                };
            }),
          },
          child: StreamBuilder(
            stream: dragSheetController?.streamData,
            initialData: widget.displayHeight,
            builder: (_, snapshot) {
              return AnimatedContainer(
                curve: Curves.easeOut,
                duration: widget.duration,
                onEnd: () {
                  _onAniPositionedEnd(context);
                },
                height: snapshot.data,
                width: screenSize.width,
                clipBehavior: Clip.hardEdge,
                decoration: const BoxDecoration(
                  color: Colors.transparent,
                ),
                child: NotificationListener(
                  // 监听内部ListView的滑动变化
                  onNotification: (ScrollNotification notification) {
                    if (notification is OverscrollNotification &&
                        notification.overscroll < 0) {
                      // 用户向下滑动，ListView已经滑动到顶部，处理GestureDetector的滑动事件
                      isDraggable = true;
                    } else if (notification is ScrollUpdateNotification) {
                      // 用户在ListView中执行滑动动作，关闭外部GestureDetector的滑动处理
                      isDraggable = false;
                    } else {}

                    return false;
                  },
                  child: widget.child,
                ),
              );
            },
          ),
        )
      ],
    );
  }
}

class _MyVerticalDragGestureRecognizer extends VerticalDragGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    // 单方面宣布自己胜出
    acceptGesture(pointer);
  }
}

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

三、DragSheetController处理数据流

这里定义了DragSheetController来处理数据流，DragSheetController中包括streamController、subscription、streamSink、streamData

StreamBuilder是一个Widget，它依赖Stream来做异步数据获取刷新widget。
Stream是一种用于异步处理数据流的机制，它允许我们从一端发射一个事件，从另外一端去监听事件的变化.Stream类似于JavaScript中的Promise、Swift中的Future或Java中的RxJava，它们都是用来处理异步事件和数据的。Stream是一个抽象接口，我们可以通过StreamController接口可以方便使用Stream。

使用详情请查看https://brucegwo.blog.csdn.net/article/details/136232000

最后DragSheetController代码如下

import 'dart:async';

/// 处理Stream、StreamController相关逻辑
class DragSheetController  {
  StreamSubscription? subscription;

  //创建StreamController
  StreamController? streamController = StreamController.broadcast();

  // 获取StreamSink用于发射事件
  StreamSink? get streamSink => streamController?.sink;

  // 获取Stream用于监听
  Stream? get streamData => streamController?.stream;

  // Adds new values to streams
  void dispatch(double value) {
    streamSink?.add(value);
  }

  // Closes streams
  void dispose() {
    streamSink?.close();
  }
}
    
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

通过DragSheetController，当拖动时候高度发生变化时候会调用dispatch方法，dispatch来发射数据流，DragGestureBottomSheet中通过StreamBuilder来调整AnimatedContainer的高度。

最后调用使用DragGestureBottomSheet

我们使用showModalBottomSheet展示DragGestureBottomSheet时候

// 显示底部弹窗
  void showCustomBottomSheet(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double displayHeight = size.height - 88;
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (ctx) {
        return DragGestureBottomSheet(
          displayHeight: displayHeight,
          autoNavigatorPop: true,
          openDraggable: true,
          onHide: () {
            print("onHide");
          },
          onShow: () {
            print("onShow");
          },
          child: Container(
            width: size.width,
            height: displayHeight,
            color: Colors.white,
            child: ScrollConfiguration(
              behavior: NoIndicatorScrollBehavior(),
              child: ListView.builder(
                itemCount: 20,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return GestureDetector(
                    child: Container(
                      width: size.width,
                      height: 100,
                      decoration: BoxDecoration(
                        color: Colors.transparent,
                        border: Border.all(
                          color: Colors.black12,
                          width: 0.25,
                          style: BorderStyle.solid,
                        ),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('index -- $index'),
                          SizedBox(
                            width: 50,
                            child: ClipOval(
                                child:
                                    Image.asset("assets/images/hero_test.png")),
                          ),
                        ],
                      ),
                    ),
                    onTap: () {
                      Navigator.of(context).push(
                          CupertinoPageRoute(builder: (BuildContext context) {
                        return HeroPage();
                      }));
                    },
                  );
                },
              ),
            ),
          ),
        );
      },
    );
  }
    
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

效果图如下

https://brucegwo.blog.csdn.net/article/details/136241765

四、小结

flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

学习记录，每天不停进步。