Published on: Friday, August 7, 2026

SwiftUI-da Button-lardan qanday foydalanish kerak

Authors

Name
ShoxruxC
@iOSdasturchi

Bu videoda biz Button — ya'ni tugmalar haqida gaplashamiz. Foydalanuvchi tugmani bosganida biror amal bajariladi. Avval tugmalarni qanday yaratishni ko'rib chiqamiz, keyin esa ularni chiroyli ko'rsatish uchun bir nechta haqiqiy dunyo misollarini ko'ramiz.

Button — 1-usul: String bilan

Eng oddiy tugma — faqat matn ko'rsatadi:

Button("Bosing") {
    // Tugma bosilganda bu kod ishlaydi
}

@State bilan dinamik o'zgarish

Tugma bosilganda ekrandagi ma'lumotni o'zgartirish uchun @State o'zgaruvchisi kerak. Keyingi videoda @State ni batafsil ko'rib chiqamiz, hozircha shunday ishlashini biling:

struct ButtonsBootcamp: View {

    @State var title: String = "Bu mening sarlavham"

    var body: some View {
        VStack(spacing: 20) {
            Text(title)

            Button("Bosing") {
                title = "Tugma bosildi"
            }
        }
    }
}

let bilan e'lon qilingan o'zgaruvchini o'zgartirib bo'lmaydi. @State var esa qiymatni o'zgartirish imkonini beradi va SwiftUI ekranni avtomatik yangilaydi.

Button — 2-usul: Action va Label bilan

Bu usul ko'proq imkoniyat beradi — label sifatida istalgan View ishlatish mumkin:

Button {
    // Tugma bosilganda bu kod ishlaydi
    title = "2-tugma bosildi"
} label: {
    Text("Tugma")
    // Bu yerda Text, Image, HStack — xohlagan narsa bo'lishi mumkin
}

Birinchi usulda faqat matn kiritish mumkin edi. Bu usulda esa label — to'liq moslashtirilishi mumkin bo'lgan View.

Standart ko'rinishni o'zgartirish — accentColor

Tugmalar odatda iOS-ning standart ko'k rangi bilan ko'rinadi. Buni .accentColor() bilan o'zgartirish mumkin:

Button("Bosing") {
    title = "Tugma bosildi"
}
.accentColor(.red)

Chiroyli tugma — 1-misol: Yumaloq burchakli

Ilovalarda eng ko'p uchraydigan tugma ko'rinishi:

Button {
    title = "Saqlash tugmasi bosildi"
} label: {
    Text("SAQLASH")
        .font(.headline)
        .fontWeight(.semibold)
        .foregroundColor(.white)
        .padding()
        .padding(.horizontal, 20)
        .background(
            Color.blue
                .cornerRadius(10)
                .shadow(radius: 10)
        )
}

Chiroyli tugma — 2-misol: Doira va rasm bilan

Tinder-ga o'xshash yurak tugmasi:

Button {
    title = "Yurak tugmasi bosildi"
} label: {
    Circle()
        .fill(Color.white)
        .frame(width: 75, height: 75)
        .shadow(radius: 10)
        .overlay(
            Image(systemName: "heart.fill")
                .font(.largeTitle)
                .foregroundColor(Color(red: 0.6, green: 0.0, blue: 0.1))
        )
}

Chiroyli tugma — 3-misol: Capsule (kapsul) bilan

Cheti chizilgan kapsul shaklidagi tugma:

Button {
    title = "Tugatish tugmasi bosildi"
} label: {
    Text("TUGATISH")
        .font(.caption)
        .bold()
        .foregroundColor(.gray)
        .padding()
        .padding(.horizontal, 10)
        .background(
            Capsule()
                .stroke(Color.gray, lineWidth: 2.0)
        )
}

Hammasi birgalikda

struct ButtonsBootcamp: View {

    @State var title: String = "Bu mening sarlavham"

    var body: some View {
        VStack(spacing: 20) {
            Text(title)

            // 1-usul: oddiy string tugmasi
            Button("Bosing") {
                title = "1-tugma bosildi"
            }
            .accentColor(.red)

            // 2-usul: yumaloq burchakli tugma
            Button {
                title = "Saqlash tugmasi bosildi"
            } label: {
                Text("SAQLASH")
                    .font(.headline)
                    .fontWeight(.semibold)
                    .foregroundColor(.white)
                    .padding()
                    .padding(.horizontal, 20)
                    .background(
                        Color.blue
                            .cornerRadius(10)
                            .shadow(radius: 10)
                    )
            }

            // 3-usul: doira va rasm bilan
            Button {
                title = "Yurak tugmasi bosildi"
            } label: {
                Circle()
                    .fill(Color.white)
                    .frame(width: 75, height: 75)
                    .shadow(radius: 10)
                    .overlay(
                        Image(systemName: "heart.fill")
                            .font(.largeTitle)
                            .foregroundColor(Color(red: 0.6, green: 0.0, blue: 0.1))
                    )
            }

            // 4-usul: capsule bilan
            Button {
                title = "Tugatish tugmasi bosildi"
            } label: {
                Text("TUGATISH")
                    .font(.caption)
                    .bold()
                    .foregroundColor(.gray)
                    .padding()
                    .padding(.horizontal, 10)
                    .background(
                        Capsule()
                            .stroke(Color.gray, lineWidth: 2.0)
                    )
            }
        }
    }
}

Xulosa

Usul	Qachon ishlatish
`Button("Matn") { }`	Oddiy, tezkor tugma
`Button { } label: { }`	Moslashtirilgan ko'rinish kerak bo'lganda
`.accentColor()`	Standart rang o'zgartirish
`.cornerRadius()` + `.shadow()`	Yumaloq burchakli chiroyli tugma
`Circle()` + `.overlay()`	Doira shaklidagi ikonkali tugma
`Capsule()` + `.stroke()`	Cheti chizilgan kapsul tugma

Keyingi videoda @State o'zgaruvchisini chuqurroq o'rganamiz — ma'lumotlarni qanday boshqarish va ekranni qanday yangilash haqida batafsil ko'rib chiqamiz.

Rahmat, men Nick, bu Swiftful Thinking va keyingi videoda ko'rishguncha!