Невозможно ввести текстовое поле

Question

Я создаю экран SignUp с использованием инфраструктуры SwiftUI.

У меня есть два текстовых поля, 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"))
    }
}

Answer 1

Shadow added on VStack creating problem. Pl check below code. I have comment shadow.

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"))
        }
    }
}

Answer 2

Кажется, что установка shadow после того, как эффекты цвета / непрозрачности вызывают проблемы в этом конкретном сценарии.

Чтобы убедиться, что эффекты компоновки отрисовывают до тени, вы можете добавить .compositingGroup() к вашему VStack - прямо перед shadow - и это решит проблему.

Документация говорит:

Группа компоновки создает эффекты компоновки в представлениях предков этого представления, такие как непрозрачность и режим наложения, вступают в силу до визуализации этого представления.

Измененный код :

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"))
        }

    }

}

Answer 3

в вашем коде нет действия для кнопки

@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: "your action function") {
                    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"))
  }
}