[SwiftUI]TextViewの実装をする

ほへと

以下を実装したい！

・複数行の入力
・Placeholderの設定

ほへと

少し調べてみたけど、TextEditorでできそう？

ほへと

以下を読む。

概要

長い形式のテキストを表示および編集できるビュー。

@MainActor @preconcurrency
struct TextEditor

テキストエディタービューを使用すると、アプリのユーザーインターフェースで複数行のスクロール可能なテキストを表示および編集できます。テキストエディターを作成するには、ビューの本体に TextEditor インスタンスを追加し、アプリ内の文字列変数に Binding を渡して初期化します。

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)
    }
}

ほへと

TextEditorにはプレースホルダーの設定はデフォルトで入っていないみたい🤔

ほへと

プレースホルダーの実装は以下が良さそう？

/// TextEditorにプレースホルダーを追加する
TextEditor(text: $inputText)
    .frame(width: 400, height:150)
    .border(.gray, width: 5)

    .overlay(alignment: .topLeading) {
        // 未入力の時、プレースホルダーを表示
        if inputText.isEmpty {
            Text("ここに文字を入力してください。")
                .allowsHitTesting(false) // タップ判定を無効化
                .foregroundColor(Color(uiColor: .placeholderText))
                .padding(6)
        }
    }

実際にやって見たけど、微妙にズレるの嫌だな。

Paddingを何もつけない場合でも少し隙間がある感じで、ここら辺をいい感じに調整してあげればOK

ほへと

意外と簡単だったので良かった:)

ほへと

文字数制限をつける実装をしたのでメモ。

        TextEditor(text: $text)
            .padding(16)
            .overlay(alignment: .topLeading) {
                if text.isEmpty {
                    Text("応援コメントを投稿してみよう！")
                        .configureTextStyle(
                            textSize: 14,
                            foregroudColor: Color(Asset.Colors.gk160.color)
                        )
                        .allowsHitTesting(false)
                        .padding(.top, 25)
                        .padding(.leading, 23)
                }
            }
            .onChange(of: text) {
                if $0.count > characterLimit {
                    text = String($0.prefix(characterLimit))
                }
            }

このスクラップは4ヶ月前にクローズされました