Gradient Stop Locations at Variable Values SwiftUI - xcode

Question

I'm trying to make a gradient composed of 4 stops in SwiftUI. I'd like the middle two to be anchored to the bottom of a specific stack. Something like this:
Imgur Link of what I'm trying to do
Here's the gradient code I currently have:
LinearGradient(gradient: Gradient(stops: [
//top Gradient.Stop(color: Color(hue: 0.0, saturation: 0.0, brightness: 0.0, opacity: 0.0), location: 0.0),
//variable1 Gradient.Stop(color: Color(hue: 0.0, saturation: 0.0, brightness: 0.0, opacity: 0.3), location: 0.30 //<-Variable),
//variable2 Gradient.Stop(color: Color(hue: 0.0, saturation: 0.0, brightness: 0.0, opacity: 1.0), location: 0.35 //<-Variable),
//bottom Gradient.Stop(color: Color(hue: 0.1, saturation: 1.0, brightness: 0.0, opacity: 1.0), location: 1.0)),
startPoint: UnitPoint.top, endPoint: UnitPoint.bottom)

Answer 1

You can simply use the frame size of the "Content Box" to determine at what position to place the gradient stop. I did this by just having a variable called frameHeight.
import SwiftUI
struct ContentView: View {
let screenWidth = UIScreen.main.bounds.width
let screenHeight = UIScreen.main.bounds.height
var frameHeight = 200
var body: some View {
let gradient = Gradient(stops: [Gradient.Stop(color: .blue, location: 0.0),
Gradient.Stop(color: .white, location: CGFloat(frameHeight)/screenHeight),
Gradient.Stop(color: .black, location: CGFloat(frameHeight)/screenHeight + 0.05),
Gradient.Stop(color: .black, location: 1.0)])
VStack{
//Content Box view of frameHeight
VStack {
Text("Content Box")
}.frame(width: screenWidth, height: CGFloat(frameHeight))
Spacer()
}.frame(width: screenWidth, height: screenHeight)
.background(LinearGradient(gradient: gradient, startPoint: UnitPoint.top, endPoint: UnitPoint.bottom))
.edgesIgnoringSafeArea(.all)
}
}