我想知道如何更改popUpMenu
的原点,无论项目数如何,都直接在底部应用栏上方启动弹出窗口。与屏幕的右端对齐。类似于(例如)
Positioned(right: 0, bottom: bottomAppBarHeight)
这是我要实现的popUpMenu
设计位置的屏幕截图:
这里是popUpMenu
当前位置的屏幕截图(请忽略其他设计差异,因为它们无关紧要):
使用的代码如下:
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
并将其偏移设置为底部应用栏的高度来实现。
这里是示例代码:
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)
],
),
)
自定义弹出菜单磁贴的代码如下,即使它与问题无关:
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),
),
],
);
}
}