【SwiftUI】TextEditorの使い方

（2022/05/10 更新）

複数行のテキストが編集可能なTexiEditorの使い方を解説します。

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】13.3
【Swift】5.6
【iOS】15.4
【macOS】Monterey バージョン 12.3

TextEditor(text: Binding<String>)

【引数】
text
編集対象テキスト（String型）への参照（Binding）を指定します。

呼び出し方法は引数が一つだけで大変シンプルです。
細かい制御はモディファイアで指定します。

struct ContentView: View {

@State private var text = """

これは編集可能なテキストです

複数行の入力ができます

自動でスクロールもしてくれます

"""

var body: some View {

TextEditor(text: $text)

.frame(width: 300, height: 200) // フレームサイズ指定

.border(Color.gray, width: 1) // フレーム外枠の色と太さ指定

}

frameモディファイアでViewのサイズを指定しない場合、TextEditorは他のViewに関与しない最大サイズとなります。その際に、セーフエリアは考慮されませんので注意してください。

TextEditorのスタイル指定に使える代表的なモディファイアを紹介します。

モディファイア	用途	使用例
font()	フォントの指定	.font(.system(.headline, design: .serif))
foregroundColor()	文字色の指定	.foregroundColor(.green)
multilineTextAlignment()	テキストの配置	.multilineTextAlignment(.center)
lineSpacing()	テキストの行間スペース	.lineSpacing(10)
keyboardType()	キーボード指定	.keyboardType(.numberPad)