Realmとかは使ってないのでチャット履歴はアプリ落としたら消えます。今回はUIを作ってみただけです。カスタムモディファイアとかにも分けずコードベタ貼りなので自由にリファクタしてください。
import Foundation
struct ChatMessage: Identifiable {
var id = UUID()
var content: String
var isMe: Bool
}
import SwiftUI
struct ChatBubble: View {
var message: ChatMessage
var body: some View {
Group {
if message.isMe {
HStack {
Spacer()
VStack(alignment: .trailing, spacing: 2) {
Text(message.content)
.padding(12)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
Text("Sent: \(getMessageSentTime())")
.font(.system(size: 8, weight: .medium))
}
}
} else {
HStack {
VStack(alignment: .leading, spacing: 2) {
Text("John")
.font(.system(size: 12, weight: .medium))
Text(message.content)
.padding(12)
.background(Color.gray)
.foregroundColor(.white)
.cornerRadius(10)
}
Spacer()
}
}
}
}
private func getMessageSentTime() -> String {
let date = NSDate()
let formatter = DateFormatter()
formatter.dateFormat = "HH:mm"
return formatter.string(from: date as Date)
}
}
import SwiftUI
struct HomeView: View {
@State private var messages: [ChatMessage] = []
@State private var myMessage: String = ""
@State private var friendMessage: String = ""
var body: some View {
VStack {
List(messages) { message in
ChatBubble(message: message)
}
bottomView
}
}
var bottomView: some View {
VStack {
HStack {
TextField("iMessage", text: $friendMessage)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
Button(action: { sendMessage(content: friendMessage, isMe: false) }) {
Text("FriendSend")
.frame(width: 100, height: 40)
.foregroundColor(.white)
.background(Color.gray)
.cornerRadius(8)
}
.disabled(!myMessage.isEmpty)
}
HStack {
TextField("iMessage", text: $myMessage)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
Button(action: { sendMessage(content: myMessage, isMe: true) }) {
Text("MySend")
.frame(width: 100, height: 40)
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(8)
}
.disabled(!friendMessage.isEmpty)
}
}
.padding()
}
private func sendMessage(content: String, isMe: Bool) {
let message = ChatMessage(content: content, isMe: isMe)
messages.append(message)
myMessage = ""
friendMessage = ""
}
}
この記事は役に立ちましたか?
貴重なフィードバックありがとうございます!