如何在 SwiftUI 中创建自定义动态形状？

Question

我的 Swift 应用程序项目的一个方面是构建一个带有“帖子”的提要，正如我在此处勾画的那样。

除了左上角的日期显示外，我已经完成了所有方面。如何在 Swift UI 中构建这种六边形形状？

请注意，“日期”文本需要动态且可参数化。它们不能硬编码到形状中。

Answer 1

您可以在此项目中使用 Shape，但由于我们有您需要的 SF 符号，因此使用 SF 符号更容易。这是一种方法，您可以根据需要缩放或更改日期。

struct ContentView: View {
    
    var body: some View {
        
        CustomDateView(month: "April", day: "01", time: "00:00 AM", scaleEffect: 0.8)
        
        CustomDateView(month: "July", day: "15", time: "2:00 PM", backgroundColor: .blue)
        
        CustomDateView(month: "May", day: "26", time: "8:00 AM", scaleEffect: 0.5, backgroundColor: .green)
        
    }
    
}


struct CustomDateView: View {
    
    let month: String
    let day: String
    let time: String
    let scaleEffect: CGFloat
    let backgroundColor: Color
    
    internal init(month: String, day: String, time: String, scaleEffect: CGFloat = 1.0, backgroundColor: Color = .clear) {
        
        self.month = month
        self.day = day
        self.time = time
        self.scaleEffect = scaleEffect
        self.backgroundColor = backgroundColor
        
    }
    
    
    var body: some View {
        
        VStack(spacing: 0.0) {
            
            Text(month)
                .font(.system(size: 25, design: .monospaced)).minimumScaleFactor(0.1)
            
            Image(systemName: "hexagon")
                .font(Font.system(size: 150, weight: Font.Weight.light))
                .rotationEffect(Angle(degrees: 90.0))
                .overlay(Text(day).font(.system(size: 70, design: .monospaced)).minimumScaleFactor(0.1))
            
            Text(time)
                .font(.system(size: 25, design: .monospaced)).minimumScaleFactor(0.1)
            
        }
        .padding((backgroundColor != Color.clear) ? 16.0 : 0.0)
        .background((backgroundColor != Color.clear) ? backgroundColor.opacity(0.5).cornerRadius(20.0) : nil)
        .scaleEffect(scaleEffect)
        .shadow(radius: 10.0)
        
    }
    
}

似乎使用 .scaleEffect() 修饰符并没有修改视图的框架，它保持并保持原始大小！用其他视图替换视图可能是一个问题，它会导致占用的 space 多于它需要的问题！因此，我以修改框架的方式更新了代码，以解决该问题！更多代码，新更新不会破坏旧 API，它解决了问题：

更新：

struct CustomDateView: View {
    
    let month: String
    let day: String
    let time: String
    let scaleEffect: CGFloat
    let backgroundColor: Color
    
    internal init(month: String, day: String, time: String, scaleEffect: CGFloat = 1.0, backgroundColor: Color = .clear) {
        
        self.month = month
        self.day = day
        self.time = time
        self.scaleEffect = ((scaleEffect > 0.0) && (scaleEffect <= 1.0)) ? scaleEffect : 1.0
        self.backgroundColor = backgroundColor
        
    }

    var body: some View {
        
        VStack(spacing: 0.0) {
            
            Text(month)
                .font(Font.system(size: 25.0*scaleEffect, design: Font.Design.monospaced))
            
            Image(systemName: "hexagon")
                .font(Font.system(size: 150.0*scaleEffect, weight: Font.Weight.light))
                .rotationEffect(Angle(degrees: 90.0))
                .overlay(Text(day).font(Font.system(size: 70.0*scaleEffect, design: Font.Design.monospaced)))
            
            Text(time)
                .font(Font.system(size: 25.0*scaleEffect, design: Font.Design.monospaced))
            
        }
        .padding((backgroundColor != Color.clear) ? 16.0*scaleEffect : 0.0)
        .background((backgroundColor != Color.clear) ? backgroundColor.opacity(0.5).cornerRadius(20.0*scaleEffect) : nil)
        .shadow(radius: 10.0)
  
    }
    
}

如何在 SwiftUI 中创建自定义动态形状？

How can I create a custom dynamic Shape in SwiftUI?

icons

symbols

shapes

swift

swiftui

更新：