firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modularize ReorderableListView auto scrolling logic (#96563)

Browse Source 
* Modularize ReorderableListView auto scrolling logic

* comment

* fix test

* addressing comment
This commit is contained in:
chunhtai 2022-01-13 16:47:56 -08:00 committed by GitHub
parent c13d4417a8
commit 3bc57c0090
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 173 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
packages/flutter/lib/src/widgets/reorderable_list.dart
View File

@ -2,7 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:math';
import 'dart:math' as math;
import 'package:flutter/gestures.dart';
import 'package:flutter/rendering.dart';
@ -16,7 +16,6 @@ import 'media_query.dart';
import 'overlay.dart';
import 'scroll_controller.dart';
import 'scroll_physics.dart';
import 'scroll_position.dart';
import 'scroll_view.dart';
import 'scrollable.dart';
import 'sliver.dart';
@ -523,7 +522,6 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
Offset? _finalDropPosition;
MultiDragGestureRecognizer? _recognizer;
int? _recognizerPointer;
bool _autoScrolling = false;
// To implement the gap for the dragged item, we replace the dragged item
// with a zero sized box, and then translate all of the later items down
// by the size of the dragged item. This allows us to keep the order of the
@ -534,6 +532,8 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
// so the gap calculation can compensate for it.
bool _dragStartTransitionComplete = false;
_EdgeDraggingAutoScroller? _autoScroller;
late ScrollableState _scrollable;
Axis get _scrollDirection => axisDirectionToAxis(_scrollable.axisDirection);
bool get _reverse =>
@ -544,6 +544,13 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
void didChangeDependencies() {
super.didChangeDependencies();
_scrollable = Scrollable.of(context)!;
if (_autoScroller?.scrollable != _scrollable) {
_autoScroller?.stopAutoScroll();
_autoScroller = _EdgeDraggingAutoScroller(
_scrollable,
onScrollViewScrolled: _handleScrollableAutoScrolled
);
}
}
@override
@ -557,6 +564,7 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
@override
void dispose() {
_dragInfo?.dispose();
_autoScroller?.stopAutoScroll();
super.dispose();
}
@ -669,7 +677,7 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
setState(() {
_overlayEntry?.markNeedsBuild();
_dragUpdateItems();
_autoScrollIfNecessary();
_autoScroller?.startAutoScrollIfNecessary(_dragTargetRect);
});
}
@ -716,6 +724,7 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
}
_dragInfo?.dispose();
_dragInfo = null;
_autoScroller?.stopAutoScroll();
_resetItemGap();
_recognizer?.dispose();
_recognizer = null;
@ -732,6 +741,14 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
}
}
void _handleScrollableAutoScrolled() {
if (_dragInfo == null)
return;
_dragUpdateItems();
// Continue scrolling if the drag is still in progress.
_autoScroller?.startAutoScrollIfNecessary(_dragTargetRect);
}
void _dragUpdateItems() {
assert(_dragInfo != null);
final double gapExtent = _dragInfo!.itemExtent;
@ -810,55 +827,9 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
}
}
Future<void> _autoScrollIfNecessary() async {
if (!_autoScrolling && _dragInfo != null && _dragInfo!.scrollable != null) {
final ScrollPosition position = _dragInfo!.scrollable!.position;
double? newOffset;
const Duration duration = Duration(milliseconds: 14);
const double step = 1.0;
const double overDragMax = 20.0;
const double overDragCoef = 10;
final RenderBox scrollRenderBox = _dragInfo!.scrollable!.context.findRenderObject()! as RenderBox;
final Offset scrollOrigin = scrollRenderBox.localToGlobal(Offset.zero);
final double scrollStart = _offsetExtent(scrollOrigin, _scrollDirection);
final double scrollEnd = scrollStart + _sizeExtent(scrollRenderBox.size, _scrollDirection);
final double proxyStart = _offsetExtent(_dragInfo!.dragPosition - _dragInfo!.dragOffset, _scrollDirection);
final double proxyEnd = proxyStart + _dragInfo!.itemExtent;
if (_reverse) {
if (proxyEnd > scrollEnd && position.pixels > position.minScrollExtent) {
final double overDrag = max(proxyEnd - scrollEnd, overDragMax);
newOffset = max(position.minScrollExtent, position.pixels - step * overDrag / overDragCoef);
} else if (proxyStart < scrollStart && position.pixels < position.maxScrollExtent) {
final double overDrag = max(scrollStart - proxyStart, overDragMax);
newOffset = min(position.maxScrollExtent, position.pixels + step * overDrag / overDragCoef);
}
} else {
if (proxyStart < scrollStart && position.pixels > position.minScrollExtent) {
final double overDrag = max(scrollStart - proxyStart, overDragMax);
newOffset = max(position.minScrollExtent, position.pixels - step * overDrag / overDragCoef);
} else if (proxyEnd > scrollEnd && position.pixels < position.maxScrollExtent) {
final double overDrag = max(proxyEnd - scrollEnd, overDragMax);
newOffset = min(position.maxScrollExtent, position.pixels + step * overDrag / overDragCoef);
}
}
if (newOffset != null && (newOffset - position.pixels).abs() >= 1.0) {
_autoScrolling = true;
await position.animateTo(
newOffset,
duration: duration,
curve: Curves.linear,
);
_autoScrolling = false;
if (_dragInfo != null) {
_dragUpdateItems();
_autoScrollIfNecessary();
}
}
}
Rect get _dragTargetRect {
final Offset origin = _dragInfo!.dragPosition - _dragInfo!.dragOffset;
return Rect.fromLTWH(origin.dx, origin.dy, _dragInfo!.itemSize.width, _dragInfo!.itemSize.height);
}
Offset _itemOffsetAt(int index) {
@ -911,6 +882,152 @@ class SliverReorderableListState extends State<SliverReorderableList> with Ticke
}
}
/// An auto scroller that scrolls the [scrollable] if a drag gesture drag close
/// to its edge.
///
/// The scroll velocity is controlled by the [velocityScalar]:
///
/// velocity = <distance of overscroll> * [velocityScalar].
class _EdgeDraggingAutoScroller {
/// Creates a auto scroller that scrolls the [scrollable].
_EdgeDraggingAutoScroller(this.scrollable, {this.onScrollViewScrolled, this.velocityScalar = _kDefaultAutoScrollVelocityScalar});
// An eyeball value
static const double _kDefaultAutoScrollVelocityScalar = 7;
/// The [Scrollable] this auto scroller is scrolling.
final ScrollableState scrollable;
/// Called when a scroll view is scrolled.
///
/// The scroll view may be scrolled multiple times in a roll until the drag
/// target no longer triggers the auto scroll. This callback will be called
/// in between each scroll.
final VoidCallback? onScrollViewScrolled;
/// The velocity scalar per pixel over scroll.
///
/// How the velocity scale with the over scroll distance. The auto scroll
/// velocity = <distance of overscroll> * velocityScalar.
final double velocityScalar;
late Rect _dragTargetRelatedToScrollOrigin;
/// Whether the auto scroll is in progress.
bool get scrolling => _scrolling;
bool _scrolling = false;
double _offsetExtent(Offset offset, Axis scrollDirection) {
switch (scrollDirection) {
case Axis.horizontal:
return offset.dx;
case Axis.vertical:
return offset.dy;
}
}
double _sizeExtent(Size size, Axis scrollDirection) {
switch (scrollDirection) {
case Axis.horizontal:
return size.width;
case Axis.vertical:
return size.height;
}
}
AxisDirection get _axisDirection => scrollable.axisDirection;
Axis get _scrollDirection => axisDirectionToAxis(_axisDirection);
/// Starts the auto scroll if the [dragTarget] is close to the edge.
///
/// The scroll starts to scroll the [scrollable] if the target rect is close
/// to the edge of the [scrollable]; otherwise, it remains stationary.
///
/// If the scrollable is already scrolling, calling this method updates the
/// previous dragTarget to the new value and continue scrolling if necessary.
void startAutoScrollIfNecessary(Rect dragTarget) {
final Offset deltaToOrigin = _getDeltaToScrollOrigin(scrollable);
_dragTargetRelatedToScrollOrigin = dragTarget.translate(deltaToOrigin.dx, deltaToOrigin.dy);
if (_scrolling) {
// The change will be picked up in the next scroll.
return;
}
if (!_scrolling)
_scroll();
}
/// Stop any ongoing auto scrolling.
void stopAutoScroll() {
_scrolling = false;
}
Future<void> _scroll() async {
final RenderBox scrollRenderBox = scrollable.context.findRenderObject()! as RenderBox;
final Rect globalRect = MatrixUtils.transformRect(
scrollRenderBox.getTransformTo(null),
Rect.fromLTWH(0, 0, scrollRenderBox.size.width, scrollRenderBox.size.height)
);
_scrolling = true;
double? newOffset;
const double overDragMax = 20.0;
final Offset deltaToOrigin = _getDeltaToScrollOrigin(scrollable);
final Offset viewportOrigin = globalRect.topLeft.translate(deltaToOrigin.dx, deltaToOrigin.dy);
final double viewportStart = _offsetExtent(viewportOrigin, _scrollDirection);
final double viewportEnd = viewportStart + _sizeExtent(globalRect.size, _scrollDirection);
final double proxyStart = _offsetExtent(_dragTargetRelatedToScrollOrigin.topLeft, _scrollDirection);
final double proxyEnd = _offsetExtent(_dragTargetRelatedToScrollOrigin.bottomRight, _scrollDirection);
late double overDrag;
if (_axisDirection == AxisDirection.up || _axisDirection == AxisDirection.left) {
if (proxyEnd > viewportEnd && scrollable.position.pixels > scrollable.position.minScrollExtent) {
overDrag = math.max(proxyEnd - viewportEnd, overDragMax);
newOffset = math.max(scrollable.position.minScrollExtent, scrollable.position.pixels - overDrag);
} else if (proxyStart < viewportStart && scrollable.position.pixels < scrollable.position.maxScrollExtent) {
overDrag = math.max(viewportStart - proxyStart, overDragMax);
newOffset = math.min(scrollable.position.maxScrollExtent, scrollable.position.pixels + overDrag);
}
} else {
if (proxyStart < viewportStart && scrollable.position.pixels > scrollable.position.minScrollExtent) {
overDrag = math.max(viewportStart - proxyStart, overDragMax);
newOffset = math.max(scrollable.position.minScrollExtent, scrollable.position.pixels - overDrag);
} else if (proxyEnd > viewportEnd && scrollable.position.pixels < scrollable.position.maxScrollExtent) {
overDrag = math.max(proxyEnd - viewportEnd, overDragMax);
newOffset = math.min(scrollable.position.maxScrollExtent, scrollable.position.pixels + overDrag);
}
}
if (newOffset == null || (newOffset - scrollable.position.pixels).abs() < 1.0) {
// Drag should not trigger scroll.
_scrolling = false;
return;
}
final Duration duration = Duration(milliseconds: (1000 / velocityScalar).round());
await scrollable.position.animateTo(
newOffset,
duration: duration,
curve: Curves.linear,
);
if (onScrollViewScrolled != null)
onScrollViewScrolled!();
if (_scrolling)
await _scroll();
}
}
Offset _getDeltaToScrollOrigin(ScrollableState scrollableState) {
switch (scrollableState.axisDirection) {
case AxisDirection.down:
return Offset(0, scrollableState.position.pixels);
case AxisDirection.up:
return Offset(0, -scrollableState.position.pixels);
case AxisDirection.left:
return Offset(-scrollableState.position.pixels, 0);
case AxisDirection.right:
return Offset(scrollableState.position.pixels, 0);
}
}
class _ReorderableItem extends StatefulWidget {
const _ReorderableItem({
required Key key,
@ -1116,9 +1233,9 @@ class ReorderableDragStartListener extends StatelessWidget {
void _startDragging(BuildContext context, PointerDownEvent event) {
final SliverReorderableListState? list = SliverReorderableList.maybeOf(context);
list?.startItemDragReorder(
index: index,
event: event,
recognizer: createRecognizer(),
index: index,
event: event,
recognizer: createRecognizer(),
);
}
}