SwiftUI 自定义更多菜单指南

2023-12-05 14:39:19

SwiftUI 自定义“更多菜单”：为您的应用程序添加优雅的功能

引言

SwiftUI 是一个革命性的框架，它改变了 iOS 开发的方式。它以其简洁的 API 和声明式编程范例而闻名。然而，有时您可能需要超出其开箱即用的功能。本文将引导您创建自定义“更多菜单”，这是一个应用程序中常见的元素，用于提供额外的选项和功能。

了解自定义菜单

自定义菜单是一个浮动的视图，它覆盖在应用程序内容之上，提供快速访问各种操作。它通常隐藏在导航栏的“更多”按钮后面，在用户需要时才出现。

构建自定义菜单

在 SwiftUI 中创建自定义菜单涉及三个主要步骤：

定义菜单内容： 创建一个包含菜单项的视图。
呈现菜单： 使用 Menu 视图来呈现菜单。
设置触发器： 确定何时显示菜单，例如点击按钮或手势。

步骤 1：定义菜单内容

首先，定义一个包含菜单项的视图。您可以使用 ForEach 循环遍历数据源或硬编码项目：

struct MenuItemView: View {
    var title: String

    var body: some View {
        Text(title)
    }
}

步骤 2：呈现菜单

接下来，使用 Menu 视图呈现菜单。Menu 接受一个标题和一个内容闭包，该闭包包含菜单项视图：

struct MyMenuView: View {
    @State private var isMenuOpen = false

    var body: some View {
        Button(action: { isMenuOpen.toggle() }) {
            Image(systemName: "ellipsis")
        }
        .menu(isPresented: $isMenuOpen) {
            ForEach(menuItems, id: \.self) { item in
                MenuItemView(title: item)
            }
        }
    }
}