flutter - 定位 PopupMenuButton 的菜单

Question

我在 flutter 移动应用程序中使用 PopupMenuButton。我想定位菜单，使调用按钮根据屏幕居中对齐。以下是它目前在 iPhone 12 Max Pro 和 iPhone 8 上的显示方式。如何获得一致的行为？

更新帖子以包含代码。我曾尝试使用 offset 属性，但是我无法找到一种方法来在按下按钮后正确计算弹出菜单的大小。

return PopupMenuButton(
  elevation: 50,
  color: Theme.of(context).colorScheme.button,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(25),
  ),
  child: SizedBox(
    width: 162,
    height: 49,
    child: ClipRRect(
      borderRadius: BorderRadius.circular(25),
      child: Container(
        color: Theme.of(context).colorScheme.button,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
          child: Row(
            children: [
              FaIcon(
                FontAwesomeIcons.lightPlus,
                color: Colors.white,
                size: 16,
              ),
              Spacer(),
              Text("New", style: Theme.of(context).textTheme.whiteLabels),
              Spacer(),
              FaIcon(
                FontAwesomeIcons.lightAngleUp,
                color: Colors.white,
                size: 20,
              ),
            ],
          ),
        ),
      ),
    ),
  ),
  itemBuilder: (context) => [
    PopupMenuItem(
        value: 1,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
          child: Row(
            children: [
              FaIcon(
                FontAwesomeIcons.lightEdit,
                color: Colors.white,
                size: 20,
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                child: Text('Type Text', style: Theme.of(context).textTheme.whiteLabels.copyWith(fontSize: 16)),
              ),
            ],
          ),
        )),
    PopupMenuItem(
        value: 2,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
          child: Row(
            children: [
              FaIcon(FontAwesomeIcons.lightMicrophone, color: Colors.white, size: 20),
              Padding(
                padding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                child: Text(' Record Voice', style: Theme.of(context).textTheme.whiteLabels.copyWith(fontSize: 16)),
              ),
            ],
          ),
        )),
    PopupMenuItem(
        value: 3,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
          child: Row(
            children: [
              FaIcon(FontAwesomeIcons.lightCamera, color: Colors.white, size: 20),
              Padding(
                padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
                child: Text(' Take a Picture', style: Theme.of(context).textTheme.whiteLabels.copyWith(fontSize: 16)),
              ),
            ],
          ),
        )),
    PopupMenuItem(
        value: 4,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
          child: Row(
            children: [
              FaIcon(FontAwesomeIcons.lightVideo, color: Colors.white, size: 20),
              Padding(
                padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
                child: Text(' Record a Video', style: Theme.of(context).textTheme.whiteLabels.copyWith(fontSize: 16)),
              ),
            ],
          ),
        ))
  ],
);

Answer 1

嗯，我相信只有一件事能帮到你，那就是弹出菜单的偏移属性。

PopupMenuButton<int>(
  itemBuilder: (context) => [
    PopupMenuItem(
      value: 1,
      child: Text("Blashhhh", style: TextStyle(fontSize: 16.0)),
    ),
    PopupMenuItem(
      value: 2,
      child: Text("Blahhh 2", style: TextStyle(fontSize: 16.0)),
    ),
  ],
  initialValue: 0,
  onCanceled: () {
    print("You have canceled the menu selection.");
  },
  onSelected: (value) {
    switch(value){
      case 1:
        //do something
        break;
      case 2:
        //do something
        break;
      default: { print("Invalid choice"); }
      break;
    }
  },
  child: Container(
      padding: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 13.0, right: 13.0),
      alignment: Alignment.centerLeft,
      color: Colors.white,
      child: Text("Share it", style: TextStyle(fontSize: 16.0))
  ),
  offset: Offset(0, -90),
),

现在如您所见，我已将偏移量设置为 -90，但您需要根据定义一半的屏幕宽度来计算屏幕宽度，并将菜单放置在该输出周围并进行检查。

double width = MediaQuery. of(context). size. width;

希望这对您有所帮助。