为什么 frame 修饰符在附加到 nil 图像时仍然影响其他视图?
Why does the frame modifier still affect other views when attached to nil image?
self.imagesViewModel.allImages[post.imageContentURL]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
.clipShape(Rectangle())
.shadow(radius: 1)
当返回的图像值为 nil
时,这段代码应该做的是什么。但无论出于何种原因,.frame
修饰符仍会影响滚动视图内的其他元素。它最终会在物理上阻碍导航链接,但在视觉上不会。
我已经确认删除 .frame
后,一切都按我的预期进行。但是我需要对图像进行限制,所以我不能没有这种东西。
我试过将代码放在 if 语句中以检查 nil
并仅在返回图像时显示,但这没有用。此代码的其他变体也不起作用。
if self.imagesViewModel.allImages[post.imageContentURL] != nil {
self.imagesViewModel.allImages[post.imageContentURL]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171)
.clipShape(Rectangle())
.shadow(radius: 1)
}
我也试过将最小值设置为零,但没有成功。
我想知道这是否与我使用 Xcode 12 beta 5 或使用新的 SwiftUI 应用程序生命周期有关。当我 运行 我的 iPhone (iOS 14) 上的代码时,我得到了相同的物理障碍,但在滚动视图元素之间添加了额外的视觉间距。
这是我的代码的简化版本,它复制了我的问题:
import SwiftUI
import Combine
struct Post: Codable, Identifiable {
var id: Int
var text: String
var imageContentURL: String?
}
class PostsViewModel: ObservableObject {
@Published var posts: [Post] = []
}
class ImagesViewModel: ObservableObject {
@Published var allImages: [String?: Image] = [:]
}
/// The View of the content displayed in Home
struct PostLayout: View {
@EnvironmentObject var imagesViewModel: ImagesViewModel
var post: Post
init(post: Post) {
self.post = post
}
var body: some View {
VStack {
// This is the navigation link that gets obstructed
NavigationLink(destination: SomeOtherView()) {
Image(systemName: "circle.fill")
.resizable()
.frame(width: 48, height: 48)
.clipShape(Circle())
}
Text(self.post.text)
// MARK: This is the problem code, border added for clarity
self.imagesViewModel.allImages[self.post.imageContentURL]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171)
.clipShape(Rectangle())
.shadow(radius: 1)
.border(Color.black, width: 1)
}
.border(Color.black, width: 1)
}
}
/// View that is navigated to from Home
struct SomeOtherView: View {
var body: some View {
Text("SomeOtherView")
}
}
/// Main displayed view
struct Home: View {
@EnvironmentObject var postsViewModel: PostsViewModel
@EnvironmentObject var imagesViewModel: ImagesViewModel
var body: some View {
NavigationView {
ScrollView {
ForEach(self.postsViewModel.posts) { post in
PostLayout(post: post)
}
}
.onAppear() {
// All displayed content created here
var post1 = Post(id: 0, text: "Content")
let post2 = Post(id: 1, text: "Content")
var post3 = Post(id: 2, text: "Content")
let post4 = Post(id: 3, text: "Content")
let imageURL = "someImageURL"
self.imagesViewModel.allImages[imageURL] = Image(systemName: "circle")
// Only two posts are supposed to have an imageURL
post1.imageContentURL = imageURL
post3.imageContentURL = imageURL
self.postsViewModel.posts.append(contentsOf: [post1, post2, post3, post4])
}
.navigationTitle("Home")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Home()
.environmentObject(PostsViewModel())
.environmentObject(ImagesViewModel())
}
}
您已经注意到 .frame
修饰符不是 Image-specific。即使图片是 nil
.
也能正常工作
您可以做的是检查 Image
是否可以加载。您可以使用 UIImage(named:)
(returns 可选):
@ViewBuilder
var body: some View {
if UIImage(named: "imageName") != nil {
Image("imageName")
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
...
}
}
或者,或者:
@ViewBuilder
var body: some View {
if imagesViewModel.allImages[post.imageContentURL] != nil {
imagesViewModel.allImages[post.imageContentURL]!
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
...
}
}
编辑
字典中不需要可选的 String?
。只需将其替换为:
@Published var allImages: [String: Image] = [:]
然后使用if
语句检查图片是否为nil(在Xcode12中你也可以使用if-let
):
if self.post.imageContentURL != nil {
self.imagesViewModel.allImages[self.post.imageContentURL!]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171)
.clipShape(Rectangle())
.shadow(radius: 1)
.border(Color.black, width: 1)
}
可能是实际图像有问题,但 Image
类型的 SwiftUI 视图存在。 Image
比 UIImage
更像 UIImageView
,尽管将其视为其中之一确实没有帮助。您可能想要的是:
var body: some View {
if imageView == nil {
EmptyView()
} else {
imageView?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
.clipShape(Rectangle())
.shadow(radius: 1)
.border(Color.black)
}
}
您可以简单地使用 if-let (Xcode 12+):
if let image = self.imagesViewModel.allImages[post.imageContentURL]? {
image
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
.clipShape(Rectangle())
.shadow(radius: 1)
}
原来问题与nil
或框架修饰符无关。
图像实际上无形地延伸到 .clipShape(Rectangle())
的边界之外,并且挡住了 NavigationLink。解决方案是结合使用 .contentShape()
和 .clipped
.
self.imagesViewModel.allImages[self.post.imageContentURL]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171)
.contentShape(Rectangle())
.clipped()
.shadow(radius: 1)
我从 post 中发现了这个答案:
self.imagesViewModel.allImages[post.imageContentURL]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
.clipShape(Rectangle())
.shadow(radius: 1)
当返回的图像值为 nil
时,这段代码应该做的是什么。但无论出于何种原因,.frame
修饰符仍会影响滚动视图内的其他元素。它最终会在物理上阻碍导航链接,但在视觉上不会。
我已经确认删除 .frame
后,一切都按我的预期进行。但是我需要对图像进行限制,所以我不能没有这种东西。
我试过将代码放在 if 语句中以检查 nil
并仅在返回图像时显示,但这没有用。此代码的其他变体也不起作用。
if self.imagesViewModel.allImages[post.imageContentURL] != nil {
self.imagesViewModel.allImages[post.imageContentURL]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171)
.clipShape(Rectangle())
.shadow(radius: 1)
}
我也试过将最小值设置为零,但没有成功。
我想知道这是否与我使用 Xcode 12 beta 5 或使用新的 SwiftUI 应用程序生命周期有关。当我 运行 我的 iPhone (iOS 14) 上的代码时,我得到了相同的物理障碍,但在滚动视图元素之间添加了额外的视觉间距。
这是我的代码的简化版本,它复制了我的问题:
import SwiftUI
import Combine
struct Post: Codable, Identifiable {
var id: Int
var text: String
var imageContentURL: String?
}
class PostsViewModel: ObservableObject {
@Published var posts: [Post] = []
}
class ImagesViewModel: ObservableObject {
@Published var allImages: [String?: Image] = [:]
}
/// The View of the content displayed in Home
struct PostLayout: View {
@EnvironmentObject var imagesViewModel: ImagesViewModel
var post: Post
init(post: Post) {
self.post = post
}
var body: some View {
VStack {
// This is the navigation link that gets obstructed
NavigationLink(destination: SomeOtherView()) {
Image(systemName: "circle.fill")
.resizable()
.frame(width: 48, height: 48)
.clipShape(Circle())
}
Text(self.post.text)
// MARK: This is the problem code, border added for clarity
self.imagesViewModel.allImages[self.post.imageContentURL]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171)
.clipShape(Rectangle())
.shadow(radius: 1)
.border(Color.black, width: 1)
}
.border(Color.black, width: 1)
}
}
/// View that is navigated to from Home
struct SomeOtherView: View {
var body: some View {
Text("SomeOtherView")
}
}
/// Main displayed view
struct Home: View {
@EnvironmentObject var postsViewModel: PostsViewModel
@EnvironmentObject var imagesViewModel: ImagesViewModel
var body: some View {
NavigationView {
ScrollView {
ForEach(self.postsViewModel.posts) { post in
PostLayout(post: post)
}
}
.onAppear() {
// All displayed content created here
var post1 = Post(id: 0, text: "Content")
let post2 = Post(id: 1, text: "Content")
var post3 = Post(id: 2, text: "Content")
let post4 = Post(id: 3, text: "Content")
let imageURL = "someImageURL"
self.imagesViewModel.allImages[imageURL] = Image(systemName: "circle")
// Only two posts are supposed to have an imageURL
post1.imageContentURL = imageURL
post3.imageContentURL = imageURL
self.postsViewModel.posts.append(contentsOf: [post1, post2, post3, post4])
}
.navigationTitle("Home")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Home()
.environmentObject(PostsViewModel())
.environmentObject(ImagesViewModel())
}
}
您已经注意到 .frame
修饰符不是 Image-specific。即使图片是 nil
.
您可以做的是检查 Image
是否可以加载。您可以使用 UIImage(named:)
(returns 可选):
@ViewBuilder
var body: some View {
if UIImage(named: "imageName") != nil {
Image("imageName")
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
...
}
}
或者,或者:
@ViewBuilder
var body: some View {
if imagesViewModel.allImages[post.imageContentURL] != nil {
imagesViewModel.allImages[post.imageContentURL]!
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
...
}
}
编辑
字典中不需要可选的 String?
。只需将其替换为:
@Published var allImages: [String: Image] = [:]
然后使用if
语句检查图片是否为nil(在Xcode12中你也可以使用if-let
):
if self.post.imageContentURL != nil {
self.imagesViewModel.allImages[self.post.imageContentURL!]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171)
.clipShape(Rectangle())
.shadow(radius: 1)
.border(Color.black, width: 1)
}
可能是实际图像有问题,但 Image
类型的 SwiftUI 视图存在。 Image
比 UIImage
更像 UIImageView
,尽管将其视为其中之一确实没有帮助。您可能想要的是:
var body: some View {
if imageView == nil {
EmptyView()
} else {
imageView?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
.clipShape(Rectangle())
.shadow(radius: 1)
.border(Color.black)
}
}
您可以简单地使用 if-let (Xcode 12+):
if let image = self.imagesViewModel.allImages[post.imageContentURL]? {
image
.resizable()
.scaledToFill()
.frame(width: 343, height: 171, alignment: .center)
.clipShape(Rectangle())
.shadow(radius: 1)
}
原来问题与nil
或框架修饰符无关。
图像实际上无形地延伸到 .clipShape(Rectangle())
的边界之外,并且挡住了 NavigationLink。解决方案是结合使用 .contentShape()
和 .clipped
.
self.imagesViewModel.allImages[self.post.imageContentURL]?
.resizable()
.scaledToFill()
.frame(width: 343, height: 171)
.contentShape(Rectangle())
.clipped()
.shadow(radius: 1)
我从 post 中发现了这个答案: