Flutter中如何在指定商品卡片上实现选择数量的弹出菜单

实现点击空白处隐藏数量选择器的方案 #

你可以通过全局点击监听的方式实现需求，同时你的现有代码存在少量布局逻辑错误，可同步调整：

具体修改步骤 #

• 将页面根布局用GestureDetector包裹，监听全局点击事件，点击时将控制菜单显隐的flag设为false
• 给当前数量选择组件的InkWell设置hitTestBehavior: HitTestBehavior.opaque，阻止点击事件向上冒泡，避免点击选择器自身时触发隐藏逻辑
• 修正Expanded的错误用法：Expanded仅可作为Row/Column的直接子节点，不可放在Center组件内
• 修正文本颜色冲突：数量文本与容器背景均为绿色会导致内容不可见，可将文本颜色改为白色

调整后的代码示例 #

// 页面根布局示例，把你原来的页面内容放在GestureDetector的child里
GestureDetector(
  onTap: () => setState(() => flag = false),
  child: Scaffold(
    // 你的原有页面代码
    body: Stack(
      children: [
        Column(
          children: [
            Image.network(
              MyStrings.imgs[i],
              height: 100,
            ),
          ],
        ),
        Align(
          alignment: Alignment.topRight,
          child: InkWell(
            hitTestBehavior: HitTestBehavior.opaque,
            onTap: () {
              setState(() {
                flag = true;
                if (MyStrings.quantity[i] == 0) {
                  MyStrings.quantity[i] = 1;
                }
              });
            },
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Visibility(
                  visible: flag,
                  child: SizedBox(
                    width: 25,
                    child: IconButton(
                      padding: EdgeInsets.zero,
                      onPressed: () {
                        setState(() {
                          if (MyStrings.quantity[i] > 1) {
                            MyStrings.quantity[i]--;
                          } else {
                            MyStrings.quantity[i]--;
                            flag = false;
                          }
                        });
                      },
                      icon: Icon(Icons.remove, color: Colors.green),
                    ),
                  ),
                ),
                Container(
                  width: 40,
                  padding: EdgeInsets.symmetric(vertical: 4),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.green,
                  ),
                  child: Center(
                    child: Text(
                      MyStrings.quantity[i].toString(),
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 14
                      ),
                    ),
                  ),
                ),
                Visibility(
                  visible: flag,
                  child: SizedBox(
                    width: 25,
                    child: IconButton(
                      padding: EdgeInsets.zero,
                      onPressed: () {
                        setState(() {
                          MyStrings.quantity[i]++;
                        });
                      },
                      icon: Icon(
                        Icons.add,
                        color: Colors.green,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    )
  ),
)

内容的提问来源于stack exchange，提问作者Najam Ul Saqib