SwiftUI中HStack和TextField的cornerRadius设置后圆角不生效如何解决？

问题根因 #

SwiftUI 修饰符的执行顺序会直接影响最终渲染结果，你当前的代码中cornerRadius被添加在了外层padding之后，圆角裁剪作用于外层padding产生的透明边距区域，并未作用到灰色的systemGray6背景上，因此看不到圆角效果。

解决方法 #

方案1：单独使用TextField实现 #

调整修饰符的顺序即可：先设置内边距，再添加背景，之后设置圆角，最后加外层的布局边距。

@State var searchText = ""
var body: some View {
    ZStack {
        Color(.systemGreen)
            .ignoresSafeArea() // 可选配置，让绿色背景铺满全屏
        VStack {
            Text("App")
                .font(.largeTitle)
                .foregroundColor(.white)
            TextField("Searchstring", text: $searchText)
                .padding() // 文本框内容的内边距
                .background(Color(.systemGray6)) // 灰色背景
                .cornerRadius(12) // 裁剪背景圆角
                .padding() // 文本框外层的布局边距
        }
    }
}

方案2：HStack包裹实现（适合后续加搜索图标、清除按钮等扩展场景） #

@State var searchText = ""
var body: some View {
    ZStack {
        Color(.systemGreen)
            .ignoresSafeArea()
        VStack {
            Text("App")
                .font(.largeTitle)
                .foregroundColor(.white)
            HStack {
                // 可选：添加搜索图标优化体验
                Image(systemName: "magnifyingglass")
                    .foregroundColor(.gray)
                TextField("Searchstring", text: $searchText)
            }
            .padding()
            .background(Color(.systemGray6))
            .cornerRadius(12)
            .padding(.horizontal)
        }
    }
}

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