定位PopupMenuButton的菜单

Question

我在flutter移动应用中使用PopupMenuButton。我想要定位菜单，使呼叫按钮根据屏幕居中对齐。下面是它目前在iPhone 12 Max专业版和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

尝试分享特定的代码，以获得更准确的答案。

但是，我认为这可以通过使用align小部件来解决

或者尝试使用中心小部件

如果可能，尝试使用填充或主轴对齐或交叉对齐或安全区域。

回复哪种方法对你有效，或者你是如何解决问题的。

Answer 2

嗯，我相信这里只有一件事能帮到你，那就是popup-menu的offset属性。

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;

希望这能帮到你。