showModalBottomSheet自适应高度

背景：

showModalBottomSheet是系统提供的底部弹窗，但是正常情况高度是固定的。内容少的时候底部弹窗下面空一片不太好看。需要根据显示内容的高度来调整弹窗的高度。

showModalBottomSheet的isScrollControlled属性，设置为true，弹窗会覆盖整个手机。设置为false，弹窗大概是整个屏幕的0.4高。
ConstrainedBox 这是一个可以限制子控件高度的控件。

思路：

由于我的弹窗里面主要是放了一个listview，所以我会在代码里面打印出list的的每一个item的高度。然后算出真个listview的高度。把isScrollControlled设置为true，在用ConstrainedBox限制listview的高度。这样listview多高，弹窗就是多高。

///项目通用的底部弹窗
void showBottomDialog(BuildContext context, List<String> list,Function onItem) async {
  if ((list != null) && !list.contains('取消')) {
    list.add('取消');
  }

  await showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (BuildContext context) {
        //56
        return ConstrainedBox(
          constraints: BoxConstraints(maxHeight: getHeight(context, list)),
          child: ListView.separated(
            itemCount: list == null ? 0 : list.length,
            separatorBuilder: (context, index) {
              return Divider(
                height: 0,
              );
            },
            itemBuilder: (context, index) {
              return ListTile(
                title: GestureDetector(
                  child: Container(
                    color: Colors.transparent,
                    width: double.infinity,
                    height: 45,
                    alignment: Alignment.center,
                    child: Text(
                      list[index] ?? "",
                      style: textStyle_black,
                    ),
                  ),
                  onTap: () {
                    if (index == list.length - 1) {
                      Navigator.of(context).pop();
                    }else{
                      onItem(index);
                    }
                  },
                ),
              );
            },
          ),
        );
      });
}

double getHeight(BuildContext context, List<String> list) {
  if (56.0 * (list?.length) > MediaQuery.of(context).size.height * 0.8) {
    return MediaQuery.of(context).size.height * 0.8;
  }
  return 56.0 * (list?.length);
}

少量列表

item_less.png

大量列表最大直到屏幕的80%

item-more.png