S示例可展开列表底部溢出x个像素

Question

我创建了一个很好的简单可扩展列表。它应该像一个无线电列表一样工作，你应该能够只选择一个元素。我还没有实现这一部分，因为我对列表的大小有问题：

class ExpandableListRadio extends StatefulWidget {
ExpandableListRadio({
Key key,
this.options,
this.expandedHeight,
this.listName,
this.expanded,
}) : super(key: key);
List<String> options;
String listName;
double expandedHeight;
bool expanded;
@override
_ExpandableLisRadioState createState() => _ExpandableLisRadioState();
}
class _ExpandableLisRadioState extends State<ExpandableListRadio> {
List<Widget> buildListChildren() {
List<Widget> l = new List<Widget>();
for (var i = 0; i < widget.options.length; i++) {
Widget w = Container(
//width: double.infinity,
//height: 30,
margin: const EdgeInsets.only(left: 3, right: 3, top: 2),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(widget.options[i],
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
fontFamily: 'Roboto',
color: Colors.white)),
ClipOval(
child: Container(color: Colors.grey, width: 15, height: 15),
)
],
));
l.add(w);
}
return l;
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => {
setState(() {
if (widget.expanded != null)
widget.expanded = !widget.expanded;
else
widget.expanded = false;
})
},
child: Container(
height: 20,
decoration: BoxDecoration(
color: Colors.grey, borderRadius: BorderRadius.circular(2)),
child: Container(
margin: const EdgeInsets.only(left: 5, right: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(widget.listName,
style: TextStyle(
color: Color(0xFF555555),
fontSize: 13,
fontWeight: FontWeight.w700,
fontFamily: 'Roboto',
)),
widget.expanded != null && widget.expanded
? Icon(
Icons.arrow_upward,
size: 14,
color: Color(0xFF555555),
)
: Icon(
Icons.arrow_downward,
size: 14,
color: Color(0xFF555555),
)
],
)),
),
),
widget.expanded != null && widget.expanded
? (Container(
height: widget.expandedHeight,
color: Colors.transparent,
child: Column(children: [
ListView(
shrinkWrap: true,
children: buildListChildren(),
),
]),
))
: Container()
],
),
);
}
}

如果ExpandableListRadio的高度小于ListView，我得到一个bottom overflowed by x pixels。我确保将shirnkwrap: true添加到我的ListView中，这样就不会发生这种情况，但它仍在发生。

Answer 1

在这种情况下，我会使用SingleChildScrollView。最后一部分的代码：

widget.expanded != null && widget.expanded
? (SingleChildScrollView(
child: Column(children: [
buildListChildren(),
]),
))
: Container()