Multiline-TextFields in SwiftUI 4

Neuerungen der WWDC 2022 – Teil 2

Textfelder auf Basis der TextField-View sind in SwiftUI bisher auf eine einzige Zeile beschränkt. Soll der Platz zur Eingabe von Text umfangreicher ausfallen, musste alternativ ein TextEditor herhalten.

Das ändert sich nun mit SwiftUI 4. TextField verfügt dann über einen optionalen Parameter namens axis. Setzt man für den die Option vertical, vergrößert sich das zugrundeliegende Textfeld automatisch, sobald der Platz für den Inhalt nicht mehr für eine Zeile ausreicht. Generell vergrößert sich das Textfeld dann so weit, wie der umgebende Container es erlaubt. Auch Text mit drei Zeilen und mehr ist dann direkt mithilfe einer TextField-Instanz umsetzbar.

struct ContentView: View {
    @State private var text = ""
    
    var body: some View {
        TextField("Text", text: $text, axis: .vertical)
    }
}

Optional lässt sich die unterstützte Zeilenzahl eines Textfelds begrenzen. In diesem Fall lassen sich zwar zusätzlich weitere Zeilen Text eingeben, um dann aber alle Inhalte sehen zu können, muss man innerhalb des Textfelds scrollen.

Um eine solche Zeilenbegrenzung festzulegen, nutzt man ergänzend zum axis-Parameter noch den lineLimit(_:)-Modifier und übergibt die maximale Zeilenzahl.

struct ContentView: View {
    @State private var text = ""
    
    var body: some View {
        TextField("Text", text: $text, axis: .vertical)
            .lineLimit(3)
    }
}

Über den lineLimit(_:)-Modifier lässt sich auch eine Range definieren. Der erste Wert entspricht dann der Mindestzeilenanzahl, der letzte der maximalen Zeilenzahl. Das Textfeld besitzt so von Beginn an die Größe, die über die Mindestzeilenzahl definiert ist, kann aber nicht über das festgelegte Maximum an Zeilen hinausgehen.

struct ContentView: View {
    @State private var text = ""
    
    var body: some View {
        TextField("Text", text: $text, axis: .vertical)
            .lineLimit(3...5)
    }
}

Fazit

Der Support für Multiline-TextFields in SwiftUI 4 ist ein kleines, aber ebenso enorm feines Update. Es schließt eine wichtige Lücke, wenn eine Zeile zur Texteingabe nicht ausreichend ist und der Einsatz eines TextEditor zu überdimensioniert ausfällt. Gleichzeitig ist der Einsatz solcher Multiline-TextFields erfreulich simpel; im einfachsten Fall reicht das Setzen des axis-Parameters. Zusätzliche Konfigurationsmöglichkeiten erhält man über den lineLimit(_:)-Modifier.

Euer Thomas

Weiterführende Links zum Artikel


Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert