짧은 기간안에 데이터를 전송하는 버튼을 연타하는 경우가 생길 상황을 우려해서 Debounce 와 button display 중 둘 중 하나를 고민을 하다가,
디바운스는 프로젝트에 적응한 다음 버튼 함수에다가 디바운스를 거는것보단 데이터 fetcing 하는 함수들 모두 범용성이 있게 작업을 해보자! 라는 생각을 가졌고,
최종적으론 편리하게 클릭을 방지하는 위젯을 찾아보게 되었다.
[코드]
IgnorePointer(
ignoring: true, // Boolean
child: ElevatedButton(
onPressed: () {print('클릭!')},
child: Text('버튼'),
),
)
[설명]
IgnorePointer() 위젯의 속성 ignoring 이 true 라면?
child 의 터치 이벤트를 무시하고,
IgnorePointer() 위젯의 속성 ignoring 이 false 라면?
child 의 터치 이벤트를 허용한다.
[코드]
AbsorbPointer(
absorbing: true, // Boolean
child: ElevatedButton(
onPressed: () {print('클릭!')},
child: Text('버튼'),
),
)
[설명]
AbsorbPointer() 위젯의 속성 absorbing 이 true 라면?
child 의 터치 이벤트를 흡수하고,
AbsorbPointer() 위젯의 속성 absorbing 이 false 라면?
child 의 터치 이벤트를 흡수하지 않는다.
둘의 사용법과 액션은 매우 비슷하다못해 똑같다.
https://www.woolha.com/tutorials/flutter-using-ignorepointer-absorbpointer-examples
이 부분은 코드와 할께 잘 생각해봐야한다.
버튼들을 따로 쓰면 당연히 같은 동작 처럼 보이겠지만, Stack 위에서 쓰면 동작이 다른것이 확실하게 보인다.
Ignore 은 무시하고 밑의 레이어를 클릭가능하고
Absorb 는 흡수하고 밑의 레이어를 클릭 못하게 한다.
//Ignore => 최상위 alert() 실행되고 맨 아래레이어 alert() 도 실행된다. (최초 클릭시 IgnorePointer 가 true 가 되어 재차 클릭시 맨아래 레이어 버튼을 클릭할 수있다.)
Stack(
children: [
ElevatedButton(onPressed: () {
alert('맨아래 레이어 클릭')
}, child: Text('맨아래 레이어'),
),
IgnorePointer(
ignoring: _ignoring,
onPressed: () {
alert('최상위 레이어 클릭')
_ignoring = true;
}
),
]
)
//Absorb => 최상위 alert() 만 실행된다. (최초 클릭시 AbsorbPointer 가 true 가 되어 맨아래 레이어 버튼을 클릭 안된다. AbsorbPointer 가 최상위에서 클릭 흡수하기때문!)
Stack(
children: [
ElevatedButton(onPressed: () {
alert('맨아래 레이어 클릭')
}, child: Text('맨아래 레이어'),
),
AbsorbPointer(
Absorbing: _absorbing,
onPressed: () {
alert('최상위 레이어 클릭')
_absorbing = true;
}
),
]
)
작성하신 코드 중 onPressed 파라미터가 없는데 어떻게 동작하신거죠?
AbsorbPointer 도 마찬가지로 궁금합니다.
Absorbing: _absorbing, 대문자 -> 소문자 오타있습니다.