كيفية رسم الظل Shadow في swift UI

بسم الله الرحمن الرحيم 

بدون مقدمات  وبطريقة مختصرة كيفية  عمل ظل او Shadow في swift UI

 

تعطينا SwiftUI معدلاً مخصصًا للظل () لرسم الظل حول العناصر . يمكنك التحكم في لون الظل ونصف قطره وموضعه ،

ويمكنك أيضًا التحكم في أي أجزاء من العرض يتم تظليلها عن طريق ضبط ترتيب التعديل

اولاً نفتح xcode  ونفتح مشروع جديد نختار swift UI  بعد فتح مشروع نضيف. struct جديد  كلياً مثل 

struct Title : ViewModifier {
    
    func body(content: Content) -> some View {
        content
           
    }
}

داخل struct نضيف 

    .padding()
    .shadow(radius: 5)
    .border(Color.red, width: 4)

يصير الكود على النحو التالي :

struct Title : ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .padding()
            .shadow(radius: 5)
            .border(Color.red, width: 4)

    }
}

ومن خلال ContentView  نضيف 

 .modifier(Title())

الكود بالكامل 

في شكله الأساسي ، يمكنك إضافة ظل فقط عن طريق تحديد نصف قطر ، على النحو التالي:

import SwiftUI

struct Title : ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .padding()
            .shadow(radius: 5)
            .border(Color.red, width: 4)

    }
}


struct ContentView: View {
    var body: some View {
        Text("Yasmin Ammmed")
            .modifier(Title())
        
        
          
            
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .shadow(radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
    }
}

 

نلاحظ ان يضيف ذلك ظلًا طفيفًا للغاية مع تمويه من 5 نقاط يتمركز حول النص.

الطريقة الثانية نفس الطريقة الاولي  نسبل الكود الاول بهذا الكود

    .shadow(color: .red, radius: 5)
    .border(Color.red, width: 4)

نلاحظ ان 

يمكنك أيضًا تحديد اللون الذي تريده مع إزاحة X و Y من العرض الأصلي. على سبيل المثال ، يؤدي هذا إلى إنشاء ظل أحمر قوي مع تمويه من 5 نقاط ، يتم توسيطه في النص:

إذا كنت تريد تحديد إزاحات للظل ، أضف معلمات x و / أو y إلى المعدل ، مثل هذا:

    .shadow(color: .red, radius: 5, x: 20, y: 20)
    .border(Color.red, width: 4)

طريقة اخري 

    .border(Color.red, width: 4)
    .shadow(color: .red, radius: 5, x: 20, y: 20)

 

في الاخير اتمني وصلت فكرة بسيطة اول مقال في swift UI

نصيحة من خلال  struct الجديد تستطيع استخدم نص في اكثر من مكان فقط عن طريق استعدي. 

 .modifier(Title())

كلمات دليلية: ios shadow swift swiftui xcode