SwiftUI实现半段背景效果的技术问题求助

你需要的是蓝色背景从顶部起始，延伸到下方圆角矩形区域的一半位置后直接截断，之前的两种尝试问题出在：

• 方案1：蓝色背景未设置顶部对齐，默认居中布局，导致背景卡在中间
• 方案2：使用线性渐变实现的是颜色过渡效果，而非纯色直接截断

修正后的代码 #

将你原代码中的GeometryReader部分替换为以下内容：

GeometryReader { geometry in
    ZStack(alignment: .top) { // 设置ZStack顶部对齐，确保元素从顶部开始布局
        // 蓝色背景：从顶部起始，高度占当前区域的一半，宽度拉满父容器
        Color.blue.opacity(0.25)
            .frame(height: geometry.size.height / 2, alignment: .top)
            .frame(maxWidth: .infinity)
        
        RoundedRectangle(cornerRadius: 10, style: .continuous)
            .fill(.white)
            .frame(height: 75)
            .clipped()
            .padding()
            .shadow(color: .black.opacity(0.5), radius: 8, x: 0, y: 8)
        
        HStack {
            NavigationLink(destination: StartPracticeQuestionView()) {
                Text("Button 1")
                    .foregroundColor(.white)
                    .frame(width: 150, height: 50)
                    .background(Color.blue)
                    .cornerRadius(10)
            }
            
            NavigationLink(destination: StartExamView()) {
                Text("Button 2")
                    .foregroundColor(.white)
                    .frame(width: 150, height: 50)
                    .background(Color.blue)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

关键修改说明 #

1. 给ZStack设置alignment: .top，统一内部元素的顶部对齐规则
2. 给蓝色背景添加.frame(maxWidth: .infinity)，确保背景宽度完全填充父容器
3. 给蓝色背景的高度frame指定alignment: .top，强制背景从顶部开始绘制，高度限定为当前区域的一半

修改后即可实现：蓝色背景从顶部（包含上方条形图的背景区域）一直延伸到下方按钮区域的一半位置，之后直接被白色圆角矩形覆盖，达到你需要的"中途截断"效果。

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