Published on

TextEditor va .searchable() modifikatori

Authors

TextEditor — uzun matnlar kiritish. .searchable() — ilovaga qidiruv qo'shish. Ikkalasi ham real ilovalarda juda kerak.

TextEditor — ko'p qatorli matn

// ═══════════════════════════════════════
//  TEXTEDITOR ASOSLARI
// ═══════════════════════════════════════
struct IzohYozish: View {
    @State private var izohMatni = ""

    var body: some View {
        VStack(alignment: .leading) {
            Text("Izoh yozing:")
            .font(.headline)

            TextEditor(text: $izohMatni)
            .frame(minHeight: 100, maxHeight: 200)
            .scrollContentBackground(.hidden) // Standart fonni o'chirish
            .background(Color(.systemGray6))
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .overlay {
                // Placeholder
                if izohMatni.isEmpty {
                    Text("Fikringizni yozing...")
                    .foregroundStyle(.tertiary)
                    .padding(.top, 8)
                    .padding(.leading, 5)
                    .frame(maxWidth: .infinity,
                        maxHeight: .infinity,
                    alignment: .topLeading)
                    .allowsHitTesting(false)
                }
            }

            Text("\(izohMatni.count) ta belgi")
            .font(.caption)
            .foregroundStyle(.secondary)
        }
        .padding()
    }
}

.searchable() — qidiruv paneli

// ═══════════════════════════════════════
//  SEARCHABLE — qidiruv funksionalligi
// ═══════════════════════════════════════
struct QidiruvMisol: View {
    @State private var qidiruvMatni = ""
    let mevalar = ["Olma", "Banan", "Gilos", "Anor", "Uzum",
    "Shaftoli", "Apelsin", "Limon", "Mandarin"]

    var filtrlangan: [String] {
        if qidiruvMatni.isEmpty {
            return mevalar
        }
        return mevalar.filter {
            $0.localizedCaseInsensitiveContains(qidiruvMatni)
        }
    }

    var body: some View {
        NavigationStack {
            List(filtrlangan, id: \.self) { meva in
                Text(meva)
            }
            .navigationTitle("Mevalar")
            // Qidiruv paneli qo'shish
            .searchable(
                text: $qidiruvMatni,
                placement: .navigationBarDrawer(displayMode: .always),
                prompt: "Meva qidiring..."
            )
        }
    }
}

Search Suggestions — qidiruv takliflari

// ═══════════════════════════════════════
//  SEARCH SUGGESTIONS — taklif ko'rsatish
// ═══════════════════════════════════════
struct TaklifliQidiruv: View {
    @State private var qidiruvMatni = ""
    let tarixiy = ["SwiftUI", "UIKit", "Combine"]

    var body: some View {
        NavigationStack {
            List { /* ... */ }
            .searchable(text: $qidiruvMatni)
            .searchSuggestions {
                if qidiruvMatni.isEmpty {
                    // Bo'sh paytda tarix ko'rsatish
                    ForEach(tarixiy, id: \.self) { taklif in
                        Label(taklif, systemImage: "clock")
                        .searchCompletion(taklif)
                    }
                } else {
                    // Yozayotganda taklif
                    ForEach(["Swift", "SwiftUI", "SwiftData"].filter {
                            $0.localizedCaseInsensitiveContains(qidiruvMatni)
                    }, id: \.self) { taklif in
                        Text(taklif)
                        .searchCompletion(taklif)
                    }
                }
            }
        }
    }
}

Search Scopes — qidiruv doirasi

// ═══════════════════════════════════════
//  SEARCH SCOPES — kategoriya tanlash
// ═══════════════════════════════════════
enum QidiruvDoirasi: String, CaseIterable {
    case barchasi = "Barchasi"
    case maqolalar = "Maqolalar"
    case foydalanuvchilar = "Foydalanuvchilar"
}

struct DoiraliQidiruv: View {
    @State private var qidiruvMatni = ""
    @State private var doira: QidiruvDoirasi = .barchasi

    var body: some View {
        NavigationStack {
            List { /* filtrlangan natijalar */ }
            .searchable(text: $qidiruvMatni)
            .searchScopes($doira) {
                ForEach(QidiruvDoirasi.allCases, id: \.self) { d in
                    Text(d.rawValue).tag(d)
                }
            }
            .onSubmit(of: .search) {
                // Enter bosilganda — tarmoqdan qidiruv
                print("Qidirilmoqda: \(qidiruvMatni) doira: \(doira)")
            }
        }
    }
}

🎯 Topshiriq

"Eslatmalar" ilovasi yarating: TextEditor bilan yangi eslatma yozish, List da barcha eslatmalar, .searchable() bilan qidiruv. .searchSuggestions bilan oxirgi 3 ta qidiruvni taklif sifatida ko'rsating.

Buy mea coffee