问题描述
我想知道如何更改 popUpMenu
的原点,在底部应用栏的正上方启动弹出窗口,无论项目数如何.与屏幕的右端对齐.类似的东西(例如)
I would like to know how to change the origin point of the popUpMenu
, start the popup right above the bottom app bar, no matter the count of items. Aligned to the right end of the screen. Something that is like (for example)
Positioned(right: 0, bottom: bottomAppBarHeight)
下面是我想要实现的popUpMenu
的设计布局截图:
Here is a screenshot of the design placement of popUpMenu
I want to achieve:
这是 popUpMenu
当前位置的截图(请忽略其他设计差异,因为它们无关紧要):
Here is a screenshot of the current placement of the popUpMenu
(Please ignore other design differences as they are irrelevant):
使用的代码如下:
onPressed: () {
final RelativeRect position =
buttonMenuPosition(context);
showMenu(context: context, position: position, items: [
PopupMenuItem<int>(
value: 0,
child: Text('Working a lot harder'),
),
PopupMenuItem<int>(
value: 1,
child: Text('Working a lot less'),
),
PopupMenuItem<int>(
value: 1,
child: Text('Working a lot smarter'),
),
]);
},
buttonMenuPosition
功能代码:
RelativeRect buttonMenuPosition(BuildContext context) {
final bool isEnglish =
LocalizedApp.of(context).delegate.currentLocale.languageCode == 'en';
final RenderBox bar = context.findRenderObject() as RenderBox;
final RenderBox overlay =
Overlay.of(context).context.findRenderObject() as RenderBox;
const Offset offset = Offset.zero;
final RelativeRect position = RelativeRect.fromRect(
Rect.fromPoints(
bar.localToGlobal(
isEnglish
? bar.size.centerRight(offset)
: bar.size.centerLeft(offset),
ancestor: overlay),
bar.localToGlobal(
isEnglish
? bar.size.centerRight(offset)
: bar.size.centerLeft(offset),
ancestor: overlay),
),
offset & overlay.size,
);
return position;
}
更改偏移无效.
推荐答案
好吧,我无法使用 showMenu
函数来实现它,但是使用 PopUpMenuButton 可以实现它
并将其偏移量设置为底部应用栏的高度.
Well, I couldn't achieve it with the showMenu
function, but it was achievable by using a PopUpMenuButton
and setting its offset to the height of the bottom app bar.
这是一个示例代码:
PopupMenuButton<int>(
offset: const Offset(0, -380),
itemBuilder: (context) => [
PopupMenuItem<int>(
value: 0,
child: PopUpMenuTile(
isActive: true,
icon: Icons.fiber_manual_record,
title:'Stop recording',
)),
PopupMenuItem<int>(
value: 1,
child: PopUpMenuTile(
isActive: true,
icon: Icons.pause,
title: 'Pause recording',
)),
PopupMenuItem<int>(
value: 2,
child: PopUpMenuTile(
icon: Icons.group,
title: 'Members',
)),
PopupMenuItem<int>(
value: 3,
child: PopUpMenuTile(
icon: Icons.person_add,
title: 'Invite members',
)),
],
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.more_vert,
color: Colors.white60),
Text(translate('more'),
style: Theme.of(context)
.textTheme
.caption)
],
),
)
自定义弹出菜单磁贴的代码如下,即使它与问题无关:
The code to the custom pop up menu tile is as follows even though it is not relevant to the question:
class PopUpMenuTile extends StatelessWidget {
const PopUpMenuTile(
{Key key,
@required this.icon,
@required this.title,
this.isActive = false})
: super(key: key);
final IconData icon;
final String title;
final bool isActive;
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(icon,
color: isActive
? Theme.of(context).accentColor
: Theme.of(context).primaryColor),
const SizedBox(
width: 8,
),
Text(
title,
style: Theme.of(context).textTheme.headline4.copyWith(
color: isActive
? Theme.of(context).accentColor
: Theme.of(context).primaryColor),
),
],
);
}
}
这篇关于如何设置 Flutter showMenu 起点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!