HStack 和 TextField 的角半徑未更新

Question

這是我的內容視圖的代碼。 如您所見，我已經嘗試過使用 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)
            }
        }
    }
}

這就是預覽的樣子，在所有情況下：角半徑無法在預覽中顯示

Answer 1

問題在這里：

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

1. 您的文本字段有一個padding
2. padding后應用background
3. 在background之后添加另一個padding
4. 您在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
            }
        }
    }
}

結果：