问题描述
我的 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)
}
}