SwiftUI’da Gece-Gündüz Moduna Göre Form Arkaplanı – 2024

Bu blog yazısını hazırlama motivasyonum YouTube videoma gelen yorumdu. Hangi video diyenler için buraya tıklayarak ulaşabilirsiniz. Unutmadan ücretsiz bootcamplerim için buraya tıklayarak bilgi sahibi olabilir ve katılabilirsiniz.

Yunus Emre’ye buradan sorduğu soru ile kendimi geliştirme fırsatı verdiği için teşekkür ediyorum. Evet. Bunun cevabını bende tam olarak bilmiyordum. Hemen Xcode’da projemi açtım ve ilk akla gelen .background özelliğini atayıp light modeda sonuca ulaşmayı bekledim. Ancak herhangi bir değişiklik yoktu.

Hala o sinir bozucu gri arkaplan duruyordu.

Peki bu sorunu nasıl çözecektim? Ne yapmam gerekiyordu?

Çözüm – SwiftUI Form Styling

İlk olarak ufak bir hata olduğunu düşünerek yapay-zeka’dan kodumda hata olup olmadığını sordum. Ardından yapmak istediğimi yazılı bir şekilde yapay zekaya sordum. Ancak yapay zeka maalesef benim yaptığımdan başka bir şey önermedi. Yapay zeka sınıfta kaldı!

Ardından araştırmaya başladım. Google amcaya “SwiftUI Form Styling” keywordlerini yazarak arattım. Onlarca web sitede tarama gerçekleştirdim ve nihayet bir tanesinde sonuca ulaştım.

iOS 16 ve sonrası için şu iki kombinasyonu kullanmamız gerekiyordu;

.background(Color.white)

.scrollContentBackground(.hidden)

Bu kod bize form öğesinin arkaplanını kaldırarak kendi tanımlamış olduğumuz arkaplan rengini vermemize olanak tanıyacaktı. Hemen kodlarımı güncellemeye başladım.

Form{
                    if !viewModel.errorMessage.isEmpty{
                        Text(viewModel.errorMessage)
                            .foregroundStyle(.red)
                    }
                    TextField("Email Adresiniz", text: $viewModel.email)
                        .autocorrectionDisabled()
                        .autocapitalization(/*@START_MENU_TOKEN@*/.none/*@END_MENU_TOKEN@*/)
                    SecureField("Şifreniz", text: $viewModel.password)
                }
                .frame(height: 200)
                .background(.white)
                .scrollContentBackground(.hidden)

İki kodu forma ekledim ve artık light mode için arkaplanı beyaz bir from elde etmiştim. Ancak her iki modda da çalışacak bir koda ihtiyacım vardı. Dolayısıyla telefonun hangi modda olduğunu bilmem gerekiyordu. Bunun için hemen bir değişken tanımlayarak telefonun hangi modda olduğunu içerisinde sakladım.

@Environment(\.colorScheme) var colorScheme

Bu kod sayesinde telefonun hangi modda olduğunu öğrenebilecektim. Tek yapmam gereken colorScheme yazmak ve if sorgusuna sokmaktı. Kodu Struct ve body arasında bir yere ekledim.

Ardından artık elimde hangi modda olduğum yazıyordu.

colorScheme == .dark ? Color.black : Color.white

Bu sorgu ile black veya white arkaplan rengini background içerisinde tanımlayabilirdim. Hemen kodumu statik olmaktan kurtarıp dinamik bir yapıya döndürdüm.

Form{
                    if !viewModel.errorMessage.isEmpty{
                        Text(viewModel.errorMessage)
                            .foregroundStyle(.red)
                    }
                    TextField("Email Adresiniz", text: $viewModel.email)
                        .autocorrectionDisabled()
                        .autocapitalization(/*@START_MENU_TOKEN@*/.none/*@END_MENU_TOKEN@*/)
                    SecureField("Şifreniz", text: $viewModel.password)
                }
                .frame(height: 200)
                .background(colorScheme == .dark ? Color.black : Color.white)
                .scrollContentBackground(.hidden)

İşte bu kadar! Artık sinir bozucu gri arkaplan yok.

Sevgiler,

Furkan