How to draw a rectangle to a specific area of the screen based on user search input?

user_14652401 0
Viewed 37

I am trying to make a program where the user enters a certain set of characters into the search bar (for example "AP1") and the program draws a rectangle on top of an image I have.

I will have a bunch of if statements testing what the user entered and giving the coordinates for where the rectangle will be drawn. I am just having trouble with the "scopes" and the ZStack and VStack for the image overlay not wanting to cooperate with how I have the if statement(s) set up. Here is my entire program:

This is my third day doing any type of iOS development

import SwiftUI

struct ContentView: View {
    
    private var listOfBins = binList
    @State var searchText = ""
    
    var body: some View {
        // MAP
        VStack {
            Image("map")
                .resizable()
                .scaledToFit()
                .position(x: 195, y: 175)
                .overlay(ImageOverlay(), alignment: .bottomTrailing)
            Spacer()
        }
        
        NavigationView {
            List {
                ForEach(bins, id: \.self) { bin in
                    HStack {
                        Text(bin.capitalized)
                            .textCase(.uppercase)
                        Spacer()
                        Image(systemName: "figure.walk")
                            .foregroundColor(Color.blue)
                    }
                    .padding()
                }
            }
            .searchable(text: $searchText)
            .navigationTitle("Bins")
            if (searchText.elementsEqual("AP1")) {
                drawBox(width: 50, height: 50, x: 50, y: 50)
            }
        }
    }
    
    func drawBox(width: Int, height: Int, x: Int, y: Int) -> Rectangle{
        struct ImageOverlay: View{
            var body: some View {
                ZStack {
                    Rectangle()
                        .fill(.green)
                        .frame(width: 100, height: 100)
                        .position(x: 200, y: 300)
                }
            }
        }
    }
        
    
    
    
    // DISPLAY LIST OF BINS AND SEARCH BAR
    var bins: [String] {
        let upBins = listOfBins.map {$0.uppercased()}
        return searchText == "" ? upBins : upBins.filter{
            $0.contains(searchText.uppercased())
        }
    }

    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
}
swiftui
1 Answers

Could not run your provided code, so I replicated a temp view.

Is this something you wanted? (code is below the image) enter image description here

struct SSContentView: View {
@State var searchText = ""
var images = ["Swift", "Ww", "Luffy"]
var body: some View {
    NavigationView {
        List {
            TextField("Search Here", text: $searchText)
            ForEach(0...5, id: \.self) { _ in
                ForEach(images, id: \.self) { image in
                    ZStack {
                        Image(image)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 50)
                            .overlay {
                                if searchText == image {
                                    OverlayImage
                                }
                            }
                    }
                }
            }
        }
        .navigationTitle("My Pictures")
    }
}
var OverlayImage: some View {
    ZStack {
        Rectangle()
            .fill(.clear)
            .frame(width: 60, height: 60)
            .border(.green)
    }
  }
}
user_167314010
Related