[Solved] Textfield with different borders in SwiftUI [closed]

by


I believe you can do it with a custom extension and view(code is below the image).
enter image description here

//main view
import SwiftUI

struct ContentView: View {
@State var text = ""
var body: some View {
    VStack {
        TextField("", text: $text)
            .frame(width: 200, height: 40)
            .border(width: 1, edges: [.bottom], color: .gray.opacity(0.4))
            .border(width: 1, edges: [.top, .leading, .trailing], color: .gray.opacity(0.07))
    }
}
}

//custom view
struct EdgeBorder: Shape {

var width: CGFloat
var edges: [Edge]

func path(in rect: CGRect) -> Path {
    var path = Path()
    for edge in edges {
        var x: CGFloat {
            switch edge {
            case .top, .bottom, .leading: return rect.minX
            case .trailing: return rect.maxX - width
            }
        }

        var y: CGFloat {
            switch edge {
            case .top, .leading, .trailing: return rect.minY
            case .bottom: return rect.maxY - width
            }
        }

        var w: CGFloat {
            switch edge {
            case .top, .bottom: return rect.width
            case .leading, .trailing: return self.width
            }
        }

        var h: CGFloat {
            switch edge {
            case .top, .bottom: return self.width
            case .leading, .trailing: return rect.height
            }
        }
        path.addPath(Path(CGRect(x: x, y: y, width: w, height: h)))
    }
    return path
}
}

//custom extension
extension View {
func border(width: CGFloat, edges: [Edge], color: Color) -> some View {
    overlay(EdgeBorder(width: width, edges: edges).foregroundColor(color))
}
}

for more info, please refer to this answer SwiftUI – Add Border to One Edge of an Image

solved Textfield with different borders in SwiftUI [closed]