SwiftUI 填充在 iPad(横向)中不起作用
SwiftUI Padding Not Working in iPad (Landscape Orientation)
这是我的 iPad 应用程序的预览。如何在 iPad 的纵向和横向方向上为我的图像(食物图像)添加填充?填充在纵向模式下效果很好,为什么它在横向模式下不起作用(顶部和底部填充)?
这是我的代码
struct ContentView: View {
var body: some View {
ZStack {
Image("bg_home")
.resizable()
.scaledToFill()
.opacity(0.3)
GeometryReader {
geo in
HStack(alignment: .center) {
Image("ketupat_home")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geo.size.width/2, height: geo.size.height * 0.95, alignment: .center)
.cornerRadius(30)
.padding()
VStack {
Text("Lorem Impsum Title")
.fontWeight(.bold)
.font(.system(size: 64))
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity, alignment: .center)
.padding(.leading, 10)
Text("(Lorem Ipsum Sub Title)")
.fontWeight(.medium)
.font(.system(size: 32))
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity, alignment: .center)
Button {
print("Let's Go")
} label: {
Text("Let's Go")
.frame(width: geo.size.width/4, height: 75, alignment: .center)
.font(.system(size: 32))
.background(.orange)
.foregroundColor(.white)
.cornerRadius(100)
}
.padding()
.cornerRadius(10)
Image(systemName: "speaker.slash.fill")
.resizable()
.frame(width: 40, height: 40, alignment: .center)
.padding()
}
}
.padding(.all, 32)
}
}
}
}
填充工作正常。你看不到边距的原因是图像溢出了它的框架,因为它太大并且修饰符 .aspectRatio(contentMode: .fill)
.
您可以将其更改为 .aspectRatio(contentMode: .fit)
但这会使图像变小以适合其容器。
您可以保留原始修饰符并在 aspectRatio 修饰符之后尝试 .clipped()
。
这是我的 iPad 应用程序的预览。如何在 iPad 的纵向和横向方向上为我的图像(食物图像)添加填充?填充在纵向模式下效果很好,为什么它在横向模式下不起作用(顶部和底部填充)?
这是我的代码
struct ContentView: View {
var body: some View {
ZStack {
Image("bg_home")
.resizable()
.scaledToFill()
.opacity(0.3)
GeometryReader {
geo in
HStack(alignment: .center) {
Image("ketupat_home")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geo.size.width/2, height: geo.size.height * 0.95, alignment: .center)
.cornerRadius(30)
.padding()
VStack {
Text("Lorem Impsum Title")
.fontWeight(.bold)
.font(.system(size: 64))
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity, alignment: .center)
.padding(.leading, 10)
Text("(Lorem Ipsum Sub Title)")
.fontWeight(.medium)
.font(.system(size: 32))
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity, alignment: .center)
Button {
print("Let's Go")
} label: {
Text("Let's Go")
.frame(width: geo.size.width/4, height: 75, alignment: .center)
.font(.system(size: 32))
.background(.orange)
.foregroundColor(.white)
.cornerRadius(100)
}
.padding()
.cornerRadius(10)
Image(systemName: "speaker.slash.fill")
.resizable()
.frame(width: 40, height: 40, alignment: .center)
.padding()
}
}
.padding(.all, 32)
}
}
}
}
填充工作正常。你看不到边距的原因是图像溢出了它的框架,因为它太大并且修饰符 .aspectRatio(contentMode: .fill)
.
您可以将其更改为 .aspectRatio(contentMode: .fit)
但这会使图像变小以适合其容器。
您可以保留原始修饰符并在 aspectRatio 修饰符之后尝试 .clipped()
。