如何在嵌套Scroll View的VStack中用Geometry Reader添加自定义滚动视图？

当横向ScrollView嵌套在纵向ScrollView的VStack中时，高度被挤压主要有两个原因：

• 纵向ScrollView的布局逻辑会优先让子视图占用最小必要高度，横向ScrollView若无明确高度约束会被压缩
• AsyncImage在加载完成前没有固有尺寸，会导致横向滚动视图的高度进一步塌陷

以下是可行的解决方案：

1. 给AsyncImage设置明确尺寸 #

无论是占位符还是加载完成后的图片，都设置固定的宽高，确保横向滚动视图有稳定的高度参考：

AsyncImage(url: imageUrl) { phase in
    switch phase {
    case .empty:
        Color.gray.frame(width: 200, height: 150) // 占位符固定尺寸
    case .success(let image):
        image
            .resizable()
            .scaledToFill()
            .frame(width: 200, height: 150) // 图片固定尺寸
            .clipped()
    case .failure:
        Color.red.frame(width: 200, height: 150) // 失败占位符
    @unknown default:
        EmptyView()
    }
}

2. 让横向ScrollView自适应高度 #

给横向ScrollView添加fixedSize(horizontal: false, vertical: true)，强制它根据内容的垂直高度确定自身高度，避免被纵向ScrollView挤压：

ScrollView(.horizontal, showsIndicators: false) {
    LazyHStack(spacing: 16) {
        // 图片列表...
    }
    .padding(.horizontal)
}
.fixedSize(horizontal: false, vertical: true)

3. 添加自定义滚动条 #

通过overlay在横向滚动视图底部添加自定义滚动条，注意不要影响主内容布局：

.overlay(alignment: .bottom) {
    ScrollIndicatorView()
}

// 自定义滚动条实现
struct ScrollIndicatorView: View {
    @State private var scrollProgress: CGFloat = 0
    
    var body: some View {
        GeometryReader { proxy in
            Color.blue
                .frame(width: proxy.size.width * scrollProgress, height: 4)
                .cornerRadius(2)
                .padding(.horizontal)
                .onAppear {
                    // 实际开发中可通过PreferenceKey监听ScrollView滚动偏移，计算scrollProgress
                    // 示例简化处理，可根据需求完善
                }
        }
        .frame(height: 8)
    }
}

完整使用示例 #

将自定义横向滚动视图嵌套到纵向ScrollView的VStack中：

struct ContentView: View {
    let imageUrls: [URL] = [
        URL(string: "https://picsum.photos/200/150")!,
        URL(string: "https://picsum.photos/200/151")!,
        URL(string: "https://picsum.photos/200/152")!
    ]
    
    var body: some View {
        ScrollView {
            VStack(spacing: 24) {
                Text("横向图片滚动区")
                    .font(.title)
                
                HorizontalImageScrollView(imageUrls: imageUrls)
                
                Text("下方内容区域")
                    .font(.body)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.gray.opacity(0.1))
            }
            .padding()
        }
    }
}

struct HorizontalImageScrollView: View {
    let imageUrls: [URL]
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 16) {
                ForEach(imageUrls, id: \.self) { url in
                    AsyncImage(url: url) { phase in
                        switch phase {
                        case .empty:
                            Color.gray.frame(width: 200, height: 150)
                        case .success(let image):
                            image
                                .resizable()
                                .scaledToFill()
                                .frame(width: 200, height: 150)
                                .clipped()
                        case .failure:
                            Color.red.frame(width: 200, height: 150)
                        @unknown default:
                            EmptyView()
                        }
                    }
                }
            }
            .padding(.horizontal)
        }
        .fixedSize(horizontal: false, vertical: true)
        .overlay(alignment: .bottom) {
            ScrollIndicatorView()
        }
    }
}

关键注意事项 #

• 如果需要动态适配图片高度（而非固定值），可在AsyncImage加载完成后获取图片的固有尺寸，再动态设置框架
• 监听滚动进度时，推荐使用PreferenceKey捕获ScrollView的滚动偏移量，这样能更精准地控制自定义滚动条的位置和宽度

内容的提问来源于stack exchange，提问作者ashima passi