这几天公司要实现一个如图的功能
image
下面的弹窗，本来打算用 showModalBottomSheet加column嵌套一个listview就行了，结果发现：
1、用listview的话，listview的外面必须包裹一层expanded，否则会报错
2、只用SingleChildScrollView的话，也要包裹一层expanded，否则当内容达到showModalBottomSheet的最大高度的时候回报内容遮挡的问题
因为这两个问题最终选择了用ConstrainedBox包裹SingleChildScrollView设置最大高度实现了在内容很少时高度为内容高度，内容很多的时候让那个视图滚动起来
下面为完整代码
class airLines extends StatefulWidget {
@override
_airLinesState createState() => _airLinesState();
}
class _airLinesState extends State<airLines> {
int _valuelist; //航班 选择
@override
Widget build(BuildContext context) {
return Container(
child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Stack(alignment: Alignment.center, children: <Widget>[
Container(
child: Text("接机航班选择",
style: TextStyle(
fontSize: 18,
color: Color(0xff333333),
fontWeight: FontWeight.w500)),
),
Align(
alignment: Alignment.topRight,
child: Container(
width: 60,
height: 50,
child: IconButton(
icon: Icon(
Icons.close,
color: Color(0xff666666),
size: 30,
),
onPressed: () {
Navigator.pop(context);
})),
)
])),
///设计原型上底部弹窗是内容包裹（弹窗的高德为内容高度，当内容过多时最大高度为300）
///如果用listView实现则自动充满高度
///SingleChildScrollView的外面如果不包裹一层ConstrainedBox，当内容超出
///showModalBottomSheet的
///最大限度时会报内容遮挡的错误
///所以：采用了稍麻烦的方法实现了这个弹窗功能
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 300),
child: SingleChildScrollView(
child: Column(
children: List.generate(
2,
(index) => InkWell(
child: Container(
child: Column(
children: <Widget>[
SizedBox(height: 13.5),
Row(
children: <Widget>[
SizedBox(width: 16),
Text(
"大连",
style: TextStyle(
color: Color(0xff333333), fontSize: 16),
),
SizedBox(
width: 18,
),
Image.asset(
"images/air_timeArrow.png"),
SizedBox(
width: 18,
),
Text(
"大连",
style: TextStyle(
color: Color(0xff333333),
fontSize: 16),
),
],
),
Row(children: <Widget>[
SizedBox(width: 16),
Text("2019-12-18 22:20 - 00:05",
style: TextStyle(
color: Color.fromRGBO(153, 153, 153, 1),
fontSize: 12)),
Expanded(child: SizedBox()),
Container(
width: 16,
height: 16,
child: ACECheckbox(
type: ACECheckBoxType.circle,
value: _valuelist == index,
onChanged: (v) {}),
),
SizedBox(width: 20)
]),
Row(children: <Widget>[
SizedBox(width: 16),
Text("国航CA1608",
style: TextStyle(
color: Color(0xff999999),
fontSize: 12)),
]),
SizedBox(height: 13),
SizedBox(
height: 0.5,
child: Container(
color: Color(0xff999999),
margin: EdgeInsets.symmetric(horizontal: 16),
),
),
],
)),
onTap: () {}),
),
),
),
),
]),
);
}
}
在要弹出内容的地方写：
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(8),
right: Radius.circular(8),
)),
context: context,
builder: (ctx) {
return airLines();
});
这样就实现了一定程度上可变高度的底部弹窗
