TabItem + AsyncImage - image is extremly big

Question

I'm trying to load image async using AsyncImage - but the results is that the image is very big and covers all the screen.

        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)
            }
    }

Tried to put .frame bounds in every single place but the image is extremely big!

What am I doing wrong?

Thanks for assisting!

Answer 1

I solved this issue by using ZStack. Although it's tricky, but working completely.

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)
    }
}