SwiftUI如何实现Capsule填充仅到strokeBorder边界而非整个矩形

你可以直接修改background部分的实现，将填充色限制在Capsule形状内部即可，推荐两种实现方式：

方案1：fill + overlay描边（写法更简洁） #

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

原理是先对Capsule本身执行fill操作，填充色会严格限制在Capsule的轮廓内，再在其上层叠加同尺寸的Capsule描边，不会出现填充溢出矩形区域的问题。

方案2：ZStack分层实现 #

如果逻辑上想要更清晰区分填充层和描边层，可以用ZStack分层写：

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

两种方案最终实现效果完全一致，都可以满足搜索框的样式需求。

你之前的代码问题在于给strokeBorder返回的Capsule视图附加了矩形背景，没有把填充色限制在Capsule形状内部，才会出现填充溢出的情况。

内容的提问来源于stack exchange，提问作者SwiftUIRookie