GeomtryReader + ScrollView SwiftUI

Question

我知道

GeometryReader

内的

ScrollView

效果不佳，因此可能的解决方案是将

ScrollView 

放入

GeometryReader

中。这就是我所做的。 我正在尝试整合一个不太复杂的视图，但面临一些问题。我有一个

ScrollView

和一个

geometry reader

:

        GeometryReader { proxy in
        let width = proxy.size.width / 3
        let offset = proxy.size.width / 2
        let half = proxy.size.width / 2
        let size = proxy.size
        ScrollView {
            userInfoView
            CustomTabBar()
            Spacer()
            userPhotos(width: width, half: half, size: size)
                .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
    }

在 userPhotos 中我得到了另一个 ScrollView：

            ScrollView(.horizontal) {
            LazyHStack(spacing: 0) {
                prepareUserMainPhotos(width: width)
                    .id(Tab.public)
                    .containerRelativeFrame(.horizontal)
                
                prepareCosplayUserPhotos(half: half)
                    .id(Tab.cosplay)
                    .containerRelativeFrame(.horizontal)
                    .task {
                        await viewModel.loadCosplayCharacters()
                    }
            }
            .scrollTargetLayout()
            .offsetX { value in
                let progress = -value / (size.width * CGFloat(Tab.allCases.count - 1))
                tabProgress = max(min(progress, 1), 0)
            }
            
        }
        .scrollPosition(id: $selectedTab)
        .scrollIndicators(.hidden)
        .scrollTargetBehavior(.paging)
        .scrollClipDisabled()

prepareUserMainPhotos

和

prepareCosplayPhotos

得到相同的代码：

                LazyVGrid(columns: columnsCosplay, spacing: 2) {
                ForEach(posts, id: \.id) { post in
                    CharacterAvatarView(
                        imageURL: "\(NetworkManager.heightResolutionDownloadUrl)\(post.avatarID)",
                        fandom: post.fandom,
                        frame: half
                    )
                    .onTapGesture {
                        viewModel.prepareCharacterCosplayFeed(withCharacter: post)
                    }
                }
            }
            .padding(.horizontal)

我遇到的问题是

ScrollView

获取 userPhotos 内第一个选项卡的最大

height

大小（

prepareUserMainPhotos(width: width)

）。当我滑动到第二个选项卡时，如果第二个选项卡比第一个选项卡大，我会遇到一些视觉问题：

Answer 1

恐怕我无法完全理解你的想法，但是，尝试通过 GeometryReader 设置帧大小有点奇怪。 GeometryReader主要用于读取尺寸。 相反，如果您想保持某些比例并定义框架，请考虑使用 UIScreen 创建视图框架。 例如：

UIScreen.main.bounds.size.width
UIScreen.main.bounds.size.height

对于每个设备，这些将是它们自己的值，可以根据您的喜好或通过 GeometryReader 计算的大小等轻松地相乘、除法等。 当然，此类视图中的图片最好具有调整大小修饰符。

PS 不过，你可以考虑一下设计。考虑所有视图的大小。图片尺寸。使用必要的修饰符覆盖图像表示，以便不同尺寸的图片呈现相同的外观。 然后，您将不需要使用 GeometryReader 和 UIScreen.main.bounds 创建任何内容，您的主视图本身将采用您需要的形式，只需最少的设置。