用户登录

PopupMenuButton,弹出式菜单按钮 .. 一般你可以把它放在 AppBar 的 actions 里面 .. 这里我们直接在这排内容里面,添加一个 PopupMenuButton ..

菜单里的项目要使用一个 itemBuilder 创建 .. 方法接收一个 BuildContext 类型的 context 参数 .. 返回的值应该是个列表 .. 列表里面的项目就是弹出菜单里的菜单项 ..

这个项目都是一个 PopupMenuItem .. 它的 child 属性就是这个菜单项上显示的东西 .. 一个 Text .. 显示的文字是 Home ..

现在界面上会显示一个菜单按钮 .. 按一下它会打开这个弹出菜单,里面现在有一个菜单项 ..

onSelected

选择了菜单里面的项目会执行弹出菜单的 onSelected 这个回调 .. 在 PopupMenuButton 里面添加一个 onSelected .. 它接收一个 value 参数 .. 表示的就是菜单项的值 .. 在方法里面,我们可以把它 print 到调试控制台上 ..

在菜单项里面,可以再给它添加一个 value 属性 .. 它的值就是这个菜单项表示的值 ..

下面可以复制两份这个菜单项 .... 修改一下它的 value 属性的值 .. 还有菜单项上显示的文字 .. Discover ... 下面这个可以是 Community ...

shift + command + Y,打开编辑器的调试控制台 ..

到模拟器上预览一下 .. 打开弹出菜单 ... 选择里面的菜单项 .. 在控制台上会输出被选择的菜单项里面的 value 属性的值 ..

下面我们在这个类里面 .. 添加一个属性 .. 类型是 String .. 名字是 _currentMenuItem .. 先让它等于 Home ..

然后在弹出菜单上面再添加一个 Text .. 要显示的文字是 _currentMenuItem 属性表示的值 ..

再找到弹出菜单的 onSelected .. 在这个方法里用一个 setState .. 设置一下小部件的 State .. 把 _currentMenuItem 的值设置成被选择的菜单项的值 .. 这里就是这个 value 参数的值 ..

再去试一下 .. 屏幕的一开始会显示一个 Home ... 打开弹出菜单 .. 选择一个菜单项 ... 这样会调用 setState .. 屏幕上显示的文字设置成了菜单项的值 ..

PopupMenuButton:弹出式菜单按钮《 Flutter 移动应用:按钮 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点