skip to content
Logo Saturngod

Improve Tappable Area with contentShape

/ 1 min read

View more blogs with the tag swfitui , View more blogs with the tag input event

ပုံမှန် tappable area က control မှာပဲ ရှိပါတယ်။

HStack {
    Image("myImage")
        .resizable()
        .scaledToFit()
        .frame(width: 22,height: 22)
    Text("Hello World")
    Spacer()


    if selectedIndexs.contains(index + 1) {
        Image(systemName:"checkmark")
    }
}
.onTapGesture {
    print("Tap")
}

ဒီ code မှာ ဆိုရင် image နဲ့ text က လွဲပြီး white space နေရာတွေကို tap လုပ်လို့မရပါဘူး။ လုပ်လို့ရချင်သည့် အခါမှာ .contentShape(Rectangle()) နဲ့ အသုံးပြုနိုင်ပါတယ်။

HStack {
    Image("myImage")
        .resizable()
        .scaledToFit()
        .frame(width: 22,height: 22)
    Text("Hello World")
    Spacer()


    if selectedIndexs.contains(index + 1) {
        Image(systemName:"checkmark")
    }
}
.contentShape(Rectangle())
.onTapGesture {
    print("Tap")
}

ဒါဆိုရင် white space နေရာတွေပါ tap လုပ်လို့ရသွားမှာပါ။ content shape တစ်ခုလုံးကို control သာမက rectangle အပြည့် အနေနဲ့ ယူဆ လိုက်သည့် အတွက် tap ရသွားတာပါ။