ExpansionPanel 위젯은 확장 및 축소 가능한 패널을 생성하는 데 사용됩니다. 이 패널은 사용자가 펼칠 수 있는 특정 내용을 포함하고, 패널이 열려 있는지 닫혀 있는지를 나타내는 아이콘을 제공합니다.
그러나 ExpansionPanel이 확장 또는 축소될 때 어떤 작업을 수행하고자 하는 경우가 있을 수 있습니다. 이러한 경우를 처리하기 위해 ExpansionPanel에서 확장 및 축소 이벤트를 처리하는 방법을 알아보겠습니다.
먼저, ExpansionPanelList 위젯을 사용하여 ExpansionPanel을 구성하는 방법을 살펴봅니다.
ExpansionPanelList(
elevation: 1,
expandedHeaderPadding: EdgeInsets.all(0),
expansionCallback: (int index, bool isExpanded) {
setState(() {
_expandedPanels[index] = !isExpanded;
});
},
children: <ExpansionPanel>[
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text('패널 1'),
);
},
body: ListTile(
title: Text('패널 1 내용'),
),
isExpanded: _expandedPanels[0],
),
ExpansionPanel(
// 나머지 패널들에 대한 내용 생략
),
],
)
위의 코드에서 expansionCallback은 ExpansionPanel이 확장 또는 축소될 때 호출되는 콜백 함수를 정의합니다. setState 메서드를 사용하여 _expandedPanels 리스트의 해당 인덱스 값을 변경하여 패널의 상태를 업데이트합니다.
그리고 ExpansionPanel 위젯의 isExpanded 속성을 _expandedPanels 리스트의 해당 인덱스 값을 사용하여 현재 패널이 확장 상태인지 아닌지를 결정합니다. 이렇게 하면 확장 및 축소에 따른 이벤트 처리가 가능해집니다.
이제 다음 코드 조각은 expansionCallback 메서드 내에서 추가 작업을 수행하는 방법을 보여줍니다.
ExpansionPanelList(
// 생략
expansionCallback: (int index, bool isExpanded) {
setState(() {
_expandedPanels[index] = !isExpanded;
if (_expandedPanels[index]) {
// ExpansionPanel이 확장된 경우 추가 작업 수행
print('패널 $index 확장됨');
// 다른 작업들...
} else {
// ExpansionPanel이 축소된 경우 추가 작업 수행
print('패널 $index 축소됨');
// 다른 작업들...
}
});
},
// 생략
)
위의 코드에서는 expansionCallback 메서드 내에서 _expandedPanels[index]의 상태에 따라 추가 작업을 수행합니다. 확장된 상태라면 “패널 X 확장됨”을 출력하고, 축소된 상태라면 “패널 X 축소됨”을 출력합니다.
이제 ExpansionPanel을 확장 및 축소하는 동작에 따라 추가적인 이벤트를 처리하는 방법을 알게 되었습니다. 이를 응용하여 앱의 요구에 맞게 다양한 작업을 처리할 수 있습니다.