flutter - 如何设置 Flutter showMenu 起点
问题描述
我想知道如何更改 的原点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
功能实现它,但可以通过使用 aPopUpMenuButton
并将其偏移量设置为底部应用栏的高度来实现。
这是一个示例代码:
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),
),
],
);
}
}
推荐阅读
- alexa - Alexa 自定义插槽中的“任何”类型的行为
- visual-studio-code - 如何让 flake8 可靠地忽略 VS Code 中的规则?
- php - 如何使用 Laravel 操作云服务器文件?
- c# - Windows UWP BluetoothLEDevice 重新连接
- python - 使用 python 异步运行 docker 容器
- php - 在 CURL 请求和重定向 php 之后登录
- talend - 使用 shell 可执行文件运行特定的 talend 组件
- javascript - React - 无法从 Redux 获取数据
- php - php artisan 在加载另一个页面或提交表单时服务缓慢
- javascript - 在 react-native 移动应用程序中编写环境条件的最佳方法?