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: f8a77225f3/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
This commit is contained in:
Qun Cheng 2024-02-08 20:36:24 +00:00 committed by GitHub
parent e64a372d6b
commit cc4abe92fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 77 additions and 14 deletions

View file

@ -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.

View file

@ -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<int>(
itemBuilder: (BuildContext context) {
return List<PopupMenuEntry<int>>.generate(length, (int index) {
return PopupMenuItem<int>(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<int>);
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<RenderBox>(findButton);
final Rect buttonBounds = button.localToGlobal(Offset.zero) & button.size;
final RenderBox listViewport = tester.renderObject<RenderBox>(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('<Rect that overlaps with $other>');
}
@override
bool matches(Object? item, Map<dynamic, dynamic> matchState) => item is Rect && item.overlaps(other);
@override
Description describeMismatch(dynamic item, Description mismatchDescription,
Map<dynamic, dynamic> matchState, bool verbose) {
return mismatchDescription.add('does not overlap');
}
}
class TestApp extends StatelessWidget {