Mac Page Up / Page Down in text fields (#105497)

Adds support for Mac/iOS's behavior of scrolling (but not moving the cursor) when using page up/down in a text field.
This commit is contained in:
Justin McCandless 2022-11-07 10:43:09 -08:00 committed by GitHub
parent 497a52809d
commit 7e36cf17e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 300 additions and 18 deletions

View file

@ -1767,7 +1767,10 @@ class _WidgetsAppState extends State<WidgetsApp> with WidgetsBindingObserver {
// fall through to the defaultShortcuts.
child: DefaultTextEditingShortcuts(
child: Actions(
actions: widget.actions ?? WidgetsApp.defaultActions,
actions: widget.actions ?? <Type, Action<Intent>>{
...WidgetsApp.defaultActions,
ScrollIntent: Action<ScrollIntent>.overridable(context: context, defaultAction: ScrollAction()),
},
child: FocusTraversalGroup(
policy: ReadingOrderTraversalPolicy(),
child: TapRegionSurface(

View file

@ -3,11 +3,13 @@
// found in the LICENSE file.
import 'package:flutter/foundation.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/services.dart';
import 'actions.dart';
import 'focus_traversal.dart';
import 'framework.dart';
import 'scrollable.dart';
import 'shortcuts.dart';
import 'text_editing_intents.dart';
@ -157,8 +159,8 @@ class DefaultTextEditingShortcuts extends StatelessWidget {
/// {@macro flutter.widgets.ProxyWidget.child}
final Widget child;
// These are shortcuts are shared between most platforms except macOS for it
// uses different modifier keys as the line/word modifier.
// These shortcuts are shared between all platforms except Apple platforms,
// because they use different modifier keys as the line/word modifier.
static final Map<ShortcutActivator, Intent> _commonShortcuts = <ShortcutActivator, Intent>{
// Delete Shortcuts.
for (final bool pressShift in const <bool>[true, false])
@ -315,6 +317,8 @@ class DefaultTextEditingShortcuts extends StatelessWidget {
const SingleActivator(LogicalKeyboardKey.home, shift: true): const ExpandSelectionToDocumentBoundaryIntent(forward: false),
const SingleActivator(LogicalKeyboardKey.end, shift: true): const ExpandSelectionToDocumentBoundaryIntent(forward: true),
const SingleActivator(LogicalKeyboardKey.pageUp): const ScrollIntent(direction: AxisDirection.up, type: ScrollIncrementType.page),
const SingleActivator(LogicalKeyboardKey.pageDown): const ScrollIntent(direction: AxisDirection.down, type: ScrollIncrementType.page),
const SingleActivator(LogicalKeyboardKey.pageUp, shift: true): const ExtendSelectionVerticallyToAdjacentPageIntent(forward: false, collapseSelection: false),
const SingleActivator(LogicalKeyboardKey.pageDown, shift: true): const ExtendSelectionVerticallyToAdjacentPageIntent(forward: true, collapseSelection: false),
@ -553,9 +557,8 @@ Intent? intentForMacOSSelector(String selectorName) {
'scrollToBeginningOfDocument:': ScrollToDocumentBoundaryIntent(forward: false),
'scrollToEndOfDocument:': ScrollToDocumentBoundaryIntent(forward: true),
// TODO(knopp): Page Up/Down intents are missing (https://github.com/flutter/flutter/pull/105497)
'scrollPageUp:': ScrollToDocumentBoundaryIntent(forward: false),
'scrollPageDown:': ScrollToDocumentBoundaryIntent(forward: true),
'scrollPageUp:': ScrollIntent(direction: AxisDirection.up, type: ScrollIncrementType.page),
'scrollPageDown:': ScrollIntent(direction: AxisDirection.down, type: ScrollIncrementType.page),
'pageUpAndModifySelection:': ExtendSelectionVerticallyToAdjacentPageIntent(forward: false, collapseSelection: false),
'pageDownAndModifySelection:': ExtendSelectionVerticallyToAdjacentPageIntent(forward: true, collapseSelection: false),

View file

@ -33,6 +33,7 @@ import 'media_query.dart';
import 'scroll_configuration.dart';
import 'scroll_controller.dart';
import 'scroll_physics.dart';
import 'scroll_position.dart';
import 'scrollable.dart';
import 'shortcuts.dart';
import 'spell_check.dart';
@ -1907,6 +1908,7 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
TextSelectionOverlay? _selectionOverlay;
final GlobalKey _scrollableKey = GlobalKey();
ScrollController? _internalScrollController;
ScrollController get _scrollController => widget.scrollController ?? (_internalScrollController ??= ScrollController());
@ -3953,6 +3955,96 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
}
}
/// Handles [ScrollIntent] by scrolling the [Scrollable] inside of
/// [EditableText].
void _scroll(ScrollIntent intent) {
if (intent.type != ScrollIncrementType.page) {
return;
}
final ScrollPosition position = _scrollController.position;
if (widget.maxLines == 1) {
_scrollController.jumpTo(position.maxScrollExtent);
return;
}
// If the field isn't scrollable, do nothing. For example, when the lines of
// text is less than maxLines, the field has nothing to scroll.
if (position.maxScrollExtent == 0.0 && position.minScrollExtent == 0.0) {
return;
}
final ScrollableState? state = _scrollableKey.currentState as ScrollableState?;
final double increment = ScrollAction.getDirectionalIncrement(state!, intent);
final double destination = clampDouble(
position.pixels + increment,
position.minScrollExtent,
position.maxScrollExtent,
);
if (destination == position.pixels) {
return;
}
_scrollController.jumpTo(destination);
}
/// Extend the selection down by page if the `forward` parameter is true, or
/// up by page otherwise.
void _extendSelectionByPage(ExtendSelectionByPageIntent intent) {
if (widget.maxLines == 1) {
return;
}
final TextSelection nextSelection;
final Rect extentRect = renderEditable.getLocalRectForCaret(
_value.selection.extent,
);
final ScrollableState? state = _scrollableKey.currentState as ScrollableState?;
final double increment = ScrollAction.getDirectionalIncrement(
state!,
ScrollIntent(
direction: intent.forward ? AxisDirection.down : AxisDirection.up,
type: ScrollIncrementType.page,
),
);
final ScrollPosition position = _scrollController.position;
if (intent.forward) {
if (_value.selection.extentOffset >= _value.text.length) {
return;
}
final Offset nextExtentOffset =
Offset(extentRect.left, extentRect.top + increment);
final double height = position.maxScrollExtent + renderEditable.size.height;
final TextPosition nextExtent = nextExtentOffset.dy + position.pixels >= height
? TextPosition(offset: _value.text.length)
: renderEditable.getPositionForPoint(
renderEditable.localToGlobal(nextExtentOffset),
);
nextSelection = _value.selection.copyWith(
extentOffset: nextExtent.offset,
);
} else {
if (_value.selection.extentOffset <= 0) {
return;
}
final Offset nextExtentOffset =
Offset(extentRect.left, extentRect.top + increment);
final TextPosition nextExtent = nextExtentOffset.dy + position.pixels <= 0
? const TextPosition(offset: 0)
: renderEditable.getPositionForPoint(
renderEditable.localToGlobal(nextExtentOffset),
);
nextSelection = _value.selection.copyWith(
extentOffset: nextExtent.offset,
);
}
bringIntoView(nextSelection.extent);
userUpdateTextEditingValue(
_value.copyWith(selection: nextSelection),
SelectionChangedCause.keyboard,
);
}
void _updateSelection(UpdateSelectionIntent intent) {
bringIntoView(intent.newSelection.extent);
userUpdateTextEditingValue(
@ -4058,6 +4150,7 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
// Extend/Move Selection
ExtendSelectionByCharacterIntent: _makeOverridable(_UpdateTextSelectionAction<ExtendSelectionByCharacterIntent>(this, false, _characterBoundary)),
ExtendSelectionByPageIntent: _makeOverridable(CallbackAction<ExtendSelectionByPageIntent>(onInvoke: _extendSelectionByPage)),
ExtendSelectionToNextWordBoundaryIntent: _makeOverridable(_UpdateTextSelectionAction<ExtendSelectionToNextWordBoundaryIntent>(this, true, _nextWordBoundary)),
ExtendSelectionToLineBreakIntent: _makeOverridable(_UpdateTextSelectionAction<ExtendSelectionToLineBreakIntent>(this, true, _linebreak)),
ExpandSelectionToLineBreakIntent: _makeOverridable(CallbackAction<ExpandSelectionToLineBreakIntent>(onInvoke: _expandSelectionToLinebreak)),
@ -4067,6 +4160,7 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
ExtendSelectionToDocumentBoundaryIntent: _makeOverridable(_UpdateTextSelectionAction<ExtendSelectionToDocumentBoundaryIntent>(this, true, _documentBoundary)),
ExtendSelectionToNextWordBoundaryOrCaretLocationIntent: _makeOverridable(_ExtendSelectionOrCaretPositionAction(this, _nextWordBoundary)),
ScrollToDocumentBoundaryIntent: _makeOverridable(CallbackAction<ScrollToDocumentBoundaryIntent>(onInvoke: _scrollToDocumentBoundary)),
ScrollIntent: CallbackAction<ScrollIntent>(onInvoke: _scroll),
// Copy Paste
SelectAllTextIntent: _makeOverridable(_SelectAllAction(this)),
@ -4099,6 +4193,7 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
includeSemantics: false,
debugLabel: kReleaseMode ? null : 'EditableText',
child: Scrollable(
key: _scrollableKey,
excludeFromSemantics: true,
axisDirection: _isMultiline ? AxisDirection.down : AxisDirection.right,
controller: _scrollController,

View file

@ -1789,14 +1789,14 @@ class ScrollAction extends Action<ScrollIntent> {
return false;
}
// Returns the scroll increment for a single scroll request, for use when
// scrolling using a hardware keyboard.
//
// Must not be called when the position is null, or when any of the position
// metrics (pixels, viewportDimension, maxScrollExtent, minScrollExtent) are
// null. The type and state arguments must not be null, and the widget must
// have already been laid out so that the position fields are valid.
double _calculateScrollIncrement(ScrollableState state, { ScrollIncrementType type = ScrollIncrementType.line }) {
/// Returns the scroll increment for a single scroll request, for use when
/// scrolling using a hardware keyboard.
///
/// Must not be called when the position is null, or when any of the position
/// metrics (pixels, viewportDimension, maxScrollExtent, minScrollExtent) are
/// null. The type and state arguments must not be null, and the widget must
/// have already been laid out so that the position fields are valid.
static double _calculateScrollIncrement(ScrollableState state, { ScrollIncrementType type = ScrollIncrementType.line }) {
assert(type != null);
assert(state.position != null);
assert(state.position.hasPixels);
@ -1820,9 +1820,9 @@ class ScrollAction extends Action<ScrollIntent> {
}
}
// Find out how much of an increment to move by, taking the different
// directions into account.
double _getIncrement(ScrollableState state, ScrollIntent intent) {
/// Find out how much of an increment to move by, taking the different
/// directions into account.
static double getDirectionalIncrement(ScrollableState state, ScrollIntent intent) {
final double increment = _calculateScrollIncrement(state, type: intent.type);
switch (intent.direction) {
case AxisDirection.down:
@ -1912,7 +1912,7 @@ class ScrollAction extends Action<ScrollIntent> {
if (state!._physics != null && !state._physics!.shouldAcceptUserOffset(state.position)) {
return;
}
final double increment = _getIncrement(state, intent);
final double increment = getDirectionalIncrement(state, intent);
if (increment == 0.0) {
return;
}

View file

@ -245,6 +245,15 @@ class ScrollToDocumentBoundaryIntent extends DirectionalTextEditingIntent {
}) : super(forward);
}
/// Scrolls up or down by page depending on the [forward] parameter.
/// Extends the selection up or down by page based on the [forward] parameter.
class ExtendSelectionByPageIntent extends DirectionalTextEditingIntent {
/// Creates a [ExtendSelectionByPageIntent].
const ExtendSelectionByPageIntent({
required bool forward,
}) : super(forward);
}
/// An [Intent] to select everything in the field.
class SelectAllTextIntent extends Intent {
/// Creates an instance of [SelectAllTextIntent].

View file

@ -8102,6 +8102,178 @@ void main() {
variant: const TargetPlatformVariant(<TargetPlatform>{ TargetPlatform.windows })
);
testWidgets('pageup/pagedown keys on Apple platforms', (WidgetTester tester) async {
final TextEditingController controller = TextEditingController(text: testText);
controller.selection = const TextSelection(
baseOffset: 0,
extentOffset: 0,
affinity: TextAffinity.upstream,
);
final ScrollController scrollController = ScrollController();
const int lines = 2;
await tester.pumpWidget(MaterialApp(
home: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: 400,
child: EditableText(
minLines: lines,
maxLines: lines,
controller: controller,
scrollController: scrollController,
showSelectionHandles: true,
autofocus: true,
focusNode: FocusNode(),
style: Typography.material2018().black.subtitle1!,
cursorColor: Colors.blue,
backgroundCursorColor: Colors.grey,
selectionControls: materialTextSelectionControls,
keyboardType: TextInputType.text,
textAlign: TextAlign.right,
),
),
),
));
await tester.pump(); // Wait for autofocus to take effect.
expect(controller.value.selection.isCollapsed, isTrue);
expect(controller.value.selection.baseOffset, 0);
expect(scrollController.position.pixels, 0.0);
final double lineHeight = findRenderEditable(tester).preferredLineHeight;
expect(scrollController.position.viewportDimension, lineHeight * lines);
// Page Up does nothing at the top.
await sendKeys(
tester,
<LogicalKeyboardKey>[
LogicalKeyboardKey.pageUp,
],
targetPlatform: defaultTargetPlatform,
);
expect(scrollController.position.pixels, 0.0);
// Page Down scrolls proportionally to the height of the viewport.
await sendKeys(
tester,
<LogicalKeyboardKey>[
LogicalKeyboardKey.pageDown,
],
targetPlatform: defaultTargetPlatform,
);
expect(scrollController.position.pixels, lineHeight * lines * 0.8);
// Another Page Down reaches the bottom.
await sendKeys(
tester,
<LogicalKeyboardKey>[
LogicalKeyboardKey.pageDown,
],
targetPlatform: defaultTargetPlatform,
);
expect(scrollController.position.pixels, lineHeight * lines);
// Page Up now scrolls back up proportionally to the height of the viewport.
await sendKeys(
tester,
<LogicalKeyboardKey>[
LogicalKeyboardKey.pageUp,
],
targetPlatform: defaultTargetPlatform,
);
expect(scrollController.position.pixels, lineHeight * lines - lineHeight * lines * 0.8);
// Another Page Up reaches the top.
await sendKeys(
tester,
<LogicalKeyboardKey>[
LogicalKeyboardKey.pageUp,
],
targetPlatform: defaultTargetPlatform,
);
expect(scrollController.position.pixels, 0.0);
},
skip: kIsWeb, // [intended] on web these keys are handled by the browser.
variant: const TargetPlatformVariant(<TargetPlatform>{ TargetPlatform.iOS, TargetPlatform.macOS }),
);
testWidgets('pageup/pagedown keys in a one line field on Apple platforms', (WidgetTester tester) async {
final TextEditingController controller = TextEditingController(text: testText);
controller.selection = const TextSelection(
baseOffset: 0,
extentOffset: 0,
affinity: TextAffinity.upstream,
);
final ScrollController scrollController = ScrollController();
await tester.pumpWidget(MaterialApp(
home: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: 400,
child: EditableText(
minLines: 1,
controller: controller,
scrollController: scrollController,
showSelectionHandles: true,
autofocus: true,
focusNode: FocusNode(),
style: Typography.material2018().black.subtitle1!,
cursorColor: Colors.blue,
backgroundCursorColor: Colors.grey,
selectionControls: materialTextSelectionControls,
keyboardType: TextInputType.text,
textAlign: TextAlign.right,
),
),
),
));
await tester.pump(); // Wait for autofocus to take effect.
expect(controller.value.selection.isCollapsed, isTrue);
expect(controller.value.selection.baseOffset, 0);
expect(scrollController.position.pixels, 0.0);
// Page Up scrolls to the end.
await sendKeys(
tester,
<LogicalKeyboardKey>[
LogicalKeyboardKey.pageUp,
],
targetPlatform: defaultTargetPlatform,
);
expect(scrollController.position.pixels, scrollController.position.maxScrollExtent);
expect(controller.value.selection.isCollapsed, isTrue);
expect(controller.value.selection.baseOffset, 0);
// Return scroll to the start.
await sendKeys(
tester,
<LogicalKeyboardKey>[
LogicalKeyboardKey.home,
],
targetPlatform: defaultTargetPlatform,
);
expect(scrollController.position.pixels, 0.0);
expect(controller.value.selection.isCollapsed, isTrue);
expect(controller.value.selection.baseOffset, 0);
// Page Down also scrolls to the end.
await sendKeys(
tester,
<LogicalKeyboardKey>[
LogicalKeyboardKey.pageDown,
],
targetPlatform: defaultTargetPlatform,
);
expect(scrollController.position.pixels, scrollController.position.maxScrollExtent);
expect(controller.value.selection.isCollapsed, isTrue);
expect(controller.value.selection.baseOffset, 0);
},
skip: kIsWeb, // [intended] on web these keys are handled by the browser.
variant: const TargetPlatformVariant(<TargetPlatform>{ TargetPlatform.iOS, TargetPlatform.macOS }),
);
// Regression test for https://github.com/flutter/flutter/issues/31287
testWidgets('text selection handle visibility', (WidgetTester tester) async {
// Text with two separate words to select.