目標
我經常遇到這樣的情況，我想縮放影像，以便它按比例填充其容器而不修改其框架。在下面的第一個螢屏截圖中可以看到一個示例。容器視圖有一個固定的框架，如紅色邊框所示。影像本身具有不同的縱橫比。它被縮放以填充整個容器，但它仍然具有與容器相同的框架，因此不會影響容器的布局（大小）。
我的解決方案
我使用以下代碼來完成此操作：
struct ContentView: View {
var body: some View {
ImageContainerView()
.frame(width: 300, height: 140)
.border(.red, width: 2)
}
}
struct ImageContainerView: View {
var body: some View {
GeometryReader { geometry in
Image("image")
.resizable()
.aspectRatio(contentMode: .fill)
.border(.blue, width: 2)
.frame(width: geometry.size.width, height: geometry.size.height)
.clipped()
}
}
}
問題
如您所見，我使用幾何閱讀器手動設定影像的框架以匹配父視圖的框架。這感覺有點多余，因為影像已經從其父視圖隱式地接收到此資訊作為建議的大小。但是，如果我不以這種方式使用幾何閱讀器，則影像不會被剪裁，并且其框架與全尺寸影像匹配，而不是父視圖的框架。這顯示在下面的第二個螢屏截圖中。
問題
SwiftUI 中是否有一種（更“原生”）的方式來實作所需的行為，而無需使用幾何閱讀器？
uj5u.com熱心網友回復：
這是一種不使用GeometryReader. 通過使影像成為.overlay()另一個視圖的影像，該視圖可以使用.clipped()修飾符處理剪輯：
struct ContentView: View {
var body: some View {
ImageContainerView()
.frame(width: 300, height: 140)
.border(.red, width: 2)
}
}
struct ImageContainerView: View {
var body: some View {
Color.clear
.overlay (
Image("image")
.resizable()
.aspectRatio(contentMode: .fill)
.border(.blue, width: 2)
)
.clipped()
}
}
此外，傳入name影像的，以便ImageContainerView與其他影像一起重用。
uj5u.com熱心網友回復：
只需.clipped()從子視圖移動到父視圖。那就是您要剪切影像的位置：
struct ContentView: View {
var body: some View {
ImageContainerView()
.frame(width: 300, height: 140)
.border(.red, width: 2)
.clipped() // Here
}
}
struct ImageContainerView: View {
var body: some View {
Image("island")
.resizable()
.aspectRatio(contentMode: .fill)
.border(.blue, width: 2)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/507917.html