dart 创建一个像这样的摆动按钮

f2uvfpb9  于 2023-10-13  发布在  其他
关注(0)|答案(2)|浏览(84)

我想创建一个扑击按钮,如在下面的图像所示。这是一个位于行小部件末尾的InkWell,带有文本和assetImage。我想当用户点击墨水池它显示如下选项:enter image description here
从选项中选择后,墨水池将显示如下:enter image description here
选择的选项应该在菜单列表中显示为红色

mf98qq94

mf98qq941#

无需重复使用PopupMenuButton。

hlswsv35

hlswsv352#

您可以使用MenuAnchor来实现这一点。https://api.flutter.dev/flutter/material/MenuAnchor-class.html创建一个函数,选择您单击的项目并相应地更新ui

MenuAnchor(
      style: MenuStyle(
        side: MaterialStatePropertyAll(BorderSide(color: blue)),
        backgroundColor: MaterialStateProperty.all<Color?>(blue),
      ),
      builder: (context, controller, child) {
        return InkWell(
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: Transform.scale(
              scaleX: -1,
              child: Icon(Icons.),
            ),
          ),
          onTap: () {
            if (controller.isOpen) {
              controller.close();
            } else {
              controller.open();
            }
          },
        );
      },
      menuChildren: [MenuItemButton(
          child: Text(
            title,
          ),
        )],
    );

相关问题