💌メールの作成を開始し、完了したら下へ👇 スクロール

👆👇ScrollViewReader?

Apple Developer Documentation - ScrollViewReader
ScollViewReaderは、プロキシを使用してサブビューにスクロールするプログラミングスクロールを提供するビューです.スクロールバーでスクロールビューを囲みます.

ScrollViewReader { proxy in
    ScrollView {
        ...
    }
}

@Namespace

@Namespaceを使用してidを付与します.

@Namespace var topID
@Namespace var bottomID

スクロールの開始点と終了点の指定

スクロールの上部には、下部を指す矢印chevronボタンが作成されます.ボタンをbottomIdのあるビューにスクロールさせます.逆に、スクロールの下部に空のHSTACKを追加して、下部スクロールの位置値を取得します.

ScrollViewReader { proxy in
    ScrollView {
        Button(
            action: { withAnimation { proxy.scrollTo(bottomID) } },
            label: { Image(systemName: "chevron.down").foregroundColor(Color(.systemGray2)) })
            .id(topID)
        
        ...
        
        HStack {}.id(bottomID)
    }
}

💌メールの作成開始、完了の確認

メッセージを作成すると、メッセージTextに保存されます.次に、メッセージを送信するときに空の文字列になるようにコードを予め作成します.

@State private var messageText = ""

最初の文字を入力すると、messageTextは空の文字列から長さのある文字列に変換されます.次に、長い文字列から空の文字列になるメッセージを送信します.この変化に応じて、下にスクロールするアニメーションを実行します.onChange関数を使用して、messageText==""をBool値の変化に従ってスクロールさせます.

ScrollViewReader { proxy in
    ScrollView {
        Button(
            action: { withAnimation { proxy.scrollTo(bottomID) } },
            label: { Image(systemName: "chevron.down").foregroundColor(Color(.systemGray2)) })
            .id(topID)
        
        VStack(spacing: 16) {
            ForEach(0..50) { _ in
                Text("Scroll")
            }
        }
        .onChange(of: messageText == "") { _ in
            withAnimation { proxy.scrollTo(bottomID) }
        }
        
        HStack {}.id(bottomID)
    }
}

ハブコミットアドレス

GitHub - Commit