Невозможно ввести TextField
Я создаю экран 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"))
}
}
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
1 060
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 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"))
}
}
}
Ответ принят как подходящий
Похоже, что установка shadow после эффектов цвета/непрозрачности вызывает проблемы в этом конкретном сценарии.
Чтобы убедиться, что эффекты композитинга отрисовывают до тень, вы можете добавить .compositingGroup() к VStack прямо перед shadow, и это решит проблему.
Документация говорит:
A compositing group makes compositing effects in this view’s ancestor views, like opacity and the blend mode, take effect before this view renders.
Измененный код:
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"))
}
}
}
Другие вопросы по теме
Swift — преобразование данных изображения в двоичное число
Преобразовать KeyValuePairs<String:String> в JSON
Как удалить разделители строк из списка в SwiftUI без использования ForEach?
Обновление счетчика значков панели вкладок из push-уведомлений, когда приложение находится на переднем плане
Выполнение перехода после фильтрации в uitableview
UIAppearance UILabel внутри UICollectionViewCell — выбрано/не выбрано
SwiftUI: лучший способ изменить метку TabbedView на основе NavigationBarTitle
Расширение идентифицируемого протокола для данных списка SwiftUI
Как сделать TextField выровненным по правому краю (конечный)
Почему у моего NSWindow есть панель инструментов? Как мне заставить его уйти?
Похожие вопросы
Преобразовать KeyValuePairs<String:String> в JSON
Как удалить разделители строк из списка в SwiftUI без использования ForEach?
Обновление счетчика значков панели вкладок из push-уведомлений, когда приложение находится на переднем плане
Выполнение перехода после фильтрации в uitableview
Расширение идентифицируемого протокола для данных списка SwiftUI
Как сделать TextField выровненным по правому краю (конечный)
AVPlayerItem может одновременно занимать только одну позицию в очереди игрока?
TextFieldDidBeginEditing и textFieldDidEndEditing в SwiftUI
Модуль «Firebase» не устанавливается
Как запустить действие при изменении состояния?
Я считаю, что это должен быть принятый ответ, потому что он позволяет оригинальному плакату по-прежнему достигать желаемого пользовательского интерфейса.