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

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

我的 Swift 应用程序项目的一个方面是构建一个包含“帖子”的提要，正如我在此处概述的那样。

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

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

解决方法

你可以在这个项目中使用 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() 修饰符不会修改 View 的框架，而是保持并携带原始大小！用其他视图替换视图可能是一个问题，它会导致占用更多空间而不适合放置的问题！因此，我以修改框架的方式更新了代码以解决该问题！更多代码，新的更新不会破坏旧的 API，它解决了这个问题：

更新：

struct CustomDateView: View {
    
    let month: String
    let day: String
    let time: String
    let scaleEffect: CGFloat
    let backgroundColor: Color
    
    internal init(month: String,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)
  
    }
    
}