From cc4abe92fbd1eb5ce8ca4cd674226642a73981ce Mon Sep 17 00:00:00 2001 From: Qun Cheng <36861262+QuncCccccc@users.noreply.github.com> Date: Thu, 8 Feb 2024 20:36:24 +0000 Subject: [PATCH] Correct menu position when menu is constrained (#143121) Fixes #142896 The original code below is to always place the selected item above(overlap) the popup button so that the selected item can always be visible: https://github.com/flutter/flutter/blob/f8a77225f360556322934a9a831ffc9c9f3125da/packages/flutter/lib/src/material/popup_menu.dart#L723-L732 But when menu height is constrained and the menu itself is super long, the selected item still assumes there is enough space to push up all the items whose index is smaller than the selected index. As a result, every time when the menu is open, the calculation provides a different result to be the offset for the selected index, and then with a constrained height, the menu looks jumping all over the place based on the different selected index. https://github.com/flutter/flutter/assets/36861262/ad761f95-0ff5-4311-a81d-dac56df879c5 Even though the original calculation is to make the selected item visible when open the menu, the menu doesn't auto scroll and only expands itself as much as possible to show the selected one. In this case, if the screen it too small to show the selected item, we still cannot see it. This can be fixed by using `Scrollable.ensureVisible()`(#143118). So we remove the calculation in this PR and the menu will always show up based on the top left of the anchor(button). https://github.com/flutter/flutter/assets/36861262/03272f26-9440-4ac4-a701-9a0b41776ff9 --- .../flutter/lib/src/material/popup_menu.dart | 17 +---- .../test/material/popup_menu_test.dart | 74 +++++++++++++++++++ 2 files changed, 77 insertions(+), 14 deletions(-) diff --git a/packages/flutter/lib/src/material/popup_menu.dart b/packages/flutter/lib/src/material/popup_menu.dart index 3e9a3a17685..0159e40adb5 100644 --- a/packages/flutter/lib/src/material/popup_menu.dart +++ b/packages/flutter/lib/src/material/popup_menu.dart @@ -715,23 +715,12 @@ class _PopupMenuRouteLayout extends SingleChildLayoutDelegate { @override Offset getPositionForChild(Size size, Size childSize) { + final double y = position.top; + + // Find the ideal horizontal position. // size: The size of the overlay. // childSize: The size of the menu, when fully open, as determined by // getConstraintsForChild. - - final double buttonHeight = size.height - position.top - position.bottom; - // Find the ideal vertical position. - double y = position.top; - if (selectedItemIndex != null) { - double selectedItemOffset = _kMenuVerticalPadding; - for (int index = 0; index < selectedItemIndex!; index += 1) { - selectedItemOffset += itemSizes[index]!.height; - } - selectedItemOffset += itemSizes[selectedItemIndex!]!.height / 2; - y = y + buttonHeight / 2.0 - selectedItemOffset; - } - - // Find the ideal horizontal position. double x; if (position.left > position.right) { // Menu button is closer to the right edge, so grow to the left, aligned to the right edge. diff --git a/packages/flutter/test/material/popup_menu_test.dart b/packages/flutter/test/material/popup_menu_test.dart index e462834c917..e8ed919b920 100644 --- a/packages/flutter/test/material/popup_menu_test.dart +++ b/packages/flutter/test/material/popup_menu_test.dart @@ -3955,6 +3955,80 @@ void main() { expect(tester.getSize(find.byType(Material).last), within(distance: 0.1, from: const Size(112.0, 160.0))); }); + + testWidgets('PopupMenuButton properly positions a constrained-size popup', (WidgetTester tester) async { + final Size windowSize = tester.view.physicalSize / tester.view.devicePixelRatio; + const int length = 50; + await tester.pumpWidget( + MaterialApp( + home: Scaffold( + body: Padding( + padding: const EdgeInsets.all(50), + child: Align( + alignment: Alignment.bottomCenter, + child: PopupMenuButton( + itemBuilder: (BuildContext context) { + return List>.generate(length, (int index) { + return PopupMenuItem(value: index, child: Text('item #$index')); + }); + }, + constraints: BoxConstraints(maxHeight: windowSize.height / 3), + popUpAnimationStyle: AnimationStyle.noAnimation, + initialValue: length - 1, + child: const Text('click here'), + ), + ), + ), + ), + ), + ); + await tester.tap(find.text('click here')); + await tester.pump(); + + // Set up finders and verify basic widget structure + final Finder findButton = find.byType(PopupMenuButton); + final Finder findLastItem = find.text('item #49'); + final Finder findListBody = find.byType(ListBody); + final Finder findListViewport = find.ancestor( + of: findListBody, + matching: find.byType(SingleChildScrollView), + ); + expect(findButton, findsOne); + expect(findLastItem, findsOne); + expect(findListBody, findsOne); + expect(findListViewport, findsOne); + + // The button and the list viewport should overlap + final RenderBox button = tester.renderObject(findButton); + final Rect buttonBounds = button.localToGlobal(Offset.zero) & button.size; + final RenderBox listViewport = tester.renderObject(findListViewport); + final Rect listViewportBounds = listViewport.localToGlobal(Offset.zero) & listViewport.size; + expect(listViewportBounds.topLeft.dy, lessThanOrEqualTo(windowSize.height)); + expect(listViewportBounds.bottomRight.dy, lessThanOrEqualTo(windowSize.height)); + expect(listViewportBounds, overlaps(buttonBounds)); + }); +} + +Matcher overlaps(Rect other) => OverlapsMatcher(other); + +class OverlapsMatcher extends Matcher { + OverlapsMatcher(this.other); + + final Rect other; + + @override + Description describe(Description description) { + return description.add(''); + } + + @override + bool matches(Object? item, Map matchState) => item is Rect && item.overlaps(other); + + @override + Description describeMismatch(dynamic item, Description mismatchDescription, + Map matchState, bool verbose) { + return mismatchDescription.add('does not overlap'); + } } class TestApp extends StatelessWidget {