HStack 和 TextField 的角半径未更新答案

【问题标题】：Corner Radius of both HStack and TextField not updatingHStack 和 TextField 的角半径未更新
【发布时间】：2021-06-24 06:29:29
【问题描述】：

这是我的内容视图的代码。如您所见，我已经尝试使用 HStack 来包含 TextField，以及仅包含 TextField 本身。角半径对灰色搜索矩形没有任何影响 - 边缘仍然是完美的矩形。

    
    @State var searchText = ""
    var body: some View {
        ZStack {
            //function that's the content argument to ZStack
            Color((.systemGreen))
            VStack {
                Text("App")
                    .font(.largeTitle)
                    .foregroundColor(Color.white)
                //HStack {
                TextField("Searchstring", text: $searchText)
                    .padding()
                    .background(Color(.systemGray6))
                    .padding()
                    .cornerRadius(12)
                //}
//                .padding()
//                .background(Color(.systemGray6))
//                .padding(.horizontal)
//                .cornerRadius(12)
            }
        }
    }
}

这就是预览的样子，在所有情况下： corner radius fails to show in preview

【问题讨论】：

标签： swift swiftui contentview

【解决方案1】：

问题出在这里：

.padding() /// 1.
.background(Color(.systemGray6)) /// 2.
.padding() /// 3.
.cornerRadius(12) /// 4.

您的文本字段有一个padding
background 在padding 之后被应用
在background 之后添加另一个padding
您在padding 之上应用另一个cornerRadius

因此，被舍入的是 padding，而不是 background。

相反，您想在background 之后立即应用cornerRadius。

struct ContentView: View {
    @State var searchText = ""
    var body: some View {
        ZStack {
            //function that's the content argument to ZStack
            Color((.systemGreen))
            VStack {
                Text("App")
                    .font(.largeTitle)
                    .foregroundColor(Color.white)
                
                TextField("Searchstring", text: $searchText)
                    .padding()
                    .background(Color(.systemGray6))
                    .cornerRadius(12) /// corner radius immediately after the background
                    .padding() /// extra padding outside the background
            }
        }
    }
}

结果：

【讨论】：