[flutter] ExpansionPanel의 헤더에 아이콘 및 버튼 추가하기
Flutter의 ExpansionPanel 위젯은 확장 가능한 목록을 구현하는 데 사용됩니다. ExpansionPanelList 위젯을 사용하여 여러 ExpansionPanel을 그룹화 할 수 있습니다. 각각의 ExpansionPanel은 헤더와 본문을 가지고 있습니다.
만약 ExpansionPanel의 헤더에 아이콘 및 버튼을 추가하고 싶다면, ListTile 위젯을 사용하여 헤더를 구성 할 수 있습니다. ListTile 위젯은 이미지, 텍스트 및 액션 위젯을 포함할 수 있는 간단한 목록 항목을 만들기 위해 사용됩니다.
다음은 ExpansionPanel의 헤더에 아이콘과 버튼을 추가하는 예제 코드입니다.
ExpansionPanelList(
elevation: 1,
expandedHeaderPadding: EdgeInsets.zero,
expansionCallback: (int index, bool isExpanded) {
setState(() {
_panels[index].isExpanded = !isExpanded;
});
},
children: _panels.map<ExpansionPanel>((PanelItem panelItem) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
leading: Icon(panelItem.icon), // 아이콘 추가
title: Text(panelItem.title),
trailing: ElevatedButton( // 버튼 추가
onPressed: () {
// 버튼에 클릭 동작 추가
},
child: Text('버튼'),
),
);
},
body: panelItem.body,
isExpanded: panelItem.isExpanded,
);
}).toList(),
)
위 예제 코드에서 _panels는 ExpansionPanelList에 전달되는 List
ExpansionPanel의 헤더에 아이콘과 버튼을 추가하려면 ListTile의 leading, title 및 trailing 위젯에 각각 원하는 위젯을 넣어주면 됩니다.
위 예제 코드를 참조하여 ExpansionPanel의 헤더에 아이콘과 버튼을 추가할 수 있습니다.