无法输入文本字段

Posted 2023-02-23

【中文标题】无法输入文本字段

【英文标题】：Unable to type in TextField

【发布时间】：2019-06-12 03:06:29

【问题描述】：

我正在使用 SwiftUI 框架创建一个SignUp 屏幕。

我有两个文本字段，FirstName 和 LastName，还有一个按钮。

我将它们归为VStack。

当我运行应用程序时，按钮是可点击的，但我无法在文本字段中输入任何内容。

这是我的代码：

@State var firstName = ""
@State var lastName = ""
var body: some View 

    NavigationView 

        VStack 

            VStack 

                VStack 

                    Group 
                       TextField($firstName, placeholder: Text("First Name")).padding(10)
                    .background(Color.white).clipShape(RoundedRectangle(cornerRadius: 5))
                        .shadow(radius: 3)

                    Group 
                        TextField($lastName, placeholder: Text("Last Name")).padding(10)
                    .background(Color.white).clipShape(RoundedRectangle(cornerRadius: 5))
                        .shadow(radius: 3)

                    Button(action: 
                    ) 
                        Group 
                            Text("Create User").color(.white).padding(10)
                        .background(Color.blue).clipShape(RoundedRectangle(cornerRadius: 5))
                            .shadow(radius: 5)
                    
                .padding(12)
                .background(Color.gray)
                .shadow(radius: 5)

            .background(Color.gray)

        .navigationBarTitle(Text("Sign Up"))
    

【参考方案1】：

似乎在颜色/不透明度效果之后设置shadow 会导致此特定场景中的问题。

为确保合成效果在在阴影之前渲染，您可以将.compositingGroup() 添加到您的VStack - 就在shadow 之前 - 这样就解决了问题。

Documentation 说：

合成组使此视图的祖先视图中的合成效果（例如不透明度和混合模式）在此视图渲染之前生效。

修改后的代码：

VStack 
    // [...]  

.padding(12)
.background(Color.gray)
.compositingGroup() // THIS
.shadow(radius: 5)
.navigationBarTitle(Text("Sign Up"))

---

用户界面可以通过这种方式进一步简化 - 达到相同的效果。

struct ContentView: View 

    @State var firstName = ""
    @State var lastName = ""

    var body: some View 

        NavigationView 

            VStack 

                    TextField($firstName, placeholder: Text("First Name"))
                        .padding(10)
                        .background(Color.white)
                        .cornerRadius(5)
                        .shadow(radius: 3)

                    TextField($lastName, placeholder: Text("Last Name"))
                        .padding(10)
                        .background(Color.white)
                        .cornerRadius(5)
                        .shadow(radius: 3)

                    Button(action:  ) 
                        Text("Create User")
                            .color(.white)
                            .padding(10)
                            .background(Color.blue)
                            .cornerRadius(5)
                            .shadow(radius: 5)
                    
            
            .padding(12)
            .background(Color.gray)
            .compositingGroup()
            .shadow(radius: 5)
            .navigationBarTitle(Text("Sign Up"))
        

    

【讨论】：

我相信这应该是公认的答案，因为它允许原始发布者仍然实现他想要的 UI。

【参考方案2】：

在 VStack 创建问题上添加了阴影。请检查下面的代码。我已经把影子注释掉了。

struct ContentView: View 

    @State var firstName = ""
    @State var lastName = ""
    var body: some View 

        NavigationView 

            VStack 

                VStack 

                    VStack 

                        Group 
                            TextField($firstName, placeholder: Text("First Name")).padding(10)
                            .background(Color.black).clipShape(RoundedRectangle(cornerRadius: 5))
                            .shadow(radius: 3)

                        Group 
                            TextField($lastName, placeholder: Text("Last Name")).padding(10)
                            .background(Color.black).clipShape(RoundedRectangle(cornerRadius: 5))
                            .shadow(radius: 3)

                        Button(action: 
                            print("Button Tapped")
                        ) 
                            Group 
                                Text("Create User").color(.white).padding(10)
                                .background(Color.blue).clipShape(RoundedRectangle(cornerRadius: 5))
                                .shadow(radius: 5)
                        
                        .padding(12)
                        .background(Color.gray)
//                        .shadow(radius: 5)

                    .background(Color.gray)

                .navigationBarTitle(Text("Sign Up"))