Flutter PopupMenuButton自定义菜单中的3个点 - 腾讯云开发者社区

文章/答案/技术大牛

发布

你知道吗，Flutter内置了10多种Button控件

注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本：1.12.13+hotfix.5 Dart版本：2.7.0 Flutter内置了10多种Button（按钮）类控件供我们使用...PopupMenuButton PopupMenuButton是一个菜单选中控件，用法如下： PopupMenuButton( itemBuilder: (context) {...设置其初始值： PopupMenuButton( initialValue: '语文', ... ) 设置初始值后，打开菜单后，设置的值将会高亮，效果如下： ?...设置其阴影值、内边距和弹出菜单的背景颜色： PopupMenuButton( elevation: 5, padding: EdgeInsets.all(5), color:...今天的文章对大家是否有帮助？如果有，请在文章底部留言和点赞，以表示对我的支持，你们的留言、点赞和转发关注是我持续更新的动力！

4.1K3 0

你知道吗，Flutter内置了10多种Button控件

版本及Dart版本如下：Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Flutter内置了10多种Button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度...PopupMenuButton是一个菜单选中控件，用法如下： PopupMenuButton( itemBuilder: (context) { return <PopupMenuEntry...', ... ) 效果如下： [1240] 设置其阴影值、内边距和弹出菜单的背景颜色： PopupMenuButton( elevation: 5, padding: EdgeInsets.all...>( child: Text('学科'), ... ) child组件将会被InkWell包裹，点击弹出菜单，效果如下： [1240] 也可以设置其他图标： PopupMenuButton( icon: Icon(Icons.add), ... ) 效果如下： [1240] 设置弹出菜单边框： PopupMenuButton( shape: RoundedRectangleBorder

3.2K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

【Flutter 实战】菜单（Menu）功能

老孟导读：今天介绍下Flutter中的菜单功能。...PopupMenuButton 使用PopupMenuButton，点击时弹出菜单，用法如下： PopupMenuButton( itemBuilder: (context) {...设置其初始值： PopupMenuButton( initialValue: '语文', ... ) 设置初始值后，打开菜单后，设置的值将会高亮，效果如下： ?...设置其阴影值、内边距和弹出菜单的背景颜色： PopupMenuButton( elevation: 5, padding: EdgeInsets.all(5), color:...menu有一个非常重要的参数Offset，这个参数是控制菜单弹出的位置，通常情况下，菜单在当前按钮下面展示： PopupMenuButton( offset: Offset(0,100

3K1 0

【开源项目】Flutter版玩安卓

wanandroid_flutter 玩安卓的flutter版本，非常感谢鸿洋提供的api。这个项目中常用的widget基本都用到了，没用到的后续也会强行用到的。...apk地址截图 Android IOS 你能学到 BottomNavigationBar 底部菜单 FlutterJsonBeanFactory Json解析 WebView...加载网页 dio 网络请求 ExpansionPanelList 可折叠列表 Wrap 流布局 Chip 标签 TabBar 顶部菜单 Card 卡片 banner 轮播图 Drawer 侧边栏 SliverAppBar...可滑动折叠的AppBar PopupMenuButton 菜单popup Share 分享功能 TextField 输入框 font 自定义字体 provide 状态管理 theme 切换主题 shared_preferences...flutter_easyrefresh Github https://github.com/yechaoa/wanandroid_flutter 开发环境 Flutter 环境配置 Flutter macOS

1.9K2 0

自定义 Flutter 中的 Drawer

让我们着手写代码来实现 Flutter 中的 drawer 挂件。...在 Flutter 中，我们结合 Scaffold 来使用 drawer 挂件，创建一个带有 Material Design drawer 风格的布局。...我们可以传递任意的挂件到 drawer 中，比如 Container 或者 SizeBox 并随后自定义它，但是我们最好是使用库中自带的 Drawer 挂件，它依附于 Material Design。...现在，我们为 Drawer 添加些功能，正如我们说的，导航到新页面和自定义它的 UI。...在 Drawer 中，菜单列表很重要，列表中我们展示不同的选项，比如设置，简介等。

6881 0

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

俗话说，磨刀不误砍柴工，会使用工具是非常重要的，其实 Flutter 提供了强大的调试工具，可以辅助我们去查看界面布局中的一切细节。基于这些细节，可以很轻松地去解决布局相关的疑难杂症。...如下所示，左下角的菜单弹框，在 useMaterial3 下呈紫色，而 PopupMenuButton 并没有直接修改弹出框背景色的配置项。...接下来将通过布局分析器，来解决如下几个问题： PopupMenuButton 弹出菜单，其背景是何时、如何着色的。如何修改弹出菜单的背景色。弹出菜单在界面树形结构中，处于哪个层级。...不过看起来没有之前那么紫了，也就是说只设置 popupMenuTheme 的颜色，有一点用，但是不多。这是什么原因呢?...前面说了，一切界面展示中存在的问题，都可以通过 Flutter Inspector 来分析。可以先用拾色器看一下，颜色是 F3F1F7，确实不是白色。

2.8K2 0

Flutter | 超实用简单菜单弹出框 PopupMenuButton

相信在实际开发过程当中，肯定少不了这样的功能： ? 点击 AppBar 右上角的按钮，弹出一个菜单供用户选择。幸运的是，Flutter 提供给我们了一个 Widget，直接就能实现如上的效果。...PopupMenuButton 还是老规矩，先看官方的说明： Displays a menu when pressed and calls onSelected[1] when the menu is...If icon[5] is provided, then PopupMenuButton[6] behaves like an IconButton[7]....大致意思为：当按下的时候显示一个菜单，选择了一个项目的时候会回调 onSelected，传递的值是所选菜单的值。可以提供 child or icon ，但是不能同时提供。...总结这样就完成了一个超级简单并且实用的菜单弹出框，其实它的实现逻辑和 DropdownButton 差不多，都是使用了 PopupRoute，有对这方面感兴趣的同学，可以查看我以前写的文章：Flutter

6.8K3 0

【Flutter 专题】23 图解PopupMenu 那些事儿～

和尚需要处理标题栏弹出对话框 PopupMenu 样式，Flutter 当然提供了一些处理方式，类似 PopupMenuEntry 等，和尚仅就最基础的使用方式进行初步的学习和整理。...item 中可以自定义需要的样式，包括文字图片等一系列样式。...CheckedPopupMenuItem 选中样式 CheckedPopupMenuItem 是一个带有复选标记的弹出菜单项。...Tips: 如果 item 个数过多也无需担心，Flutter 支持默认超过屏幕滑动效果。 ?...---- 和尚目前的学习还仅限于基本的使用，稍高级的自定义涉及较少，如果又不对的地方还希望多多指出。

2.4K4 1

『Flutter』常用组件按钮、图片

1.前言经过『Flutter』布局组件 Container、Row、Column、Stack上一篇文章的学习，我们大家可以了解到布局相关的组件，但是在实际开发中，我们还需要使用到其他的组件，比如按钮、...2.常用组件在Flutter中，有多种按钮组件可以用于创建交互式界面。主要的按钮组件包括： 1. ElevatedButton：这是一个凸起的按钮，常用于主要的操作。...通常用于表单或需要选择性输入的界面。 8. PopupMenuButton：这个按钮在用户点击时会显示一个弹出菜单。它常用于应用的工具栏中，提供额外的选项。 9....InkWell：虽然不是一个标准的按钮组件，但它可以用来给几乎任何widget添加水波纹效果，从而制作自定义按钮。...• 当 TextButton 被点击时，onPressed 会被触发 • 当 TextButton 被长按时，onLongPress 会被触发 4.Icon Flutter 中的 Icon 组件用于显示

1.3K1 0

自研新版Flutter3.32仿微信app聊天|朋友圈模板

2025新版跨平台flutter3.32+dart3.8从0-1搭建仿微信app界面聊天项目Flutter3Chat。flutter3-chat包含聊天、通讯录、我的及朋友圈等模块。...运用技术编辑器：Vscode框架技术：Flutter3.32+Dart3.8组件库：material-design3弹窗组件：showDialog/SimpleDialog/showModalBottomSheet...0.15.0存储组件：get_storage^2.1.1下拉刷新：easy_refresh^3.4.0toast提示：toast^0.3.0网址预览组件：url_launcher^6.3.1项目框架结构flutter3...自定义渐变导航条AppBar( title: Text('Flutter3-Chat'), flexibleSpace: Container( decoration: const BoxDecoration...自定义下拉菜单PopupMenuButton( icon: FStyle.iconfont(0xe62d, size: 17.0), offset: const Offset(0, 50.0),

3212 0

『Flutter』常用组件按钮、图片

2.常用组件在Flutter中，有多种按钮组件可以用于创建交互式界面。主要的按钮组件包括： ElevatedButton：这是一个凸起的按钮，常用于主要的操作。...MaterialButton：这是一个更通用的按钮组件，可以高度自定义，包括形状、颜色、阴影等。 DropdownButton：这是一个下拉按钮，允许用户从一系列项中选择一个。...通常用于表单或需要选择性输入的界面。 PopupMenuButton：这个按钮在用户点击时会显示一个弹出菜单。它常用于应用的工具栏中，提供额外的选项。...InkWell：虽然不是一个标准的按钮组件，但它可以用来给几乎任何widget添加水波纹效果，从而制作自定义按钮。...当 TextButton 被点击时，onPressed 会被触发当 TextButton 被长按时，onLongPress 会被触发 4.Icon Flutter 中的 Icon 组件用于显示 Material

1.6K3 1

Flutter 知识集锦 | Dart 枚举已支持属性成员

在 Flutter3.0 之后，Dart 版本到 2.17 。虽然知道 Dart 枚举已支持属性成员，但一直没有用过。最近刚好有个使用的小场景，就来介绍一下。...将以如下的 PopupMenuButton 的按钮数据来介绍：本文视频版:https://www.ixigua.com/7306317375194956324?...如下所示，定义一个 MenuAction 用于表示菜单的类型： enum MenuAction { setting, about, help, } 如果想要根据枚举元素，得到对应的介绍文字就比较麻烦...PopupMenuButton 的使用 PopupMenuButton 可以支持一个泛型，这里设置为 MenuAction。...支持图标现在想要为菜单栏添加图标，可以为 MenuAction 增加成员来实现。

1.4K1 0

初识顶部导航栏【flutter20个实例之一】

一、老套路，先看样式右侧图是我的实际开发中业务界面，用作展示而已二、讲解（后附源码） 1.这里主要是用户AppBar组件 /** AppBar({ Key key, this.leading...,//Toolbar 中主要内容，通常显示为当前界面的标题文字 this.actions,//一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton...来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单 this.flexibleSpace,//一个显示在 AppBar 下方的控件，高度和 AppBar...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当...，就需要自定义了，他支持子组件。

1.7K2 0

初识顶部导航栏【flutter20个实例之一】

一、老套路，先看样式右侧图是我的实际开发中业务界面，用作展示而已 ? ?...this.actions,//一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton...来显示为三个点，点击后弹出二级菜单 this.flexibleSpace,//一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当...，就需要自定义了，他支持子组件。

1.3K1 0

深入了解 Flutter 中的 PageView（含自定义特效）

原文链接：A Deep Dive Into PageView In Flutter (With Custom Transitions) - 原文作者 Deven Joshi 本文采用意译的方式...本文，我们首先看看 PageView 挂件的内容，然后为它自定义一些特效。...添加自定义过渡到 PageViews 下面我们讨论使用 Transform + PageView 来添加一些自定义的页面过渡。...在这个例子中，我们在 X 方向旋转页面，因为它通过 currentPageValue 减去 index 的弧度值进行滑动。我们可以通过乘于这个值放大这种效果。...Demo App using PageView 在 Flutter 中，为了演示使用 PageView 来创建一个简单的应用，我创建了一个来学习 GRE 词汇的应用。

2.4K2 1

Flutter 入门指北之快速搭建界面(含Flutter知识体系)

上一篇讲完 Flutter 中的一些基本部件，这篇就先填完上篇留下的没写的 AppBar 的坑，以及 Scaffold 其他参数的使用，在开始前，先补一张缩略版的脑图 ?...AppBar 这一部分，我们只关注 Scaffold 中的 AppBar 剩下的还是埋坑【坑4】( ?...(8.0), this.child, // 用于自定义按钮的内容 this.icon, // 按钮的图标 this.offset = Offset.zero, // 展示时候的便宜...表示切换滚动的时长，curve 表示滚动动画的样式， // flutter 已经在 Curves 中定义许多样式，可以自行切换查看效果 _pageController.animateToPage...~ 最后代码的地址还是要的：文章 demo 的地址：https://github.com/kukyxs/flutter_arts_demos_app 电影 App 地址，含括常用功能：https:/

2.3K2 0

flutter 起步

图片注意点：官网下载flutter包完成将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program...继承(extends)Flutter中的继承和Java中的继承是一样的：Flutter中的继承是单继承构造函数不能继承子类重写超类的方法，要用@override子类调用超类的方法，要用superFlutter...中的继承也有和Java不一样的地方：Flutter中的子类可以访问父类中的所有变量和方法，因为Flutter中没有公有、私有的区别上下文对象是整个APP Widget树结构中的Widget话柄，每个Wideget...actions → List - 一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton...来显示为三个点，点击后弹出二级菜单。

6.5K2 0

基于Flutter3.32+DeepSeek电脑端AI流式对话程序

flutter-winseek采用自定义无边框窗口、系统托盘图标。...初始化系统托盘 await systemTray.initSystemTray( title: 'system-tray', iconPath: trayIco, ); // 右键菜单...-WinSeek'# DeepSeek API配置DEEPSEEK_API_KEY = apikeyDEEPSEEK_BASE_URL = https://api.deepseek.com在页面中获取配置好的环境变量...SizedBox( height: 30.0, width: 30.0, child: PopupMenuButton...completion 的最大 token 数(默认使用 4096) 'temperature': 0.4, // 严谨采样越低越严谨(默认1) });基于uniapp+deepseek+vue3

5053 1

flutter3_window_chat仿微信桌面端聊天实战

该项目周期不过个半月，开发中遇到了很多的技术问题，不过都最后解决了。通过这个项目旨在探究Flutter在桌面端技术实践，通过下面的一些技术分享让更多的开发者能参与推动flutter客户端的发展。...新项目模板flutter create flutter_winchat// 运行flutter项目到window桌面flutter run -d windows窗口管理使用的是bitsdojo_window...项目结构flutter构建的项目结构目录非常清晰，一目了然。...Flutter布局模板项目整体采用左中右三列布局，UI结构和微信客户端类似。...null : const RouteSettings(name: '/login'); }}Flutter3自定义窗口操作按钮如下图：通过bitsdojo_window组件实现自定义窗口最小化/最大化

1.3K2 1

Flutter | 思路解析 WPopupMenu 仿微信聊天长按弹出菜单

child 的长度大于 menu 的长度，那么则把 menu 放在中间2.如果 child 的长度小于 menu 的长度，三角形的位置在 child 的中间不多说，上图： ?...这就涉及到我前面所讲的几篇文章： Flutter | 超实用简单菜单弹出框 PopupMenuButton Flutter 源码系列：DropdownButton 源码浅析这几个控件的源码里都有一个类...看到没，这就是阅读源码的益处！既然是一个 Route，那么也可以通过他来返回值，一举两得。了解了如何在当前页面弹出页面，那就可以自定义样式了。...所以我这里直接放弃了这种麻烦的方法，选择了一个相对简单的方法。大致逻辑如下： ?...自动确定弹出位置（上或者下）如果你看过最开始说的那些控件的源码，那么这个问题对于你来说应该不是问题，因为... 那些控件的源码里给了一个解决方案。

5.7K3 1

点击加载更多

你知道吗，Flutter内置了10多种Button控件

你知道吗，Flutter内置了10多种Button控件

【Flutter 实战】菜单（Menu）功能

【开源项目】Flutter版玩安卓

自定义 Flutter 中的 Drawer

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

Flutter | 超实用简单菜单弹出框 PopupMenuButton

【Flutter 专题】23 图解PopupMenu 那些事儿～

『Flutter』常用组件按钮、图片

自研新版Flutter3.32仿微信app聊天|朋友圈模板

『Flutter』常用组件按钮、图片

Flutter 知识集锦 | Dart 枚举已支持属性成员

初识顶部导航栏【flutter20个实例之一】

初识顶部导航栏【flutter20个实例之一】

深入了解 Flutter 中的 PageView（含自定义特效）

Flutter 入门指北之快速搭建界面(含Flutter知识体系)

flutter 起步

基于Flutter3.32+DeepSeek电脑端AI流式对话程序

flutter3_window_chat仿微信桌面端聊天实战

Flutter | 思路解析 WPopupMenu 仿微信聊天长按弹出菜单

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