Membuat Tampilan Chat ala WhatsApp Tema Biru

Sekarang, mari kita ubah kode default tadi menjadi antarmuka daftar percakapan (*Chat List*) yang mirip seperti WhatsApp, namun menggunakan aksen warna **Biru**.

Ganti seluruh isi kode di file `ContentView.swift` kamu dengan kode berikut:

import SwiftUI

// 1. Model Data sederhana untuk item Chat

struct ChatMessage: Identifiable {

    let id = UUID()

    let name: String

    let message: String

    let time: String

    let unreadCount: Int

    let imageName: String

}

struct ContentView: View {

    // Data dummy untuk daftar percakapan

    let chats = [

        ChatMessage(name: "Tim Cook", message: "Proyek SwiftUI baru udah selesai?", time: "10:45", unreadCount: 2, imageName: "person.crop.circle.fill"),

        ChatMessage(name: "Komunitas iOS ID", message: "Agung: Halo semuanya, salam kenal!", time: "09:12", unreadCount: 5, imageName: "person.3.sequence.fill"),

        ChatMessage(name: "Sarah Swift", message: "Besok ada jadwal webinar jam 7 malam ya.", time: "Kemarin", unreadCount: 0, imageName: "person.crop.circle"),

        ChatMessage(name: "Developer Team", message: "Build 17F113 sudah siap di-test.", time: "Kemarin", unreadCount: 0, imageName: "gearshape.2.fill")

    ]

    var body: some View {

        NavigationStack {

            List(chats) { chat in

                HStack(spacing: 12) {

                    // Foto Profil Avatar

                    Image(systemName: chat.imageName)

                        .resizable()

                        .scaledToFit()

                        .frame(width: 48, height: 48)

                        .foregroundColor(.blue) // Warna Biru untuk Ikon

                        .background(Color.blue.opacity(0.1))

                        .clipShape(Circle())

                    // Detail Nama & Pesan

                    VStack(alignment: .leading, spacing: 4) {

                        HStack {

                            Text(chat.name)

                                .font(.headline)

                                .foregroundColor(.primary)

                            Spacer()

                            Text(chat.time)

                                .font(.subheadline)

                                .foregroundColor(chat.unreadCount > 0 ? .blue : .gray)

                        }

                        HStack {

                            Text(chat.message)

                                .font(.subheadline)

                                .foregroundColor(.gray)

                                .lineLimit(1)

                            Spacer()

                            // Badge Pesan Belum Dibaca

                            if chat.unreadCount > 0 {

                                Text("\(chat.unreadCount)")

                                    .font(.caption)

                                    .fontWeight(.bold)

                                    .foregroundColor(.white)

                                    .padding(6)

                                    .background(Color.blue) // Accent Biru

                                    .clipShape(Circle())

                            }

                        }

                    }

                }

                .padding(.vertical, 4)

            }

            .listStyle(.plain)

            .navigationTitle("Pesan") // Judul Navigation Bar

            .toolbar {

                ToolbarItem(placement: .navigationBarTrailing) {

                    Button(action: {}) {

                        Image(systemName: "square.and.pencil")

                            .foregroundColor(.blue)

                    }

                }

            }

        }

    }

}

#Preview {

    ContentView()

}

Penjelasan Singkat Kode Baru:

• ChatMessage (Struct Data): Wadah untuk menampung informasi seperti nama pengirim, isi pesan, waktu, jumlah pesan belum dibaca, dan nama ikon.

• NavigationStack: Menyediakan bilah navigasi (Navigation Bar) di bagian atas layar dengan judul "Pesan" dan tombol aksi di pojok kanan.

• List: Komponen untuk membuat tampilan daftar berulang (scrollable list), mirip seperti daftar obrolan di WhatsApp.

• HStack (Horizontal Stack): Menyusun elemen secara menyamping (dari kiri ke kanan), yaitu foto profil di sebelah kiri dan teks detail di sebelah kanan.

• Aksen Warna Biru (Color.blue): Menggantikan warna hijau khas WhatsApp dengan warna biru khas tema iOS native, digunakan pada badge unread message, ikon profil, dan tombol header.