flutter 定位PopupMenuButton的菜单

7fyelxc5 于 2023-01-02 发布在 Flutter

关注(0)|答案(3)|浏览(198)

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

更新后，包括代码。我已经尝试发挥周围的偏移量属性，但我无法找出一种方法来正确计算大小的弹出菜单一旦按钮被按下。

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)),
              ),
            ],
          ),
        ))
  ],
);

flutter

来源：https://stackoverflow.com/questions/67886623/positioning-the-menu-of-popupmenubutton

3条答案

按热度按时间

rt4zxlrg1#

嗯，我相信这里只有一件事能帮到你，那就是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;

希望这对你有帮助。

赞(0）回复(0）举报 2023-01-02

snvhrwxg2#

尝试共享特定代码以获得更准确的答案。
但是我认为这可以通过使用[align]小部件来解决
或者尝试使用[中心]小工具
如有可能，尝试使用衬垫或主轴对准或十字轴对准或安全区域。
回复哪种方法适合您或您是如何解决问题的。

赞(0）回复(0）举报 2023-01-02

9rygscc13#

reusable widget PopUpMenuButton in flutter very easy
对每个人都很有帮助

class PopupMenu {
void Function(String)? onSelect;
PopupMenu({required this.stringList,required this.onSelect,});
final List<String> stringList;

PopupMenuButton<String> createPopup() {
return PopupMenuButton<String>(
elevation: 0,
icon: const Icon(Icons.keyboard_arrow_down),
onSelected: onSelect,
itemBuilder: (context) => stringList!.map((item) => PopupMenuItem<String> 
(
value: item,
child: Text(item),
)).toList(),
);
}
}

赞(0）回复(0）举报 2023-01-02

我来回答

flutter 定位PopupMenuButton的菜单

3条答案

相关问题

热门标签

最新问答