Xcode模拟器中的垂直方向和横向方向不同

Question

当我运行代码并启动模拟器时，垂直方向看起来不错，但当我转到横向方向时，显示中的名称会被剪切。

import SwiftUI
struct ContentView: View {
@Environment(.horizontalSizeClass) var hSizeClass
@Environment(.verticalSizeClass) var vSizeClass
var body: some View {
if hSizeClass == .compact && vSizeClass == .regular {
compactDesign()
}else {
regularDesign()
}
} }
struct compactDesign: View {
var body: some View{
ZStack {
Color.green.edgesIgnoringSafeArea(.all)
VStack(){
Image("Icono")
.resizable()
.frame(width: 80, height: 80, alignment: .center)
.clipShape(Circle())
Text("María Ramirez")
.font(.largeTitle)
.foregroundColor(.white)
.bold()
Text("Calle #123")
.foregroundColor(.white).font(.title).italic()
}
}
} }
struct regularDesign: View {
var body: some View{
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
HStack(){
Image("Icono")
.resizable()
.frame(width: 80, height: 80, alignment: .center)
VStack(alignment: .leading, spacing: 10){
Text("María Ramirez")
.font(.largeTitle)
.foregroundColor(.white)
.bold()
.clipShape(Circle())
Text("Calle #123")
.foregroundColor(.white).font(.title).italic()
}
}
}
} }
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
} }

Answer 1

您需要小心使用修饰符。您将.clipShape()设置为Text()，而不是Image。此外，还要与您的代码保持一致。如果在一行上链接修改器，则在其他行上执行相同操作。如果你把它们分别放在不同的线上，就把它们放在不同线上。它使您的代码更易于遵循。最后，当用我们没有的图像发布这样的代码时，用Rectangle()代替它，这样更容易自己运行。

struct regularDesign: View {
var body: some View{
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
HStack {
Image("Icono")
.resizable()
.frame(width: 80, height: 80, alignment: .center)
.clipShape(Circle()) // <- To here
VStack(alignment: .leading, spacing: 10){
Text("María Ramirez")
.font(.largeTitle)
.foregroundColor(.white)
.bold()
//.clipShape(Circle()) <- Move This
Text("Calle #123")
.foregroundColor(.white)
.font(.title)
.italic()
}
}
}
}
}