Pole tekstowe
Część sekcji Wprowadzenie do SwiftUI ścieżki Swift w Coddy. Lekcja 24 z 50.
Element TextField pozwala użytkownikowi pisać. Wymaga tekstu zastępczego i powiązania ze stanem typu String:
@State private var name = ""
var body: some View {
VStack {
TextField("Your name", text: $name)
Text("Hello, \(name)!")
}
}$ w $name zamienia stan w powiązanie: dwukierunkowe połączenie. Pole wyświetla wartość name, a każdy znak wpisany przez użytkownika zapisuje się z powrotem w tej zmiennej. Tekst poniżej odczytuje ten sam stan, więc aktualizuje się przy każdym naciśnięciu klawisza.
.textFieldStyle(.roundedBorder) rysuje znane zaokrąglone obramowanie wokół pola.
Wyzwanie
ŁatwyPowitaj użytkownika po imieniu. Dodaj pole TextField z tekstem zastępczym Your name powiązane ze zmienną name i nadaj mu identyfikator name. Zachowaj tekst powitania, który po wpisaniu przez użytkownika Ada powinien brzmieć Hello, Ada!.
Spróbuj swoich sił
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Wprowadzenie do SwiftUI
10Projekt – Kawiarnia Coddy
Przegląd projektuEkrany napojów
Wybierz rozmiarIlość i sumaZłóż zamówienie2Wyświetlanie treści
Widoki tekstoweLiczby w tekścieCzcionkiKolorySF SymbolsPodsumowanie — metka z ceną5Stan i przyciski
PrzyciskiWłaściwość @StateStan prawda lub fałszWidoki warunkowePodsumowanie — licznik punktów6Dane wejściowe użytkownika
Pole tekstowePrzełącznikPrzyciski krokowe i suwakSelektorPodsumowanie – formularz zamówieniaPoćwicz samodzielnie: Edytor online SwiftUI