Flutter PopupMenuButton点击选项OnSelected不触发OnCanceled反而执行如何解决

PopupMenuButton的onSelected回调触发的前提是你点击的PopupMenuItem配置了value属性，你当前代码里所有的PopupMenuItem都没有传入value参数，点击时框架无法识别有效选中值，就会判定为菜单取消操作，触发onCanceled回调。

只需要在构建PopupMenuItem时传入对应value即可，推荐同时给PopupMenuButton加上泛型约束保证类型安全，修改点如下：

• 给PopupMenuButton指定泛型为String，匹配你选项的文本类型
• 每个PopupMenuItem构造时增加value: text参数，把当前选项文本作为选中值传递
• 额外优化：给Container增加垂直内边距，避免文字贴边、点击热区过小的问题，同时给变量补全类型声明保证代码规范

修复后完整代码：

import 'package:flutter/material.dart';

class ComposeButton extends StatelessWidget {
  final double width;
  static const List<String> options = ["Create New Poem", "Load Existing Poem"];

  ComposeButton(this.width);

  @override
  Widget build(BuildContext context) {
    // 增加泛型约束
    return PopupMenuButton<String>(
      child: Container(
          width: width,
          padding: const EdgeInsets.symmetric(vertical: 8),
          decoration: BoxDecoration(
            boxShadow: const [BoxShadow(
                color: Colors.black38,
                blurRadius: 1.0,
                spreadRadius: 0.0,
                offset: Offset(0.0, 1.5)
            )],
            color: Theme.of(context).primaryColor,
            borderRadius: const BorderRadius.all(Radius.circular(5)),
          ),
          child: const Text(
            "Compose",
            textAlign: TextAlign.center,
            style: TextStyle(
                fontSize: 24,
                color: Colors.white,
                fontWeight: FontWeight.w500
            ),
          )
      ),
      onSelected: (String selected){
        print(selected);
      },
      onCanceled: (){
        print("test");
      },
      itemBuilder: (context) {
        return options.map(
          (text) => PopupMenuItem<String>(
            // 配置value参数是触发onSelected的核心
            value: text,
            child: Text(text),
          )
        ).toList();
      },
    );
  }
}

内容的提问来源于stack exchange，提问作者Albrino Fernando