flutter用showModalBottomSheet实现可变高度的底部弹窗

这几天公司要实现一个如图的功能 

 

 

下面的弹窗，本来打算用 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.fromRGBO(153, 153, 153, 1),
                          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(
                                "箭头图片的路径"),
                            SizedBox(
                              width: 18,
                            ),
                            Text(
                              "大连",
                              style: TextStyle(
                                  color: Color.fromRGBO(51, 51, 51, 1),
                                  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.fromRGBO(153, 153, 153, 1),
                                  fontSize: 12)),
                        ]),
                        SizedBox(height: 13),
                        SizedBox(
                          height: 0.5,
                          child: Container(
                            color: Color.fromRGBO(219, 219, 219, 1),
                            margin: EdgeInsets.fromLTRB(15, 0, 17, 0),
                          ),
                        ),
                      ],
                    )),
                    onTap: () {}),
              ),
            ),
          ),
        ),
      ]),
    );
  }
}

 

 

在要弹出内容的地方写：

 showModalBottomSheet(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.horizontal(
                  left: Radius.circular(8),
                  right: Radius.circular(8),
                )),
                context: context,
                builder: (ctx) {
                  return airLines();
                });

 

 

 这样就实现了一定程度上可变高度的底部弹窗