【Flutter 常见问题】解决 Flutter showModalBottomSheet 底部弹框组件底部溢出的问题

1、问题描述

在使用 showModalBottomSheet 底部弹框组件的时候,当达到一定高度后,会出现底部溢出的情况

【Flutter 常见问题】解决 Flutter showModalBottomSheet 底部弹框组件底部溢出的问题
2、解决方案

  • 如果子组件是 Column,设置 mainAxisSize 属性为 MainAxisSize.min 即可。
  • 如果子组件是 ListView 或者 GridView ,设置 showModalBottomSheet 组件的 isScrollControlled 属性为 true ,设置为 true 后,底部弹框的最大高度可以占满全屏。

设置后如下图所示

【Flutter 常见问题】解决 Flutter showModalBottomSheet 底部弹框组件底部溢出的问题


结束语

Google 的 Flutter 越来越火,截止 2020年08月28日 GitHub 标星已达 99.4K,Flutter 毅然是一种趋势,所以作为前端开发者,没有理由不趁早去学习。

如果你是 Flutter 新手或者刚入门,不妨先点个关注,后续我会将 Flutter 中的常用组件(含有源码分析、组件的用法及注意事项)以及可能遇到的问题写到 CSDN 博客中,希望自己学习的同时,也可以帮助更多的人。

【Flutter 常见问题】解决 Flutter showModalBottomSheet 底部弹框组件底部溢出的问题