mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
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:
parent
e64a372d6b
commit
cc4abe92fb
@ -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.
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user