如何在不影响指示器的前提下为ScrollView设置圆角？

问题 #

在SwiftUI代码中，希望滚动指示器保留在UI中但不显示背景，同时去除ScrollView四个多余的边角。当前尝试裁剪ScrollView时，虽然能消除左侧多余UI，但由于行元素右侧有内边距，clipShape会作用于指示器而非多余UI。如何在保留现有UI样式的同时去除这些不必要的边角部分？

原代码如下：

import SwiftUI

struct ContentView: View {
    private let layoutMargin: CGFloat = 5.0
    private let cornerRadius: CGFloat = 5.0
    var body: some View {

        ScrollView(showsIndicators: true) {
            VStack(spacing: layoutMargin) {
                ForEach(0..<20, id: \.self) { value in
                    
                    RoundedRectangle(cornerRadius: cornerRadius)
                        .fill(Color.white)
                        .frame(height: 20.0)
                    
                }

            }
            .padding(layoutMargin)
            .padding(.trailing)

        }
        .background(
            
            Color.blue
                .clipShape(RoundedRectangle(cornerRadius: layoutMargin + cornerRadius))
                .padding(.trailing)
        )
        .padding()
        
    }
}

问题界面截图：

解决方案 #

核心思路是通过分层管理背景与ScrollView，调整裁剪范围让内容与圆角完美匹配，同时不影响滚动指示器的正常显示。修改后的代码如下：

import SwiftUI

struct ContentView: View {
    private let layoutMargin: CGFloat = 5.0
    private let cornerRadius: CGFloat = 5.0
    var body: some View {
        ZStack {
            // 底层背景：裁剪圆角后添加右侧内边距，匹配ScrollView内容偏移
            Color.blue
                .clipShape(RoundedRectangle(cornerRadius: layoutMargin + cornerRadius))
                .padding(.trailing)
            
            ScrollView(showsIndicators: true) {
                VStack(spacing: layoutMargin) {
                    ForEach(0..<20, id: \.self) { value in
                        RoundedRectangle(cornerRadius: cornerRadius)
                            .fill(Color.white)
                            .frame(height: 20.0)
                    }
                }
                .padding(layoutMargin)
                .padding(.trailing)
            }
            // 裁剪ScrollView内容区域，消除多余边角，不影响外部的滚动指示器
            .clipShape(RoundedRectangle(cornerRadius: layoutMargin + cornerRadius))
            .padding(.trailing)
        }
        .padding()
    }
}

关键改动说明：

• 用ZStack分层：背景置于底层，ScrollView在上层，避免背景被ScrollView的裁剪逻辑干扰
• 给ScrollView添加clipShape：直接裁剪内部内容区域至目标圆角，多余边角被消除，而原生滚动指示器因处于内容区域外，不受该裁剪影响
• 保持背景与ScrollView的padding(.trailing)一致：确保视觉对齐，完全保留原有UI样式

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