Flutter:功能型组件(2)- 弹出菜单、弹出提示

news2024/11/17 2:58:36

弹出菜单

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组件',

在这里插入图片描述

设置显示内容
默认情况下是显示三个点,但是也可以设置为文字或图标。childicon 这两个属性不能再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';
  
  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),
                              ))
                        ],
                      )
                    ],
                  ),
                ),
              );
            },
          );
        });
  }
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/592929.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

svg教程-初始svg

第一章 认识svg 简单来说&#xff1a; 位图&#xff1a;放大会失真图像边缘有锯齿&#xff1b;是由像素点组成&#xff1b;前端的 Canvas 就是位图效果。矢量图&#xff1a;放大不会失真&#xff1b;使用 XML 描述图形。 我在 知乎 上找了一个图对说明一下。 左边是位图&am…

华为开发者大会2023官宣,华为云在憋什么大招?

文丨智能相对论 作者丨沈浪 华为云也坐不住了。 在此之前&#xff0c;百度、阿里、商汤、科大讯飞等国内科技厂商以及微软、谷歌等国际巨头都已经发布了自家的大模型新品以及AIGC等相关应用。而华为云手握盘古大模型&#xff0c;却始终按兵不动&#xff0c;迟迟没有正式进场…

实验篇(7.2) 02. 部署物理实验环境(上)❀ 远程访问

【简介】当大家了解到并不需要很高的代价就可以动手做FortiOS 7.2的实验&#xff0c;很多人愿意尝试使用FortiGate防火墙硬件来学习最验难掌握的远程访问部分&#xff0c;这里我们将学习现场部署一套物理实验环境&#xff0c;让大家看到&#xff0c;在一张桌子上&#xff0c;在…

chatgpt赋能python:Python中大小写转换的方法

Python中大小写转换的方法 在Python编程中&#xff0c;经常需要对文本进行大小写转换的操作。本文将介绍Python中字符串大小写转换的方法&#xff0c;以及如何使用它们来优化你的代码。 方法一&#xff1a;使用upper()和lower()方法 Python中&#xff0c;可以使用字符串对象…

数据可视化开发的加入让办公工作更智能!

想要实现办公自动化、智能化&#xff0c;就需要选择灵活、简便、易操作的数据可视化开发平台全力助力。因为这是专注于办公高效发展的开发平台&#xff0c;是企业级的应用低代码开发平台&#xff0c;用于职场中可以实现APP、CRM、OA、ERP、WMS各类管理系统开发。可以说&#xf…

ACL 2022:Graph Pre-training for AMR Parsing and Generation

Graph Pre-training for AMR Parsing and Generation 论文&#xff1a;https://aclanthology.org/2022.acl-long.415/ 代码&#xff1a;https://github.com/goodbai-nlp/AMRBART 期刊/会议&#xff1a;ACL 2022 摘要 抽象语义表示&#xff08;AMR&#xff09;以图形结构突出…

2022年天府杯全国大学生数学建模竞赛A题仪器故障智能诊断技术解题全过程文档及程序

2022年天府杯全国大学生数学建模竞赛 A题 仪器故障智能诊断技术 原题再现&#xff1a; 问题背景&#xff1a;   仪器设备故障诊断技术是一种了解和掌握机器在运行过程的状态&#xff0c;确定其整体或局部正常或异常&#xff0c;早期发现故障及其原因&#xff0c;并能预报故…

关于高三经典励志文章精选

关于高三经典励志文章精选 篇一 人要心有所向 曾经有幸被母校邀请回校做演讲。那一次的演讲结束后&#xff0c;接到学弟学妹最多的问题是&#xff1a;为什么我的大学生活很充实&#xff0c;自己也很努力&#xff0c;可毕业之后依旧觉得很迷茫? 我觉得关于迷茫的解答最后都能归…

git创建本地分支的应用实践

场景 我们希望能够不影响本地master分支的情况下自己单独开发一个功能&#xff0c;等开发完成后再合并到master分支中 操作 创建本地分支sortdev&#xff0c;并且切换到该分支上&#xff1a; git checkout -b sortdev git branch -vv 可以查看到本地master分支追踪的是远程…

【学习记录】二次曲线、二次曲面、对偶二次曲线、对偶二次曲面

