如何解决为什么这个自定义形状会占据整个垂直空间?
我想知道为什么这个自定义形状,它只是一个字母模板,占据了整个视图空间??我从来没有画过一条需要那么多垂直空间的线,所以我想知道发生了什么。
这是它的外观示例。
您可以看到图像在垂直方向上几乎翻了一番。
这是形状及其父视图的代码
import SwiftUI
struct ParentView: View {
var body: some View {
vstack {
Spacer()
LetterPreviewShape()
}
}
}
struct LetterPreviewShape: Shape {
func path(in rect: CGRect) -> Path {
let startingPoint = CGPoint(x: rect.minX,y: rect.minY)
let paragraphStartingPoint = CGPoint(x: rect.maxX * 0.1,y: rect.maxY * 0.1)
var path = Path()
//Letter outline
path.move(to: startingPoint)
path.addLine(to: CGPoint(x: rect.maxX,y: rect.minY))
path.addLine(to: CGPoint(x: rect.maxX,y: rect.midY))
path.addLine(to: CGPoint(x: rect.minX,y: rect.midY))
path.closeSubpath()
//Greeting Line
path.move(to: CGPoint(x: rect.maxX * 0.1,y: rect.maxY * 0.07))
path.addLine(to: CGPoint(x: rect.maxX * 0.3,y: rect.maxY * 0.07))
//Body strokes
path.move(to: paragraphStartingPoint)
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.1))
path.move(to: CGPoint(x: rect.maxX * 0.1,y: rect.maxY * 0.11))
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.11))
path.move(to: CGPoint(x: rect.maxX * 0.1,y: rect.maxY * 0.12))
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.12))
path.move(to: CGPoint(x: rect.maxX * 0.1,y: rect.maxY * 0.13))
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.13))
path.move(to: CGPoint(x: rect.maxX * 0.1,y: rect.maxY * 0.14))
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.14))
path.move(to: CGPoint(x: rect.maxX * 0.1,y: rect.maxY * 0.15))
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.15))
path.move(to: CGPoint(x: rect.maxX * 0.1,y: rect.maxY * 0.16))
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.16))
//Signature Line
path.move(to: CGPoint(x: rect.maxX * 0.7,y: rect.maxY * 0.18))
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.18))
path.move(to: CGPoint(x: rect.maxX * 0.7,y: rect.maxY * 0.19))
path.addLine(to: CGPoint(x: rect.maxX * 0.9,y: rect.maxY * 0.19))
return path
}
}
解决方法
SwiftUI 中的
Shape
总是填充可用空间。它与您绘制内容的位置没有任何关系。
您也可以看到非自定义系统形状也复制了这种行为——如果您只使用 Rectangle
或 Circle
,它们也会填充可用空间。
要限制它,给它一个 frame
-- 如果您需要基于可用大小,可以将它与 GeometryReader
结合使用。
例如:
struct ContentView : View {
var body: some View {
GeometryReader { geometry in
VStack {
Spacer().frame(height: geometry.size.height / 2)
Rectangle().fill(Color.red).frame(height: geometry.size.height / 2)
}
}
}
}
,
Shape 没有自己的框架,所以你必须在外部给它一个(或者它填充所有可用的东西),比如
struct ParentView: View {
var body: some View {
VStack {
Spacer()
LetterPreviewShape()
.frame(height: 200) // << this goes in `func path(in rect: CGRect) -> Path`
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。