英文:
How to give shadow to ExpansionPanelRadio widget?
问题
I'm using ExpansionPanelList.radio to show a bunch of FAQs on the screen. As the children property only accepts a List of ExpansionPanel widgets, I can't give shadow to the ExpansionPanelRadio widget. Is there any method to give it a shadow like so:
Here's the code:
class FaqsScreen extends StatelessWidget {
FaqsScreen({super.key});
final List<int> _faqData = List.generate(5, (index) => index);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: ExpansionPanelList.radio(
elevation: 0,
expandedHeaderPadding: EdgeInsets.zero,
children: _faqData
.map(
(faq) => ExpansionPanelRadio(
value: _faqData.indexOf(faq),
canTapOnHeader: true,
headerBuilder: (context, isExpanded) => ListTile(
contentPadding: EdgeInsets.zero,
title: Text('1. Lorem Ipsum is simply dummy text?'),
),
body: Column(
children: [
Divider(),
Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
),
],
),
),
)
.toList(),
),
),
),
),
);
}
}
英文:
I'm using ExpansionPanelList.radio to show a bunch of FAQs on the screen. As the children property only accepts a List of ExpansionPanel widgets, I can't give shadow to the ExpansionPanelRadio widget. Is there any method to give it a shadow like so:
Here's the code:
class FaqsScreen extends StatelessWidget {
FaqsScreen({super.key});
final List<int> _faqData = List.generate(5, (index) => index);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: ExpansionPanelList.radio(
elevation: 0,
expandedHeaderPadding: EdgeInsets.zero,
children: _faqData
.map(
(faq) => ExpansionPanelRadio(
value: _faqData.indexOf(faq),
canTapOnHeader: true,
headerBuilder: (context, isExpanded) => ListTile(
contentPadding: EdgeInsets.zero,
title: Text('1. Lorem Ipsum is simply dummy text?'),
),
body: Column(
children: [
Divider(),
Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
),
],
),
),
)
.toList(),
),
),
),
),
);
}
}
答案1
得分: 1
你可以使用ExpansionTile代替ExpansionPanelRadio。
示例代码如下：
class FaqsScreen extends StatefulWidget {
FaqsScreen({super.key});
@override
State<FaqsScreen> createState() => _FaqsScreenState();
}
class _FaqsScreenState extends State<FaqsScreen> {
final List<int> _faqData = List.generate(5, (index) => index);
int _expandedIndex = -1; // 所有的折叠面板初始状态都是关闭的
void _handleExpansion(int index) {
setState(() {
if (_expandedIndex == index) {
_expandedIndex = -1; // 如果点击的是同一个面板，则关闭它
} else {
_expandedIndex = index;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: _faqData
.map(
(faq) => Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10),
BoxShadow(
color: Colors.black.withOpacity(0.3),
spreadRadius: -2,
blurRadius: 5,
),
],
),
child: ExpansionTile(
key: UniqueKey(),
onExpansionChanged: (expanded) {
_handleExpansion(faq);
},
initiallyExpanded: _expandedIndex == faq,
controller: ExpansionTileController(),
title: Text('1. Lorem Ipsum is simply dummy text?'),
children: [
Divider(),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 8),
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
),
),
],
),
),
)
.toList(),
),
),
),
),
);
}
}
英文:
You can use ExpansionTile instead of ExpansionPanelRadio
and here is the sample code :
class FaqsScreen extends StatefulWidget {
FaqsScreen({super.key});
@override
State<FaqsScreen> createState() => _FaqsScreenState();
}
class _FaqsScreenState extends State<FaqsScreen> {
final List<int> _faqData = List.generate(5, (index) => index);
int _expandedIndex = -1; // all tiles close at beginning
void _handleExpansion(int index) {
setState(() {
if (_expandedIndex == index) {
_expandedIndex = -1; // if the same tile, then close it
} else {
_expandedIndex = index;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: _faqData
.map(
(faq) => Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10),
BoxShadow(
color: Colors.black.withOpacity(0.3),
spreadRadius: -2,
blurRadius: 5,
),
],
),
child: ExpansionTile(
key: UniqueKey(),
onExpansionChanged: (expanded) {
_handleExpansion(faq);
},
initiallyExpanded: _expandedIndex == faq,
controller: ExpansionTileController(),
title: Text('1. Lorem Ipsum is simply dummy text?'),
children: [
Divider(),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 8),
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
),
),
],
),
),
)
.toList(),
),
),
),
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论