如何在 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() 修饰符不会修改 View 的框架，它会保持并保持原始大小！用其他视图替换视图可能是一个问题，并且会导致占用空间超出其需要的空间！因此，我以修改框架的方式更新了代码以解决该问题！更多关于代码，新的更新不会破坏旧的 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)
  
    }
    
}