Published on

GeometryReader

Authors

Ko'pincha SwiftUI view'laringizni o'lchamlash va joylashtirish uchun hech qanday yordam kerak bo'lmaydi. Lekin ba'zida haqiqiy raqamlar kerak bo'ladi β€” ekranning haqiqiy kengligi yoki konteynerning aniq balandligi β€” ulardan matematik hisob-kitob uchun foydalanish uchun. Aynan mana shu holatlarda GeometryReader kerak bo'ladi.

GeometryReader β€” egallagan joy o'lchamini siz bilan bo'lishuvchi konteyner view. Tarkibingizni uning ichiga o'rab olasiz va GeometryProxy ga kirish huquqiga ega bo'lasiz β€” bu obyektning .size xususiyati orqali nuqtalardagi mavjud kenglik va balandlikni bilib olasiz.

Muhim eslatma: GeometryReader β€” oxirgi chora, birinchi instinkt emas. Uning yon ta'siri bor β€” u barcha mavjud bo'sh joyni egallaydi va bu ba'zida layoutingizni kutilmaganda buzishi mumkin. Ko'p hollarda .frame(maxWidth: .infinity) yoki Spacer GeometryReader keltiradigan murakkabliklar yo'q holda ishni bajaradi.

Swift
ContentView.swift
import SwiftUI struct ContentView: View { var body: some View { // GeometryReader mavjud o'lchamga kirish imkonini beradi GeometryReader { geometry in VStack { // geometry.size.width dan nisbiy kengllik yaratishda foydalanamiz Rectangle() .fill(.blue) // Har doim mavjud konteyner kengligining 80%i .frame(width: geometry.size.width * 0.8, height: 100) Text("Kenglik: \(Int(geometry.size.width))pt") .padding(.top, 8) } } } }

GeometryReader variantlari

Proportsional balandlik β€” ekran balandligiga nisbatan o'lchamlash

GeometryReader { geometry in
    // Har doim ekran balandligining 40%ini egallagan asosiy rasm
    Rectangle()
        .fill(.indigo)
        .frame(height: geometry.size.height * 0.4)
}

Turli qurilmalarda (iPhone SE va iPhone Pro Max) ekran balandligiga nisbatan proportsional munosabatni saqlash kerak bo'lgan qahramonlik rasmlari yoki banner maydonlari uchun foydali.

Chegaralangan GeometryReader β€” ma'lum konteynerning o'lchamini o'lchash

VStack {
    Text("Sarlavha")

    // GeometryReader faqat bu VStack-ning qolgan joyini o'lchaydi
    GeometryReader { geometry in
        HStack {
            // Yon panel mavjud gorizontal joyning 30%ini egallaydi
            Color.blue.frame(width: geometry.size.width * 0.3)
            Color.green
        }
    }
}

GeometryReader o'zining ota-onasi taklif qilgan joyni o'lchaydi β€” har doim butun ekranni emas. Uni boshqa konteynerlarga joylashtirish ma'lum joyni o'lchash imkonini beradi.

geometry.frame(in:) β€” koordinatalarni olish

GeometryReader { geometry in
    // minY view-ning global ekran tepasidan masofasini beradi
    let topOffset = geometry.frame(in: .global).minY

    Text("Men tepadan \(Int(topOffset))pt masofadaman")
}

geometry.frame(in: .global) view-ning ekran koordinatalaridagi joylashuvini qaytaradi. Bu ilg'or usul β€” ko'pchilik yangi boshlovchilar unga muhtoj bo'lmaydi. Asosiy ishlatish holati parallaks effektlari yoki scroll-ga bog'liq animatsiyalardir.

Ehtiyotkorlik bilan ishlating: GeometryReader kuchli, lekin erta murojaat qilgan yangi boshlovchilar uchun kutilmagan joylashuv muammolariga sabab bo'lishi bilan tanilgan. GeometryReader yozishga tayyor bo'lsangiz, avval so'rang: buni .frame(maxWidth: .infinity), Spacer yoki boshqa joylashuv konteyneri bilan hal qila olamanmi? Ha bo'lsa, o'shani ishlating.

Tezkor ma'lumotnoma

SintaksisVazifasi
GeometryReader { geometry in }Barcha mavjud joyni egallagan konteyner yaratadi va closure ichida "geometry" nomli GeometryProxy beradi
geometry.size.widthNuqtalardagi GeometryReader konteynerining haqiqiy kengligi
geometry.size.width * 0.8Mavjud kenglikning 80% β€” bu qiymat har qanday ekran o'lchamiga avtomatik moslashadi
geometry.size.heightMavjud balandlik β€” xuddi shunday kirish mumkin
geometry.frame(in: .global)View-ning ekran koordinatalaridagi joylashuvi
geometry.frame(in: .local)View-ning o'ziga nisbatan joylashuvi
geometry.safeAreaInsetsO'lchanayotgan paytdagi safe area qo'shimchalari

Topshiriq: progress bar yaratish

GeometryReader yordamida oddiy progress bar yarating. Bar orqa foni ekranning to'liq kengligiga ega bo'lsin. To'ldirilgan qism shu kenglikning 65%i bo'lsin va ko'k to'rtburchak bilan ifodalansin. Bar 16 pt baland, 8 pt burchak radiusiga ega bo'lsin. Uning ostida "65% bajarildi" matni ko'rinsin. Canvas-da tekshiring β€” ko'k to'ldirish ekran kengligining aniq 65%ida tugashi kerak.

Buy mea coffee