I’m making an attempt to attain a partial background in my SwiftUI undertaking. I’ve been fidgeting with this for some time now however can not seem to get precisely what i’m in search of. Within the prime of my view i’ve a bar chart, this has a blue background. Beneath i’ve a RoundedRectangle with two buttons. I need the background of the chart to proceed to beneath the RoundedRectangle, and minimize off half approach. I end in both of the 2 following:
- 1; The scale and coloration are right, nonetheless it’s caught within the center and that i can not seem to get it to begin on the prime consequence 1
- 2; The scale and site are right, however the coloration will not be what i would like. I need it to be absolutely blue till half after which minimize off. consequence 2
The code i used to get consequence 1 is the next:
Vstack(Spacing: 0) {
VStack {
HStack {
Textual content("Welcome again")
.font(.title)
.fontWeight(.daring)
.foregroundStyle(Colour.white)
Spacer()
Textual content("Picker quickly")
}
.padding()
Chart {
ForEach(subjectAverages.sorted { $0.spherical > $1.spherical }, id:.id_subject) { subjectAverage in
BarMark (
x: .worth("Vak", subjectAverage.code),
y: .worth("Gemiddelde rating", subjectAverage.spherical)
)
.foregroundStyle(
.linearGradient(
colours: [.blue, .yellow],
startPoint: .backside,
endPoint: .prime
)
)
.alignsMarkStylesWithPlotArea()
.clipShape(RoundedRectangle(cornerRadius: 16))
.annotation {
Textual content("(subjectAverage.spherical)%")
.font(.caption)
}
}
}
.body(top: 200)
.chartYAxis(.hidden)
.chartXAxis {
AxisMarks(stroke: (StrokeStyle(lineWidth: 0)))
}
.padding()
}
.background(Colour.blue.opacity(0.25))
GeometryReader { geometry in
ZStack {
Colour.blue.opacity(0.25)
.body(top: geometry.measurement.top / 2)
RoundedRectangle(cornerRadius: 10, model: .steady)
.fill(.white)
.body(top: 75)
.clipped()
.padding()
.shadow(coloration: .black.opacity(0.5), radius: 8, x: 0, y: 8)
HStack {
NavigationLink(vacation spot: StartPracticeQuestionView()) {
Textual content("Button 1")
.foregroundColor(.white)
.body(width: 150, top: 50)
.background(Colour.blue)
.cornerRadius(10)
}
NavigationLink(vacation spot: StartExamView()) {
Textual content("Button 2")
.foregroundColor(.white)
.body(width: 150, top: 50)
.background(Colour.blue)
.cornerRadius(10)
}
}
.padding()
}
}
}
For consequence 2 i switched the
Colour.blue.opacity(0.25)
.body(top: geometry.measurement.top / 2)
With:
LinearGradient(gradient: Gradient(colours: [.blue.opacity(0.25), .clear]), startPoint: .prime, endPoint: .backside)
I hope my query and rationalization is obvious. There may be in all probability a easy answer to this, however i simply have not discovered it. Thanks for taking the time to learn my put up!
