Colors according to the value of a variable

Question

Created Dec ’22

Replies 2

Boosts 0

Participants 2

Hello,

I code a surface application to present a prototype. I want the compatibility squares (currently green) to vary between green, yellow, orange and red depending on the value of the atribute Proposal.Compatibility .

Capture d’écran 2022-12-09 à 09.25.43.png

I have two documents for this:

the view layout

struct ProposalsView: View {
    
    var proposals: [Proposal] = ProposalList.TopTen

    var body: some View {

        ZStack{

            Color.black
                .opacity(0.85)
                .edgesIgnoringSafeArea(.all)

            ZStack{

                NavigationView{

                    VStack(spacing:0){

                        //List

                        List(proposals, id: \.id){ Proposal in

                            HStack{

                                Image(Proposal.ProfilePicture)
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width: 70, height: 70)
                                    .clipShape(Circle())

                                Spacer()
                                    .frame(width: 5)

                                VStack(alignment: .leading, spacing: 5){

                                    Text(Proposal.Name)
                                        .fontWeight(.semibold)
                                        .font(.system(size: 27))
                                        .lineLimit(1)
                                        .minimumScaleFactor(0.5)

                                    Text(Proposal.Age)
                                        .font(.system(size: 20))
                                }

                                // rectangle distance

                                ZStack{

                                    Rectangle()
                                        .fill(Color.blue)
                                        .frame(width: 45, height: 45)
                                        .cornerRadius(8)

                                    Rectangle()
                                        .fill(Color.white)
                                        .frame(width: 40, height: 40)
                                        .cornerRadius(6)

                                    VStack(spacing: -5){

                                        Text(Proposal.Distance)
                                            .fontWeight(.semibold)
                                            .font(.system(size: 23))
                                        
                                        Text(" kms")
                                            .font(.system(size: 10))
                                    }
                                    .foregroundColor(.blue)
                                }
                                .frame(maxWidth: .infinity, alignment: .trailing)

                                // rectangle compatibility
                                ZStack{

                                    Rectangle()
                                        .fill(Color.green)
                                        .frame(width: 45, height: 45)
                                        .cornerRadius(8)

                                    Text(Proposal.Compatibility)
                                        .font(.system(size: 24))
                                        .fontWeight(.semibold)
                                }
                            }
                        }
                        .background(Color.blue)
                        .padding(.horizontal, -20)
                    }
                }
                .hiddenNavigationBarStyle()
                .ignoresSafeArea()              
            }
        }
    }
}



struct ProposalsView_Previews: PreviewProvider {
    static var previews: some View {
        ProposalsView()
    }
}

the contact information.

    let id = UUID()
    let ProfilePicture: String
    let Name : String
    let Age : String
    let Description : String
    let Distance : String
    let Compatibility : String
}

struct ProposalList{
    static let TopTen = [

        Proposal( 
                 ProfilePicture: "John",
                 Name: "John",
                 Age: "24",
                 Description: "description",
                 Distance: "21",
                 Compatibility: "94")
]

I tried to change the compatibility from String to Int and create a variable with a return on the view, but I did not find the solution.

If you have an idea I would be grateful.

Thank you for reading and have a nice day.

Boost

Answer 1

BabyJ OP

Dec ’22

Accepted Answer

You can create a computed property in the Proposal struct that calculates and returns the corresponding colour for its Compatibility property.

Here is an example of what that could look like:

// When Compatibility is of type Int
var CompatibilityColor: Color {
    // Example of colour calculations
    // Obviously use your own method
    switch Compatibility {
        case 0..<25:
            return .red
        case 25..<50:
            return .orange
        case 50..<75:
            return .yellow
        case 75...100:
            return .green
        default:
            return .gray
    }
}

You can then access this colour property from within the UI, like this:

Rectangle()
    .fill(Proposal.CompatibilityColor)

1

Answer 2

-Pacman OP

Dec ’22

Thanks for your help!

The topic is closed 🤝

Capture d’écran 2022-12-09 à 21.57.57.png

0