شرح حل مشكلة إمكانية الضغط خارج حدود الصورة

مرحبا

في هذا المقال سوف اتكلم عن مشكلة شائعه وغالباً راح تواجها في اي مشروع يحتوي على صور
مثلا مشروع يحتوي على صورة حساب المستخدم مثل مواقع الشبكات الاجتماعيه او اي صورة تتطلب الضغط عليها وتكون بشكل محدد

غالبا في هذه الحالات
تحتاج تجعل الصور على شكل معين دائري او مربع مثل هذا الكود

struct ContentView: View {
    
    @State var count: Int = 0
    
    var body: some View {
        VStack {
            
                Image(.person)
                .resizable()
                .scaledToFill()
                    .frame(width: 400, height: 400)
                    .clipShape(Circle())
                    .onTapGesture {
                         count += 1
                              }
            
            Text("\(count)")

        }
    }
}

في الكود السابق عباره عن صورة بحجم 400 في 400 وجعلناها بشكل دائري بإستخدام clipShape
ومن ثم اضفنا onTapGesture بحيث نسمع اننا نضغط عليه الصورة
عادة ما يتم استخدام OnTapGesture في هذه الحالات عوضا عن Button لانه الصور المستخدمين لا تريد أن يظهر Highlight الضغط على زر

لكن في هذه الحاله سوف تتوقع بأنه بإستخدامك clipShape جعلت الصورة بهذا الشكل وايضا جعلت منطقة الضغط على الصورة هيا في حدود الشكل فقط
لكن الواقع غير ذلك

شاهد هذا الفيديو

 

 

كما لاحظت في الفيديو السابق مساحة الضغط متاحة حتى خارج حدود الشكل الدائري
وهذه المساحة هيا مساحة الصورة الفعليه!

لكن في هذه الحاله التي تم ذكرها سابقا، ما ترغب فيه هو السماح بالضغط على الصورة فقط في حدود الشكل الدائري !

حل هذه المشكلة بسيط جداً
فقط تحتاج تضيف .contentShape(Circle())

تحديث للكود اللسابق

struct ContentView: View {
    
    @State var count: Int = 0
    
    var body: some View {
        VStack {
            
                Image(.person)
                .resizable()
                .scaledToFill()
                    .frame(width: 400, height: 400)
                    .clipShape(Circle())
                    .contentShape(Circle())
                    .onTapGesture {
                         count += 1
                              }
            
            Text("\(count)")

        }
    }
}

بإضافة السطر السابق ، غيرت المنطقة المحدده للمس للشكل الدائري

لذلك الفرق بين clipShape و contentShape

clipShape وظيفته يحدد شكل الـ View ولكن لا يحد مساحته
اما contentShape وظيفته يحد مساحة الـ View بحيث لا تتجاوز الشكل المحدد
لذلك عند استخدامهم مع بعض تجعل الـ View بالشكل الذي تريده وايضا تجبره على مساحة الشكل الذي تريده ، بحيث لا يتجاوزها !

فيديو يوضح الفرق بعد اضافة السطر السابق