SwiftUI - Capsule fill till StrokeBorder

user_14487210 0
Viewed 672

I'm trying to fill the capsuled strokeBorder but unfortunately it's filling the rectangle. See picture below:

enter image description here

Any ideas how I can make it fill till the strokeborder only? I'm wanting to use the field as search box which is why I want to use the textfield in it.

Here's my code:

struct ContentView: View {
    
    var body: some View {
        
        HStack{
            TextField("Search", text: .constant(""))
        }
        .padding()
        .frame(maxWidth:300)
        .background(
            Capsule()
                .strokeBorder(Color.black,lineWidth: 0.8)
                .background(Color.blue)
                .clipped()
        )
    }
}

Many Thanks!

swiftui background border
1 Answers

I think this is what you are after.

struct ContentView: View {

var body: some View {
    
    HStack{
        TextField("Search", text: .constant(""))
    }
    .padding()
    .frame(maxWidth:300)
    .background(
        Capsule()
            .strokeBorder(Color.black,lineWidth: 0.8)
            .background(Color.blue)
            .clipped()
    )
    .clipShape(Capsule())
    }
}

Xcode preview of HStack with capsule border

user_137537810
Related