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