flutter - 如何设置 Flutter showMenu 起点

Question

我想知道如何改变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;
  }

更改偏移量不起作用。

Answer 1

好吧，我无法通过 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),
        ),
      ],
    );
  }
}