Scribd
Upload
8 views2 pages

Text Editor

The document describes how to create and style multi-line text fields and editable text fields using SwiftUI. It provides code examples for implementing a `TextEditor` for long-form text and a `TextField` for single-line input, along with customization options for appearance and behavior. Additionally, it highlights the use of view modifiers to define text styles such as color, font, and line spacing.

Uploaded by

jon.moses2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views2 pages

Text Editor

The document describes how to create and style multi-line text fields and editable text fields using SwiftUI. It provides code examples for implementing a `TextEditor` for long-form text and a `TextField` for single-line input, along with customization options for appearance and behavior. Additionally, it highlights the use of view modifiers to define text styles such as color, font, and line spacing.

Uploaded by

jon.moses2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Creates a multi-line text field.

Use a ``TextEditor`` instance to create a view in which users can enter


and edit long-form text.

In this example, the text editor renders gray text using the `13`
point Helvetica Neue font with `5` points of spacing between each line:

struct TextEditingView: View {


@State private var fullText: String = "This is some editable text..."

var body: some View {


TextEditor(text: $fullText)
.foregroundColor(Color.gray)
.font(.custom("HelveticaNeue", size: 13))
.lineSpacing(5)
.padding()
}
}

![A screenshot displaying a keyboard on the lower half of the screen with
text that reads "This is some editable text..." which has a style applied
such that the font is Helvetica Neue with a large 13 pt.](texteditor-2.png)

You can define the styling for the text within the view, including the
text color, font, and line spacing. You define these styles by applying
standard view modifiers to the view.

- Parameter text: A ``Binding`` to the variable containing the


text to edit.
The content and behavior of the view.
The type of view representing the body of this view.

When you create a custom view, Swift infers this type from your
implementation of the required `body` property.
A view for editable text.

`TextField` provides an interface to display and modify editable text.

You create a text field with a label and a binding to a value. If the
value is a string, the text field updates this value continuously as the
user types or otherwise edits the text in the field. For non-string types,
it updates the value when the user commits their edits, such as by pressing
the Return key.

The text field also allows you to provide two closures that customize its
behavior. The `onEditingChanged` property informs your app when the user
begins or ends editing the text. The `onCommit` property executes when the
user commits their edits.

`TextField` has 4 different initializers, and is most commonly


initialized with a `@State` variable and placeholder text.

struct ExampleView: View {


@State var myFruit: String = ""

var body: some View {


VStack {
Text(myFruit)
TextField("Fruit", text: $myFruit)
}
.padding()
}
}

![A gif showing a view with a VStack containing a text field that once
populated displays the corresponding text in a text item.](https://bananadocs-
documentation-assets.s3-us-west-2.amazonaws.com/TextField-example-1.gif)

### Styling Text Fields

SwiftUI provides a default text field style that reflects an appearance and
behavior appropriate to the platform. The default style also takes the
current context into consideration, like whether the text field is in a
container that presents text fields with a special style. Beyond this, you
can customize the appearance and interaction of text fields using the
``View/textFieldStyle(_:)`` modifier, passing in an instance of
``TextFieldStyle``.

[textfield-style ->]
``TextField`` can be styled with the ``View/textFieldStyle(_:)`` modifier.

struct ExampleView: View {


@State var myFruit: String = ""

var body: some View {


Text(myFruit)
TextField("Fruit", text: $myFruit)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
}
}

![A gif showing a view with a VStack containing a text field that once
populated displays the corresponding text in a text item; the text field has
a rounded border style.](https://bananadocs-documentation-assets.s3-us-west-
2.amazonaws.com/TextField-example-2.gif)

[<-]
The ``TextFieldStyle`` protocol and ``View/textFieldStyle(_:)`` modifier
provide helpful functionality to implement a well styled ``TextField``.

You might also like