如何设置Flutter showMenu起点 [英] How to set Flutter showMenu starting point

问题描述

我想知道如何更改 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起点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！