【发布时间】：2021-03-19 21:23:03
【问题描述】：
我有 2 个HStack 使用几何阅读器将它们均匀地分成 2 个部分，这些部分嵌入到 VStack 中，我正在尝试创建一个类似于下图的布局（iPad 上的横向模式）。
但是，我很难让HStack 像中间的网格会议一样排列。我还有一个NavigationView 侧边栏，它可以与HStacks 一起显示，因此理想情况下，这两个图像会改变宽度但保持它们的高度而不会挤压或拉伸图像。我曾尝试使用clipped() 来做到这一点。
下面的第二张图片是我运行代码时得到的。我已将此示例中的图像替换为 SFSymbol，以便于调试。
这是在我的ContentView 中调用的NavigationView 侧边栏：
struct SideBar: View {
var body: some View {
NavigationView {
List {
NavigationLink(destination: DetailView()) {
Label("Products", systemImage: "printer")
}
Label("Comparison", systemImage: "simcard.2")
Label("Search", systemImage: "magnifyingglass")
}
.listStyle(SidebarListStyle())
.navigationTitle("Navigation")
DetailView()
}
}
}
这是保存内容的主视图：
struct DetailView: View {
let title = "This is a title"
let paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
let image = "dot.squareshape.fill"
let intPadding: CGFloat = 10
let extPadding: CGFloat = 40
var body: some View {
VStack(spacing: 0){
GeometryReader { geometry in
HStack(alignment: .top, spacing: 0){
Image(systemName:image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width / 2)
.clipped()
VStack(alignment: .leading) {
Text(title)
.font(.custom("Avenir-Heavy", size: 30))
.multilineTextAlignment(.leading)
.padding(.leading, intPadding)
Text(paragraph)
.font(.custom("Avenir", size: 16))
.multilineTextAlignment(.leading)
.lineSpacing(10)
.padding(.leading, intPadding)
.padding(.trailing, extPadding)
}
.frame(width: geometry.size.width / 2)
}
}
GeometryReader { geometry in
HStack(alignment: .top, spacing: 0){
Text(paragraph)
.font(.custom("Avenir", size: 16))
.multilineTextAlignment(.leading)
.lineSpacing(10)
.frame(width: geometry.size.width / 2)
.padding(.top, intPadding)
.padding(.trailing, intPadding)
.padding(.leading, extPadding)
Image(systemName:image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width / 2)
.offset(x: -intPadding)
.clipped()
}
}
}
}
}
编辑：
黑色方块代表图像的去向，我没有放置黑色方块。所以上面提到的挤压和拉伸的想法应该看起来像下图，所以它实际上并没有拉伸或挤压图像只是边界框：
【问题讨论】：