Flutter小技巧底部弹窗布局大小调整AndroidiOS

　　本头条核心宗旨
　　欢迎来到技术刚刚好作者，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。技术刚刚好经历
　　近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！本文核心要点
　　本文会带大家学习布局调整的问题，我会以一个具体的实例来讲解本文的内容，首先会写一段代码引出本文要讲解的问题，然后在带大家一起解决它，干货满满，欢迎点赞，收藏。
　　在我工作当中有一次突然遇到这样一个问题，我们将在这篇文章当中来讨论并解决它。我将带大家用Flutter文档和dart带的工具，教大家来解决问题。
　　本文会学习BoxConstraints，ModalBottomSheet，Align，Stack，Positioned的一些窗口小部件。
　　我相信大家做移动APP开发从底部弹出一个菜单已经并不陌生了。在Flutter当中已经提供了一个API来。showModalBottomSheet方法。
　　这种对话框我们项目用到的比较多，所以我们应该创建一个类来封装它。importpackage：fluttermaterial。dart；FutureTshowBottomDialogT（｛requiredBuildContextcontext，Stringtitle，Stringcontent，WidgettitleWidget，WidgetcontentWidget，ListWidgetactions，boolallowBackNavigationfalse，｝）｛assert（title！nulltitleWidget！null，titleandtitleWidgetbothmustnotbenull）；assert（content！nullcontentWidget！null，contentandcontentWidgetbothmustnotbenull）；finalthemeTheme。of（context）；returnshowModalBottomSheet（context：context，shape：RoundedRectangleBorder（borderRadius：constBorderRadius。only（topLeft：Radius。circular（24），topRight：Radius。circular（24），），），isDismissible：allowBackNavigation，builder：（context）WillPopScope（onWillPop：（）asyncallowBackNavigation，child：Padding（padding：constEdgeInsets。symmetric（horizontal：24，vertical：32），child：Column（mainAxisSize：MainAxisSize。min，mainAxisAlignment：MainAxisAlignment。start，crossAxisAlignment：CrossAxisAlignment。stretch，children：〔titleWidget？？Text（title，textAlign：TextAlign。left，style：Theme。of（context）。textTheme。headline2，），SizedBox（height：16），contentWidget？？Text（content，textAlign：TextAlign。left，style：Theme。of（context）。textTheme。bodyText2。copyWith（height：1。5），），SizedBox（height：48），if（actions！null）。。。actionselseOutlineButton（child：Text（GOTIT！），borderSide：BorderSide（color：theme。primaryColor），onPressed：（）｛Navigator。of（context）。pop（）；｝，），〕，），），），）；｝然后，使用该包装器函数变得很容易，如下所示：classDialogExampleextendsStatelessWidget｛voidshowDialog（BuildContextcontext）｛showBottomDialog（context：context，allowBackNavigation：true，title：Doyouwishtopurchaseaddons？，content：Addonshelpyousavesomeextramoneywhenyoupurchasethemalongwithouroriginalproducts。Plus，theyhelpyourchancesofwinningaswell。，actions：〔RaisedButton（child：Text（YES，GOAHEAD），onPressed：（）｛｝，），FlatButton（child：Text（SKIP），onPressed：（）｛｝，）〕，）；｝overrideWidgetbuild（BuildContextcontext）｛returnContainer（child：Center（child：RaisedButton（child：Text（ShowDialog），onPressed：（）showDialog（context），），），）；｝｝
　　这个时候我们就遇到一个问题了，这个时候我们要添加一个IconButton来关闭对话框，这个时候我们可以定义一个isDismissable：true来设置该对话框的关闭或者打开。然后添加一个按钮。Stack（children：Widget〔Column（mainAxisSize：MainAxisSize。min，mainAxisAlignment：MainAxisAlignment。start，crossAxisAlignment：CrossAxisAlignment。stretch，children：〔titleText，contentText，if（mutipleCTAButtons！null）。。。multipleCTAButtons，elsecommonCTAButton〕），if（closeButton）Align（alignment：Alignment。topRight，child：IconButton（icon：Icon（Icons。close，size：24，），onPressed：onClose？？（）Navigator。pop（context），））〕）
　　对showBottomDialog函数的更改如下FutureTshowBottomDialogT（｛requiredBuildContextcontext，Stringtitle，Stringcontent，WidgettitleWidget，WidgetcontentWidget，ListWidgetactions，boolallowBackNavigationfalse，boolshowCloseButtonfalse，FunctiononClose，｝）｛assert（title！nulltitleWidget！null，titleandtitleWidgetmustnotbothbenull）；assert（content！nullcontentWidget！null，contentandcontentWidgetmustnotbothbenull）；finalthemeTheme。of（context）；returnshowModalBottomSheet（。。。builder：（context）WillPopScope（onWillPop：（）asyncallowBackNavigation，child：Stack（children：Widget〔Padding（padding：constEdgeInsets。symmetric（horizontal：24，vertical：32），child：Column（。。。。。。Removedforbrevity〕，），），if（showCloseButton）Align（alignment：Alignment。topRight，child：IconButton（icon：Icon（Icons。close），onPressed：onClose？？（）Navigator。pop（context），），），〕，），），）；｝
　　然后使用示例上面的使用方面的更改变为：classDialogExampleextendsStatelessWidget｛voidshowDialog（BuildContextcontext）｛showBottomDialog（。。。。。。showCloseButton：true，）；｝｝
　　这个时候显示效果如下
　　这个时候问题就出现了，布局占据了屏幕的高度，差不多屏幕一半高了，是什么原因了，这个时候我们用Dart开发工具来找问题。
　　首先让我们看看哪个Widget通过打开DartDevTools导致BottomSheet的高度增加，而无需假定它必须与IconButton对齐，因为添加它是导致问题的原因，对吗？
　　高亮区域代表我们的BottomSheet的布局层次结构。让我们在DevTool中打开选择小部件模式，然后开始选择小部件，以查看哪个小部件占用了布局空间。
　　阅读Flutter文档
　　在开始阅读文档之前，我们先来看一下StackDevTools中的尺寸（宽度和高度）。
　　可以看出，这些尺寸是具有约束条件的，而我们有没有设置约束，所以其中minWidth和maxWidth分别设置为和分别等于screenWidth和不设置为0和screenWidth（即0。0w414），这意味着明确要求它占据整个屏幕宽度，而不考虑其子级的宽度。而且，maxHeight精确地设置为strong916strong的screenHeight。结果，Stack的大小被设置为w414（screenWidth）和h504（screenHeight），这意味着它占据了允许的整个高度。
　　因此，我们的BottomSheet约束设置如下：finalminWidthconstraints。maxWidth；finalmaxWidthconstraints。maxWidth