我一直在尝试制作一个带有HStack
和Image
的视图,Image
设置为可通过aspectRatio
的.fill
调整大小。它以某种方式破坏了所有框架并在布局中引入了空间
例如,上面的屏幕截图的顶部有多余的空白。我尝试过手动设置HStack图像的帧,但是即使高度正确,它们仍会从顶部偏移一定的距离。我如何摆脱它?
正文代码:
var body: some View {
ZStack {
Color(#colorLiteral(red: 0.09019607843, green: 0.09411764706, blue: 0.1333333333, alpha: 1))
HStack {
Image("onboardingOrnament").resizable()
.aspectRatio(contentMode: .fill)
.frame(height: UIScreen.main.bounds.height)
Spacer()
VStack() {
VStack(spacing: 20) {
Text("INSTATOOL")
.font(.custom("Ubuntu-Medium", size: 28))
.foregroundColor(.white)
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
.font(.custom("AvenirNextCyr-Medium", size: 14))
.foregroundColor(Color(#colorLiteral(red: 0.4823529412, green: 0.4980392157, blue: 0.6196078431, alpha: 1)))
}
.padding(.top, 100)
Spacer()
Button(action: {
self.viewController?.present(style: .fullScreen, transitionStyle: .coverVertical) {
DashboardView()
}
}) {
ZStack() {
HStack() {
Text("NEXT")
.font(.custom("AvenirNextCyr-Demi", size: 16))
.foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
Image("arrowOnboarding")
.resizable()
.frame(width: 14, height: 6)
.foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
}
}
}
.frame(width: 190, height: 50)
.background(Color(#colorLiteral(red: 1, green: 0.6745098039, blue: 0.1882352941, alpha: 1)))
.cornerRadius(10)
Spacer().frame(height: 50)
}
}
}
}
最佳答案
我假设您想扩展到安全区域之外,例如
var body: some View {
ZStack {
Color(#colorLiteral(red: 0.09019607843, green: 0.09411764706, blue: 0.1333333333, alpha: 1))
HStack {
Image("test1").resizable()
.aspectRatio(contentMode: .fill)
// .frame(height: UIScreen.main.bounds.height) // << wrong !!
// ... other content
}.edgesIgnoringSafeArea(.all) // << this one !!
}