形状

纯 SwiftUI 上的各种形状

👨🏻‍💻 欢迎订阅 Telegram 频道 SwiftUI dev。

要求

iOS 13.0 或 macOS 10.15

安装

Swift Package Manager

要使用 SwiftPM 将 Shapes 集成到你的项目中，请将以下内容添加到你的 Package.swift 文件中

dependencies: [
    .package(url: "https://github.com/c-villain/Shapes", from: "0.1.0"),
],

或者通过 XcodeGen 插入到你的 project.yml 文件中

name: YourProjectName
options:
  deploymentTarget:
    iOS: 13.0
packages:
  Shapes:
    url: https://github.com/c-villain/Shapes
    from: 0.1.0
targets:
  YourTarget:
    type: application
    ...
    dependencies:
       - package: Shapes

快速开始

所有示例都可以在包内的演示项目中找到。

Shapes 提供了各种自定义形状。

👇🏻 点击它的名字查看描述和使用示例。

圆角

RoundedRectangle 形状和 .cornerRadius 修饰符用于圆角指定角

使用方式如下

RoundedRectangle(topLeft: 0, 
                topRight: 16, 
                bottomLeft: 16,
                bottomRight: 16)

如果一侧的半径大于高度或宽度的一半

则使用修饰符链

Text("Corner radius modifier")
                .foregroundColor(.black)
                .padding(16)
                .background (
                    Color.purple
                        .cornerRadius(200, corners: .topLeft)
                        .cornerRadius(200, corners: .bottomLeft)
                )

气泡

Bubble 形状和 .bubble 修饰符用于绘制消息或提示

使用方式如下

VStack {
    Text("Hi!")
        .padding(.horizontal, 12)
        .padding(.vertical, 8)
        .background(
            Bubble.init(type: .send,
                        cornerRadius: 20,
                        tail: (width: 6, height: 15))
            .stroke(.gray, lineWidth: 2)
        )
        .frame(maxWidth: .infinity,
               alignment: .trailing)

    Text("Wassup!")
        .padding(.horizontal, 12)
        .padding(.vertical, 8)

        .background(
            Bubble.init(type: .received,
                        cornerRadius: 20,
                        tail: (width: 6, height: 15))
            .stroke(.gray, lineWidth: 2)
        )
        .frame(maxWidth: .infinity,
               alignment: .leading)
}
.padding(20)

或者通过修饰符

VStack(spacing: 20) {
    Text("Custom bubble ✌🏻 \nLeading")
        .foregroundColor(.white)
        .padding(16)
        .bubble(.received,
                withStroke: .clear,
                lineWidth: 2,
                fill: .black.opacity(0.7))
        .frame(maxWidth: .infinity, alignment: .leading)
        
    Text("Custom bubble ✌🏻\nTrailing")
        .foregroundColor(.white)
        .padding(16)
        .bubble(.send,
                withStroke: .clear,
                lineWidth: 2,
                fill: LinearGradient(
                    gradient: Gradient(colors: [.blue.opacity(0.9), .blue.opacity(0.6)]),
                    startPoint: .leading,
                    endPoint: .trailing
                ))
        .frame(maxWidth: .infinity, alignment: .trailing)
}

波浪

Wave 形状和 .waved 修饰符用于绘制动画波浪

向上波浪变体

内部波浪变体

无波浪，经典变体

使用方式如下

HStack {
    ...
    /* Buttons */
    ...
}
.background(
    Color.black.opacity(0.8)
        .waved(corner: cornerRadius,
               height: waveHeight,
               startX: waveX,
               length: waveLength)
)

菱形

Diamond 形状和 .diamond 修饰符用于绘制菱形或四边形

使用方式如下

Text("Diamond")
    .padding(.horizontal, 24)
    .padding(.vertical, 16)
    .background(
        Diamond()
            .stroke(.blue, lineWidth: 2)
    )

或者通过修饰符

Text("Diamond modifier")
    .foregroundColor(.black)
    .padding(24)
    .diamond(top: .init(x: 40, y: 0),
             bottom: .init(x: 0, y: 0),
             withStroke: .black,
             lineWidth: 2.0,
             fill: .yellow)

交流

如果你喜欢这个仓库，请给它一个 ⭐，以便对其他人有用。
如果你发现了一个错误，请打开一个 issue 或者通过 pull request 提交一个修复。
如果你有一个功能请求，请打开一个 issue 或者通过 pull request 提交一个实现，或者通过 lexkraev@gmail.com 或者 telegram 联系我。
如果你想贡献代码，请向 master 分支提交一个 pull request。

许可

Shapes 包基于 MIT 许可证发布。