チャットスクリーン

ユーザーチャット機能テンプレートのチャット画面には、1つのチャットウィンドウ内で2人の間のメッセージが表示されます。

チャット画面は2人の間でやり取りされるすべてのメッセージが表示される場所です。テキストメッセージングアプリのように、画面の両側に送信者と受信者を示す2つのバブルがあります。また、現代のメッセージングアプリのように、メッセージに画像を添付する機能もあります。

コンポーネント

画像とテキストコンポーネント

これらの2つのコンポーネントは、画面の見出しを作成し、メッセージを送信されているユーザーのフルネームとプロフィールを表示します。これらのコンポーネントはMagic Textによって制御され、前の画面で選択されたユーザーに基づいてデータベースから動的に取得されます。

リストグループ

このリストの各イテレーションを構成する3つのコンポーネントがあります。つまり、リスト内の各アイテムには、すべて、いくつか、または1つもコンポーネントが表示される可能性があります。

まず、リストは現在の会話 > メッセージにフィルタリングされ、作成日時 - 古い順でソートされます。

形状とテキストコンポーネント

リスト内には、時々表示される2つのテキストコンポーネントがあります。表示の可否は、データベースに表示可能なテキストがあるかどうかに基づいて制御されます。現在のメッセージ > テキストが空でない場合、テキストが表示されます。

Rectangle 10:

このメッセージを含む長方形は、現在のメッセージに関連するユーザーIDが、メッセージを表示している人物のユーザーIDと等しい場合にのみ表示されます。

言い換えると、このテキストバブルはメッセージです。各メッセージは会話に属し、各会話は2人のユーザーに属します。このバブルが表示されるのは、現在の会話にユーザーが含まれ、そのユーザーがメッセージを送信した場合のみです。別の言い方をすれば、ここに表示されるメッセージは、ログインユーザーが誰かから受け取ったメッセージです。

Rectangle 13:

このメッセージを含む長方形は、現在のメッセージに関連するユーザーIDが、ログインしている人物のユーザーIDと等しい場合にのみ表示されます。

言い換えると、このバブルは、ログインしているユーザーがメッセージを送信し、そのメッセージが現在の会話に送信された場合にメッセージが表示されます。ここに表示されるメッセージは、ログインしているユーザーが送信したメッセージです。

画像:

この画像コンポーネントは、現在のメッセージ > 画像が空でない場合にのみ表示されます。つまり、データベース内のメッセージアイテムに表示する画像がある場合、画像コンポーネントが表示されます。それ以外の場合は表示されません。

入力コンポーネント

入力コンポーネントは、ログインしているユーザーが入力するメッセージテキストが入力される場所です。

送信ボタンアイコン

送信ボタンアイコンは、チャットにメッセージを「送信」します。

⚡ アイコンアクション

入力コンポーネントに入力された情報に基づいて、現在の会話のためのメッセージを作成する「作成」アクション。

画像ピッカーコンポーネント

このコンポーネントを使用すると、ユーザーはデバイスからメッセージに添付する画像を選択できます。