适用于SwiftUI的MIFloatingButton

使用SwiftUI轻松可定制的浮动按钮菜单。

要求 🛠️

• iOS 15.0+
• Swift 5.8+
• SwiftUI

安装 ⚙️

Swift包管理器

Swift包管理器是一种自动化Swift代码分发的工具，它集成在Swift编译器中。

一旦您设置了Swift包，将MIFloatingButton作为依赖项添加就与将其添加到Package.swift或Xcode中的Package列表中的依赖项值一样简单。

dependencies: [
    .package(url: "https://github.com/TusharSanchaniya-mi/MIFloatingButton", .upToNextMajor(from: "1.0.0"))
]

CocoaPods

CocoaPods是Cocoa项目的一个依赖管理器。有关使用和安装说明，请访问其网站。要使用CocoaPods将MIFloatingButton集成到Xcode项目中，请在Podfile中指定它

pod 'MIFloatingButton'

主要功能：✨

MIFloatingButton提供了一个具有吸引力的UI设计的操作按钮列表，有3种设计方式来显示浮动按钮在屏幕上。

• both：表示有UI和文本标题的按钮。（默认）
• iconOnly：表示仅包含图标的按钮。
• textOnly：表示仅包含文本的按钮。

示例

import SwiftUI

struct ContentView: View {

    @State var arrFloatingItem: [FloatingItem] = []

    func fillFloatingText() {
        let arrIconName = ["email_ic", "person", "person_ic", "xmark.bin"]
        for item in 0..<arrIconName.count {
            arrFloatingItem.append(FloatingItem(title: "Button \(item)", iconName: arrIconName[item]))
        }
    }

    let configItem = FloatingItemConfiguration(floatingIcon: "plus")

    var body: some View {

        VStack {
            MIFloatingButton(arrFloatingItem: $arrFloatingItem, config: configItem) { floatingItem in
                // Perform your action
            } childView: {
                VStack {
                    List {
                        ForEach(1 ... 30, id: <span class="pl-kos">.self) { _ in
                            HStack(spacing: 15) {
                                Image(systemName: "person.fill")
                                    .padding(10)
                                    .background(.green.opacity(0.3))
                                    .clipShape(Circle())
                                VStack(alignment: .leading) {
                                    Text("Fulan bin fulan")
                                    Text("Aenean sagittis leo ut massa sagittis varius ac eu mauris. Nunc interdum tellus vestibulum bibendum pulvinar.")
                                        .font(.caption)
                                        .foregroundColor(.secondary)
                                }
                            }
                        }
                        .listRowSeparator(.hidden)
                    }
                }
            }
            .onAppear() {
                fillFloatingText()
            }
        }
    }
}

#Preview {
    ContentView()
}

屏幕截图

both	iconOnly	textOnly

🙋 作者

MindInventory

📱 查看我们其他Mobile UI库列表 🤩

💻 查看我们其他Web库列表 🤩

📝 获取免费的行业白皮书 →

查看我们的作品 📜

📄 许可证

MIFloatingButton遵循MIT许可协议。

如果您在我们的项目中使用了开源库，请确保引用我们，并在www.mindinventory.com给我们一个星标。