添加帧中断 .clipShape() SwiftUI
Adding a frame breaks .clipShape() SwiftUI
所以我将图像加载到名为 'RemoteImage' 的自定义结构中,该结构接收 URL 并将其加载到 SwiftUI Image() 中。出于某种原因,当我在 RemoteImage() 上使用 .clipShape() 时,它会将形状剪裁成圆形(虽然这是错误的 width/height,但是当我将 .frame() 设置为所需的 width/height,图像显示正确 width/height 但不再是圆形。不知道如何解决:
RemoteImage(url: image)
.clipShape(Circle())
.frame(width: 82, height: 82)
struct RemoteImage: View {
private enum LoadState {
case loading, success, failure
}
private class Loader: ObservableObject {
var data = Data()
var state = LoadState.loading
init(url: String) {
guard let parsedURL = URL(string: url) else {
fatalError("Invalid URL: \(url)")
}
URLSession.shared.dataTask(with: parsedURL) { data, response, error in
if let data = data, data.count > 0 {
self.data = data
self.state = .success
} else {
self.state = .failure
}
DispatchQueue.main.async {
self.objectWillChange.send()
}
}.resume()
}
}
@StateObject private var loader: Loader
var loading: Image
var failure: Image
var body: some View {
selectImage()
.resizable()
}
init(url: String, loading: Image = Image(""), failure: Image = Image(systemName: "multiply.circle")) {
_loader = StateObject(wrappedValue: Loader(url: url))
self.loading = loading
self.failure = failure
}
private func selectImage() -> Image {
switch loader.state {
case .loading:
return loading
case .failure:
return failure
default:
if let image = UIImage(data: loader.data) {
return Image(uiImage: image)
} else {
return failure
}
}
}
}
工作正常,Xcode 13.3 / iOS 15.4,但是 clipShape 更适合在 帧之后应用。
假设您只想要纵横比
var body: some View {
selectImage()
.resizable()
.aspectRatio(contentMode: .fit) // << here !!
}
所以我将图像加载到名为 'RemoteImage' 的自定义结构中,该结构接收 URL 并将其加载到 SwiftUI Image() 中。出于某种原因,当我在 RemoteImage() 上使用 .clipShape() 时,它会将形状剪裁成圆形(虽然这是错误的 width/height,但是当我将 .frame() 设置为所需的 width/height,图像显示正确 width/height 但不再是圆形。不知道如何解决:
RemoteImage(url: image)
.clipShape(Circle())
.frame(width: 82, height: 82)
struct RemoteImage: View {
private enum LoadState {
case loading, success, failure
}
private class Loader: ObservableObject {
var data = Data()
var state = LoadState.loading
init(url: String) {
guard let parsedURL = URL(string: url) else {
fatalError("Invalid URL: \(url)")
}
URLSession.shared.dataTask(with: parsedURL) { data, response, error in
if let data = data, data.count > 0 {
self.data = data
self.state = .success
} else {
self.state = .failure
}
DispatchQueue.main.async {
self.objectWillChange.send()
}
}.resume()
}
}
@StateObject private var loader: Loader
var loading: Image
var failure: Image
var body: some View {
selectImage()
.resizable()
}
init(url: String, loading: Image = Image(""), failure: Image = Image(systemName: "multiply.circle")) {
_loader = StateObject(wrappedValue: Loader(url: url))
self.loading = loading
self.failure = failure
}
private func selectImage() -> Image {
switch loader.state {
case .loading:
return loading
case .failure:
return failure
default:
if let image = UIImage(data: loader.data) {
return Image(uiImage: image)
} else {
return failure
}
}
}
}
工作正常,Xcode 13.3 / iOS 15.4,但是 clipShape 更适合在 帧之后应用。
假设您只想要纵横比
var body: some View {
selectImage()
.resizable()
.aspectRatio(contentMode: .fit) // << here !!
}