一、二次曲线与对偶二次曲线 最近在看基于椭球体的物体SLAM过程中&#xff0c;经常涉及到椭球体的空间几何知识&#xff0c;这里先补充一下一些空间几何相关的基础&#xff0c;参考链接。 椭球体本身属于二次曲面的一种&#xff0c;二次曲面是对空间形状的描述&#xff0c;属于…

每天一道面试题之如何将字符串反转?

在java中&#xff0c;我们可以使用StringBuilder或者StringBuffer类的reverse()方法来实现对字符串的反转。 在讲述实现方法之前&#xff0c;首先我们先来介绍一下StringBuilder和StringBuffer是什么&#xff1f;在实际开发中&#xff0c;会有大量的字符串的拼接,但java中的字…

pytorch 训练EfficientnetV2

文章目录 前言一、数据摆放二、训练二、测试三、训练和测试结果总结 前言 前不久用pytorch复现了efficientnetv2的网络结构&#xff0c;但是后边自己一直有其他事情再做&#xff0c;所以训练部分的文章拖到了现在。关于Efficientnet的部分文章链接可参考如下&#xff1a; Effic…

一百二十、Kettle——用kettle把Hive数据同步到ClickHouse

一、目标 用kettle把hive数据同步到clickhouse&#xff0c;简单运行、直接全量导入数据 工具版本&#xff1a;kettle&#xff1a;8.2 Hive:3.1.2 ClickHouse21.9.5.16 二、前提 &#xff08;一&#xff09;kettle连上hive &#xff08;二&#xff09;kettle连上cli…

10. 数据结构之树

前言 之前介绍了顺序表的数据结构&#xff0c;包含队列&#xff0c;栈等&#xff0c;这种结构都是一对一的&#xff0c;但是现实生活中&#xff0c;经常会遇见一对多的数据结构&#xff0c;比如族谱&#xff0c;部门机构等&#xff0c;此时我们需要一个更复杂的数据结构来表示…

分布式系统概念和设计——(事务与并发控制)

分布式系统概念和设计 事务与并发控制 简介 事务的目标是在多个事务访问对象以及服务器面临崩溃的情况下&#xff0c;保证所有由服务器管理的对象始终维持在一个一致的状态上 事务是由客户定义的针对服务器对象的一组操作&#xff0c;组成为一个不可分割的单元&#xff0c;由…

Unity | HDRP高清渲染管线学习笔记:HDRP配置文件(HDRP Asset)

目录 一、Frame Settings&#xff08;帧设置&#xff09; 二、Volume 三、HDRP配置文件、帧设置和Volume之间的关系 四、HDRP配置文件 1.Rendering &#xff08;1&#xff09;Color Buffer Format&#xff08;颜色缓存格式&#xff09; &#xff08;2&#xff09;Lit Sh…

芭比Q了,现在的00后实在是太卷了.....

都说00后躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。 这不&#xff0c;前段时间我们公司来了个00后&#xff0c;工作都没两年&#xff0c;跳槽到我们公司起薪20K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了…

掌握这个90%的人都不会的大屏技术,裁员、降薪与你无关

裁员话题时不时就被拉到热搜上溜几圈&#xff0c;一方面让各位打工人们焦虑恐惧失业风险&#xff0c;另一方面也能让各位从一波波裁员危机事件中吸取“经验”。例如&#xff0c;技术人员狂敲代码、业务人员猛冲业绩…该被裁的依旧如此&#xff0c;在当今你得具备点别人没有的技…

测评补单操作在美客多店铺及产品优化中的决定性角色:深度解读

许多经营美客多平台的商家有一种观念&#xff0c;他们认为美客多平台的规则与亚马逊有所区别。在美客多上&#xff0c;店铺比产品更重要&#xff0c;而且平台的竞争相对较小。因此&#xff0c;他们认为在美客多平台进行补单操作是不必要的。 然而&#xff0c;是否真的如此呢&a…

RF接口测试(1)

RF是做接口测试的一个非常方便的工具&#xff0c;我们只需要写好发送报文的脚本&#xff0c;就可以灵活的对接口进行测试。 做接口测试我们需要做如下工作&#xff1a; 1、拼接发送的报文 2、发送请求的方法 3、对结果进行判断 我们先按步骤实现&#xff0c;再进行RF操作的…