Flutter UI点击图标后创建功能菜单更多

soat7uwm  于 2023-01-14  发布在  Flutter
关注(0)|答案(3)|浏览(139)

光环,
首先,我想向您展示我当前的UI:

下面是红圈函数的代码:

InkWell(
  onTap: null,
  child: Icon(Icons.more_horiz,
    size: 18,
    color: Color.fromRGBO(0, 0, 0, 0.25),
  ),
),

我需要的操作是在单击图标后显示这样的弹出菜单,例如:

我需要创建编辑和删除功能导航到另一个页面,并需要知道如何控制菜单的位置。
我已经在www.example.com上查过pub.dev,但是它没有解决我的问题。谁能给予我一个建议吗?

nfs0ujit

nfs0ujit1#

请尝试以下代码:套餐在这里:* * 一个

PullDownButton(
  itemBuilder: (context) => [
    PullDownMenuItem(
      title: 'Menu item',
      onTap: () => action(),
    ),
    const PullDownMenuDivider(),
    PullDownMenuItem(
      title: 'Menu item 2',
      onTap: () => action2(),
    ),
  ],
  position: PullDownMenuPosition.under,
  buttonBuilder: (context, showMenu) => CupertinoButton(
    onPressed: showMenu,
    padding: EdgeInsets.zero,
    child: const Icon(CupertinoIcons.ellipsis_circle),
  ),
);

结果:

xyhw6mcr

xyhw6mcr2#

您可以尝试使用PopupMenuButton,您可以在此处找到example

7z5jn7bk

7z5jn7bk3#

尝试下面的代码,希望它对你有帮助.并使用PopupMenuButton
声明关键变量:

final GlobalKey menuKey = GlobalKey();

小工具:

InkWell(
  onTap: () {
    dynamic state = menuKey.currentState;
    state.showButtonMenu();
  },
  child: PopupMenuButton(
    key: menuKey,
    itemBuilder: (_) => const <PopupMenuItem<String>>[
      PopupMenuItem<String>(
        child: Text('Show Test'),
        value: 'Test',
      ),
      PopupMenuItem<String>(
        child: Text('Edit Test Solution'),
        value: 'Edit',
      ),
    ],
    onSelected: (_) {},
  ),
),

结果-〉

相关问题