弹出菜单

PopupMenuButton

使用PopupMenuButton，点击时弹出菜单

Center(
        child: PopupMenuButton<String>(
      initialValue: 'Math', // 初始值
      itemBuilder: (context) {
        // 子项构造函数
        return <PopupMenuEntry<String>>[
          const PopupMenuItem(value: 'Chinese', child: Text('语文')),
          const PopupMenuItem(value: 'Math', child: Text('数学')),
        ];
      },
    ));

选中与未选中事件

 onSelected: (value) {
   print("选中了${value}");
 },
 onCanceled: () {
   print("一个未选中时触发");
 },

长按提示

tooltip: '这是PopupMenuButton组件',

设置显示内容
默认情况下是显示三个点，但是也可以设置为文字或图标。child 和 icon 这两个属性不能再PopupMenuButton中共存

// 文字
child: const Text('学科'),
// 图标
icon: const Icon(Icons.add),

边框

 shape: RoundedRectangleBorder(
       side: const BorderSide(color: Colors.blue),
       borderRadius: BorderRadius.circular(10)
     ),

PopupMenuItem

PopupMenuItem菜单子项，有以下几个属性：

• value，选中的值
• enabled，是否可选
• height，高度
• textStyle，文本样式
• child，子控件

PopupMenuDivider

PopupMenuDivider是菜单分割线，插入在下拉项之间

itemBuilder: (context) {
   // 子项构造函数
   return <PopupMenuEntry<String>>[
     const PopupMenuItem(value: 'Chinese', child: Text('语文')),
     const PopupMenuDivider(),
     const PopupMenuItem(value: 'Math', child: Text('数学')),
   ];
 },

showMenu

 Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        var value = await showMenu(
          context: context,
          position: const RelativeRect.fromLTRB(1000, 1000, 0, 0),
          items: [
            const PopupMenuItem(
              value: 1,
              child: Text('菜单项1'),
            ),
            const PopupMenuItem(
              value: 2,
              child: Text('菜单项2'),
            ),
          ],
        );
        print("选中的菜单是$value");
      },
      child: const Text('点击弹出菜单'),
    );
  }

弹出提示

一般用于二次确认提示，防止误操作。

AlertDialog

ElevatedButton(
      onPressed: () {
        showDialog(
            context: context,
            barrierDismissible: false, // 点击空白处是否可以关闭
            builder: (BuildContext context) {
              return AlertDialog(
                title: const Text("提示"),
                content: const Text("是否确认删除？"),
                actions: [
                  TextButton(
                      onPressed: () {
                        Navigator.of(context).pop(); // 关闭AlertDialog弹窗
                        print("取消删除");
                      },
                      child: const Text("取消")),
                  TextButton(
                      onPressed: () {
                        Navigator.of(context).pop(); // 关闭AlertDialog弹窗
                        print("确认");
                      },
                      child: const Text("确认"))
                ],
              );
            });
      },
      child: const Text('删除'),
    );

获取用户点击的哪一个

 onPressed: () async {
    var result = await showDialog(
    ...

SimpleDialog

return ElevatedButton(
      onPressed: () {
        showDialog(
            context: context,
            barrierDismissible: false, // 点击空白处是否可以关闭
            builder: (BuildContext context) {
              return SimpleDialog(
                title: const Text('提示'),
                children: <Widget>[
                  Container(
                    height: 80,
                    alignment: Alignment.center,

                    child: const Text('确认删除吗？'),
                  ),
                  const Divider(height: 1,),
                  TextButton(
                    child: const Text('取消'),
                    onPressed: () {
                      Navigator.of(context).pop('cancel');
                    },
                  ),
                  const Divider(height: 1,),
                  TextButton(
                    child: const Text('确认'),
                    onPressed: () {
                      Navigator.of(context).pop('ok');
                    },
                  ),
                ],
              );
            });
      },
      child: const Text('删除'),
    );

Dialog

如果你觉得这还是不够个性，那可以祭出终极大招了，直接使用Dialog，Dialog可以定制任何对话框

class _YcHomeBodyState extends State<YcHomeBody> {
  final String appName = '王者农药';
  final String appIcon =
      'https://img.ixintu.com/upload/jpg/20210523/f083ac25b8d57debcda7653a524c0026_257819_800_800.jpg!ys';
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        child: const Text('卸载'),
        onPressed: () {
          showDialog(
            context: context,
            barrierDismissible: false, // 点击空白处是否可以关闭
            builder: (BuildContext context) {
              return Dialog(
                //形状
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16)),
                //阴影
                elevation: 2,
                //背景色
                backgroundColor: Colors.transparent,
                // 弹窗具体显示的东西
                child: Container(
                  padding: const EdgeInsets.all(16),
                  // 修饰
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      // 标题
                      Text("要卸载 “$appName” 吗 ？",
                          style: const TextStyle(fontSize: 16)),
                      // 用于占位
                      const SizedBox(
                        height: 16,
                      ),
                      //内容
                      Text("卸载 “$appName“ 将同时删除其数据",
                          style: const TextStyle(fontSize: 12)),
                      const SizedBox(
                        height: 16,
                      ),
                      // app图标，使用ClipRRect对图片进行裁剪
                      ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Image.network(
                          appIcon,
                          width: 50,
                          height: 50,
                        ),
                      ),
                      //  底部两个按钮
                      const SizedBox(
                        height: 10,
                      ),
                      Row(
                        // 设置横向自动分配剩余控件
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          TextButton(
                              onPressed: () {
                                print("取消");
                                Navigator.of(context).pop();
                              },
                              child: const Text("取消")),
                          // 分割线
                           const SizedBox(
                             height: 20,
                             width: 20,
                             child:    VerticalDivider(
                               width: 20,
                               thickness: 2,
                               color: Colors.grey,
                             ),
                           ),
                          TextButton(
                              onPressed: () {
                                print("卸载");
                                Navigator.of(context).pop();
                              },
                              child: const Text(
                                "卸载",
                                style: TextStyle(color: Colors.red),
                              ))
                        ],
                      )
                    ],
                  ),
                ),
              );
            },
          );
        });
  }
}