HomeiOS Developmentios - Partial background with SwiftUI

ios – Partial background with SwiftUI


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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments