当前位置:   article > 正文

Flutter showModalBottomSheet如何调整高度_flutter showmodalbottomsheet 高度

flutter showmodalbottomsheet 高度

解决方案:

1、 升级到新版本的Flutter,当前目前使用版本是1.22.5及以后就可

2、源码解读,官方调整原来写死比例的方案:

  1. @override
  2. BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
  3. return BoxConstraints(
  4. minWidth: constraints.maxWidth,
  5. maxWidth: constraints.maxWidth,
  6. minHeight: 0.0,
  7. maxHeight: isScrollControlled //这个字段默认为false,设置成true达到自定义高度的目的
  8. ? constraints.maxHeight
  9. : constraints.maxHeight * 9.0 / 16.0,
  10. );
  11. }

3、实战中只要将isScrollControlled方法设置为true,然后重新设置一下builder里面的布局高度就可解决:

  1. showModalBottomSheet<int>(
  2. context: context,
  3. isScrollControlled: true,
  4. shape: RoundedRectangleBorder(
  5. borderRadius: BorderRadius.only(
  6. topLeft: Radius.circular(30), topRight: Radius.circular(30)),
  7. ),
  8. builder: (BuildContext context) {
  9. return Container(
  10. height: 580,//这里调整高度即可,建议按照屏幕高度比例来计算
  11. decoration: BoxDecoration(
  12. borderRadius: BorderRadius.only(
  13. topLeft: Radius.circular(30), topRight: Radius.circular(30)),
  14. ),
  15. );
  16. },
  17. );

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/268704
推荐阅读
相关标签
  

闽ICP备14008679号