Popup弹出菜单扩展

Popup弹出菜单扩展

下载和安装

Popup扩展: de.ullisroboterseite.ursai2popup.aix
示例应用: PopupExample.aia

开发动机

MIT App Inventor包含从列表中选择组件，例如ListView组件。不幸的是，它总是填满整个屏幕，而且配置视图的选项很少。这里介绍的扩展是Android弹出菜单的包装器。几乎所有属性都是可调的。

默认主题	黑色主题

功能概述

Popup弹出菜单扩展是一个Android PopupMenu的包装器，提供完整的弹出菜单功能：

绑定到任意可见组件下方显示
支持HTML格式文本和图标
支持复选框菜单项
可自定义字体大小和颜色
支持主题背景色设置
提供完整的事件处理

使用方法

弹出菜单绑定到另一个可见组件（锚点）。如果通过Show方法打开，它会出现在锚点组件下方。如果没有足够空间，它会显示在上方。

将扩展集成到AI2项目中

在设计器中选择锚点组件。组件可以是任何可见类型。在示例中是名为cmdMore的按钮。如果没有选择Anchor，应用程序将中止。

配置菜单项

首先，必须定义菜单行。有多种方法可以做到这一点。

从字符串设置菜单项

MenuItemsFromString属性在设计器和运行时都可用。单个项目定义用逗号分隔列出：

从列表设置菜单项

SetMenuItems方法允许将菜单项定义为列表：

从文件加载菜单项

菜单定义也可以从文件中读取。在设计器中使用MenuItemsFromFile属性，在运行时使用LoadMenuItemsFromFile函数。

菜单项定义格式

菜单行的定义最多包含三个部分，用双冒号(::)分隔：

<Titel>[::[<Icon-Name>][::T | F]]

这意味着：强制性的超文本格式标题（菜单栏中显示的文本），可选后跟双冒号，如果适用，还有符号图像文件的名称。如果后跟双冒号和”T”或”F”，则在菜单行中激活复选框。”T”或”F”表示选中状态。

菜单项定义示例：

"Info..."：菜单行显示文本”Info…”
"Info...::info.png"：菜单行显示文本”Info…“，图标从”info.png”文件加载
"Info...::info.png::T"：菜单行显示文本”Info…“，图标从”info.png”文件加载，添加状态为”选中”的复选框
"Info...::::F"：菜单行显示文本”Info…“，添加状态为”未选中”的复选框

菜单文本

文本可以包含HTML标签。

The <b>quick <i>brown <strike>fox <u>jumps <font color="red">over</font></u></strike><i></b>::info.png

结果如下菜单项：

可以使用哪些HTML标签取决于实现。您可以找到相关提示这里或这里。

图标名称

符号文件的名称指的是资源文件，即上传到AI2项目的文件。

可以省略”.png”或”.jpg”文件扩展名。扩展会自动搜索。名称区分大小写！

复选框

菜单项定义中的第三项确定是否显示复选框。这里只评估第一个字母。大小写不重要。例如，”False”与”f”同义，”true”与”T”同义。除了”t”或”f”之外的字符被忽略，即不显示复选框。

其他设置

MenuFontSize定义整个菜单的菜单项文本大小，MenuTextColor定义它们的文本颜色。使用Default时，颜色由当前主题定义决定。如果使用MenuTextColor指定颜色，超文本代码中的颜色规范将不再正确工作。如果要为超文本区域着色，应将MenuTextColor设置为Default。

菜单的背景色是Black或White。使用Default时，背景色由当前主题定义决定。

注意：不幸的是，菜单的背景色不能通过Android API单独设置。它由主题决定。主题无法通过程序访问。但是，AI2提供了两个主题，一个是黑色背景白色前景，另一个相反。要设置背景色，相应地设置菜单的主题。除了背景色，主题还包含视图其他元素的不同设置，例如菜单的行高。这意味着黑色和白色菜单除了背景色之外在其他项目上也有所不同。

在运行时，可以使用SetMenuItemChecked函数更改菜单项的复选框状态。项目计数(ItemNo)从1开始。

可以使用SetMenuItemEnabled函数停用单个菜单行。文本和符号以浅灰色显示，项目不再响应点击。项目计数(ItemNo)从1开始。

设计器的AutoCheck属性可用于确定带有复选框的菜单行在点击时是否自动切换其选中状态。事件提供当前的，即切换后的选中状态。

弹出菜单触发的事件

如果菜单项被点击，会触发MenuItemSelected事件。事件的参数ID是项目的编号，从1开始。如果设置了AutoCheck，Checked是当前的新的选中状态。

为了节省大量的if... else if... else块，前五个菜单项的点击事件作为单独的事件可用。MenuItemSelected在MenuItem<x>Selected之前触发。

锚点组件: 指定弹出菜单显示在其下方的（可见）组件。如果组件下方没有足够空间，菜单将显示在指定组件上方。
自动选中: 指定带有复选框的菜单行在点击时是否自动更改其选中状态。
菜单背景色: 定义菜单的背景色。可能的设置：White、Black、Default。大小写不重要。
菜单字体大小: 指定菜单项的字体大小。
字符串菜单项: 将弹出菜单的条目定义为逗号分隔的字符串。
文件菜单项: 指定从中加载菜单项定义的资源文件。
菜单文本颜色: 设置菜单项的文本颜色。
版本: 获取扩展的版本。

