TabItem + AsyncImage - 图像非常大答案

【问题标题】：TabItem + AsyncImage - image is extremly bigTabItem + AsyncImage - 图像非常大
【发布时间】：2021-10-19 13:22:27
【问题描述】：

我正在尝试使用 AsyncImage 异步加载图像 - 但结果是图像非常大并且覆盖了整个屏幕。

        TabView { 
         CreateView()
            .tabItem {
                Image(systemName: "plus.circle")
            }
        
         AccountView()
            .tabItem {
                let imageUrl = LoginManager.shared.profile!.profileImageUrl
                
                ZStack {
                    AsyncImage(url: URL(string: imageUrl)) { phase in
                        switch phase {
                        case .empty:
                            ProgressView()
                        case .success(let image):
                            image.resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(maxWidth: 56, maxHeight: 56)
                        case .failure:
                            Image(systemName: "person.circle")
                        @unknown default:
                            // Since the AsyncImagePhase enum isn't frozen,
                            // we need to add this currently unused fallback
                            // to handle any new cases that might be added
                            // in the future:
                            EmptyView()
                        }
                    }
                    .frame(width: 50, height: 50)
                }
                .frame(maxWidth: 56, maxHeight: 56)
            }
    }

试图在每个地方都设置 .frame 边界，但图像非常大！

我做错了什么？

感谢您的帮助！

【问题讨论】：

如果我错了，请纠正我，但.tabItem 不带标签吗？我知道你可以在没有Label init 的情况下初始化它，但在下面，我认为它只是一个标签。这可能是您问题的根源。
@Yrb 它需要一个标签，根据文档，您可以放置任何视图，并且它适用于显示系统图像的其他选项卡，只有带有 AsyncImage 的选项卡会导致问题。
这就是我的观点。您需要专注于如何将下载的图像放入标签中。您可能需要创建一个不同的视图，然后将其放入Label。 SF 符号（系统映像）被放入标签中。我已将自定义 SF 符号放入选项卡中，但从未放入图像。

标签： ios swiftui swiftui-tabview swiftui-asyncimage

【解决方案1】：

我通过使用 ZStack 解决了这个问题。虽然很棘手，但完全可以工作。

GeometryReader { geometry in
    ZStack(alignment: .bottomLeading) {
        TabView(selection: $myViewModel.tabSelection) {
            View0().tabItem {
                Image("image1")
                Text("image1")
            }.tag(0)
            View1().tabItem {
                Image("image2")
                Text("image2")
            }.tag(1)
            View2().tabItem {
                Text("AsyncImage image3 ")
            }.tag(2)
        }

        ZStack {
            Button(action: {
                myViewModel.tabSelection = 2
            }) {
                AsyncImage(url: URL(string: "https://sample.com/a.png")){ image in
                    image.resizable()
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.scaledToFit()
                                .clipShape(Circle())
                                .shadow(radius: 10)
                                .opacity(myViewModel.tabSelection == 2 ? 0.8 : 0.4)
                } placeholder: {
                    ProgressView()
                }
            }
            .frame(width: 30)
        }
        .offset(x: (geometry.size.width / 3 * 2 + geometry.size.width / 6 - 15), y: -15)
    }
}

【讨论】：