TextEditorの使い方

この記事は約3分で読めます。

TextEditorを使うことで、スクロールが可能な複数行のテキストフィールドを表示することができます。

  • iOS:13.0以上
  • XCode(当サイトの環境):15.0.1

基本的な使い方

基本的な使用方法は以下の通りです。
パラメータである「text」で設定したプロパティにテキストエディタで入力した文字列が格納されます。

import SwiftUI

struct TextEditorSample: View {
    // 編集した文字列を格納するプロパティをStateで宣言
    @State var inputText = ""
    var body: some View {
        VStack {
            Text("テキストエディタ")
            // テキストエディタを表示し入力した文字列を
            // $inputTextに格納する
            TextEditor(text: $inputText)
        }
    }
}

struct TextEditorSample_Previews: PreviewProvider {
    static var previews: some View {
        TextEditorSample()
    }
}

スタイルの指定

スタイルを変更する場合は、以下コードのようなモディファイアを使用することができます。

import SwiftUI

struct TextEditorSample: View {
    // 編集した文字列を格納するプロパティをStateで宣言
    @State var inputText = ""
    
    var body: some View {
        VStack {
            Text("テキストエディタ")
            // テキストエディタを表示し入力した文字列を
            // $inputTextに格納する
            TextEditor(text: $inputText)
                .font(.largeTitle) // フォント
                .foregroundColor(Color.green) // 文字の色
                .multilineTextAlignment(.trailing) //テキストの配置
                .lineSpacing(30) // 行間
                .border(.red, width: 3) // 境界線の色と幅
                .frame(width: 300, height:250)  // テキストエディタのサイズ
                .cornerRadius(25) // 境界線の丸み
                .colorMultiply(.yellow) // 背景色
        }
    }
}

struct TextEditorSample_Previews: PreviewProvider {
    static var previews: some View {
        TextEditorSample()
    }
}
タイトルとURLをコピーしました