关闭菜单(): 关闭菜单。
从文件加载菜单项(文件名): 从指定的资源文件加载菜单项的定义。
设置菜单项(项目列表): 使用列表定义弹出菜单的条目。
设置菜单项选中状态(项目编号,值): 设置指定菜单项的选中状态。ItemNo是项目的编号，计数从1开始。
设置菜单项启用状态(项目编号,值): 启用/禁用指定的菜单项。ItemNo是项目的编号，计数从1开始。禁用的行以浅灰色显示，不响应点击。
显示菜单(): 打开菜单。

菜单项1被选中(标题,选中状态): 菜单项#1被点击。
菜单项2被选中(标题,选中状态): 菜单项#2被点击。
菜单项3被选中(标题,选中状态): 菜单项#3被点击。
菜单项4被选中(标题,选中状态): 菜单项#4被点击。
菜单项5被选中(标题,选中状态): 菜单项#5被点击。
菜单项被选中(编号,标题,选中状态): 编号为ID的菜单行被点击。计数从1开始。

使用示例

PopupTest示例应用

示例应用的大多数功能已经在上面解释过了。菜单项绑定到简单的操作。

基础使用示例

// 设置锚点组件
when Screen1.Initialize
do
    // 设置按钮为锚点
    set Popup1.Anchor to Button1

    // 从字符串设置菜单项
    set Popup1.MenuItemsFromString to "选项1::icon1.png,选项2::icon2.png::T,选项3"

// 显示弹出菜单
when Button1.Click
do
    // 显示菜单
    call Popup1.Show

// 处理菜单选择
when Popup1.MenuItemSelected ID Title Checked
do
    if ID = 1 then
        show notification "选择了: " & Title
    else if ID = 2 then
        show notification "选项2状态: " & Checked
    else if ID = 3 then
        show notification "选择了选项3"

动态菜单管理

// 动态更新菜单项
when UpdateMenuButton.Click
do
    // 创建新的菜单项列表
    make global MenuItemList from list

    add "新建文件::new.png" to MenuItemList
    add "打开文件::open.png::F" to MenuItemList
    add "保存文件::save.png::T" to MenuItemList
    add "退出程序::exit.png" to MenuItemList

    // 设置新菜单
    call Popup1.SetMenuItems MenuItemList

    // 显示菜单
    call Popup1.Show

// 启用/禁用菜单项
when ToggleMenuItemButton.Click
do
    if global ItemEnabled then
        call Popup1.SetMenuItemEnabled 2 false
        set global ItemEnabled to false
        show notification "菜单项2已禁用"
    else
        call Popup1.SetMenuItemEnabled 2 true
        set global ItemEnabled to true
        show notification "菜单项2已启用"

复选框菜单示例

// 显示设置菜单
when SettingsButton.Click
do
    call Popup1.SetMenuItems from list "通知:::F,声音:::T,震动:::F,深色模式:::F"
    call Popup1.Show

// 处理设置更改
when Popup1.MenuItemSelected ID Title Checked
do
    if ID = 1 then
        set global NotificationsEnabled to Checked
        if Checked then
            show notification "通知已开启"
        else
            show notification "通知已关闭"
    else if ID = 2 then
        set global SoundEnabled to Checked
    else if ID = 3 then
        set global VibrationEnabled to Checked
    else if ID = 4 then
        set global DarkMode to Checked
        if Checked then
            // 应用深色主题
            set Screen1.Theme to "Dark"
        else
            // 应用浅色主题
            set Screen1.Theme to "Light"

最佳实践

菜单设计原则

简洁明了: 菜单项应该简洁明了，使用户容易理解
逻辑分组: 相关功能应该组织在一起
图标一致性: 使用一致的图标风格和大小
文本清晰: 避免过长的菜单项文本

性能优化

预加载资源: 在应用启动时预加载图标资源
合理使用HTML: 避免过于复杂的HTML格式
事件处理: 高效处理菜单选择事件

用户体验

视觉反馈: 为菜单项提供适当的视觉反馈
状态保持: 合理使用复选框状态
响应速度: 确保菜单显示和响应的速度

本文档基于Ulli的AI2 Popup扩展原始文档整理而成，更多信息请参考原始文档。

Popup弹出菜单扩展

Popup弹出菜单扩展

下载和安装

开发动机

功能概述

使用方法

将扩展集成到AI2项目中

配置菜单项

从字符串设置菜单项

从列表设置菜单项

从文件加载菜单项

菜单项定义格式

菜单文本

图标名称

复选框

其他设置

弹出菜单触发的事件

使用示例

PopupTest示例应用

基础使用示例

动态菜单管理

复选框菜单示例

最佳实践

菜单设计原则

性能优化

用户体验

您的改进建议

联系方式：

意见反馈（300字以内）：

App Inventor 2 中文网