SwiftUI实现ScrollView上下文本滚动淡入淡出（Xcode14.2/iOS16）

完全可以实现你需要的垂直方向透明渐变效果，你当前代码的核心问题是渐变方向设置错误（用了水平的leading/trailing），同时mask的布局尺寸也需要调整。

修改后的完整代码 #

ScrollView {
    ScrollViewReader { scrollViewProxy in
        VStack {        
            ForEach(chatMessages, id: \.id) { message in
                messageView(message: message)
            }
            .mask(
                VStack(spacing: 0) {
                    // 顶部渐变：从透明到不透明，垂直方向
                    LinearGradient(
                        gradient: Gradient(colors: [Color.black.opacity(0), Color.black]),
                        startPoint: .top,
                        endPoint: .bottom
                    )
                    .frame(height: 20) // 渐变高度，可根据需求调整

                    // 中间完全显示区域
                    Rectangle()
                        .fill(Color.black)
                        .frame(maxHeight: .infinity)

                    // 底部渐变：从不透明到透明，垂直方向
                    LinearGradient(
                        gradient: Gradient(colors: [Color.black, Color.black.opacity(0)]),
                        startPoint: .top,
                        endPoint: .bottom
                    )
                    .frame(height: 20) // 渐变高度，可根据需求调整
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity) // 确保mask和内容尺寸匹配
            )
        }
    }
}

关键改动说明 #

• 渐变方向调整：将渐变的startPoint和endPoint从水平的.leading/.trailing改为垂直的.top/.bottom，对应顶部和底部的渐变需求。
• mask布局优化：
  • 顶部和底部渐变设置固定height（比如20pt，可根据视觉需求调整），而非原来的width。
  • 中间的Rectangle使用frame(maxHeight: .infinity)，占据内容区域的剩余高度，保证中间部分内容完全显示。
  • 给整个mask的VStack添加frame(maxWidth: .infinity, maxHeight: .infinity)，确保mask的尺寸和ScrollView内的内容区域完全匹配。

效果说明 #

滚动ScrollView时，顶部的内容会随着向上滚动逐渐淡出（移出渐变区域后完全透明），底部的内容会随着向下滚动逐渐淡入（进入渐变区域后从透明变为完全显示），完全符合你需要的垂直渐变效果。

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