Flutter 专题40 日常问题小结#yyds干货盘点#

幽映每白日，清辉照衣裳。这篇文章主要讲述Flutter 专题40 日常问题小结#yyds干货盘点#相关的知识，希望能为你提供帮助。
小菜作为一个小学生在实际操作中遇到很多问题，相对比较常见，小菜来整理记录一下。
问题一：嵌套权重异常
小菜做 Android 时为了屏幕适配，用到权重/比例比较多，Flutter 也提供了实现权重的功能，小菜尝试过权重基本用法，当时没有涉及到嵌套权重的问题，小菜想要实现的是左侧一张大图，右侧垂直两张小图，水平方向 1:1 均分，小菜用 Expanded 配合 flex 在嵌套权重时遇到如下问题，于是重新研究一下权重的使用;

文章图片

尝试一: 在根 Widget 中尝试如下，Expanded 与 Flexible 均正常，默认填满布局，与小菜预计的相同；
小菜理解 Container 未设置宽高，但 Row/Column 默认 mainAxisSize=MainAxisSize.max，因此正常填满；

// Expanded return new SafeArea( top: false, child: Scaffold( appBar: new AppBar( title: Text(Expanded Demo), ), body: Container( child: Row(children: < Widget> [ Expanded(flex: 1, child: Container(color: Colors.red)), Expanded(flex: 1, child: Column(children: < Widget> [ Expanded(flex: 1, child: Container(color: Colors.blue)), Expanded(flex: 1, child: Container(color: Colors.green)) ])) ])))); // Flexible return new SafeArea( top: false, child: Scaffold( appBar: new AppBar( title: Text(Flexible Demo), ), body: Container( child: Row(children: < Widget> [ Flexible(flex: 1, child: Container(color: Colors.red)), Flexible( flex: 1, child: Column(children: < Widget> [ Flexible(flex: 1, child: Container(color: Colors.blue)), Flexible(flex: 1, child: Container(color: Colors.green)) ])) ]))));

文章图片

尝试二：大多数情况页面元素较多，最外层可能会嵌套 ListView/Column 或其他 Widget，此时用 Expanded 便会出现如上问题；日志中建议使用 Flexible 和 Column mainAxisSize: MainAxisSize.min，虽然不报错，但是页面空白无效果；若只用 Flexible 结果依然是上述问题；
小菜理解两层 Column 加上 Expanded/Flexible 无法计算 Container 高度，子 Widget 无法自适应父 Widget 高度；

return new SafeArea( top: false, child: Scaffold( body: ListView(children: < Widget> [ Container( child: Row(children: < Widget> [ Flexible(flex: 1, child: Container(color: Colors.red)), Flexible( flex: 1, child: Column( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: < Widget> [ Flexible(flex: 1, child: Container(color: Colors.blue)), Flexible(flex: 1, child: Container(color: Colors.green)) ])) ])) ])));

尝试三：根据上一步尝试，小菜理解 Container 高度为 0，需要手动设置高度，但是设置在 Row 层还是 Column 层或子 Container 层是不同的；
小菜理解不显示的原因是高度未匹配，故尝试不同位置设置默认高度，但基本都在最外层设置并以最外层为基准；

return new SafeArea( top: false, child: Scaffold( body: ListView(children: < Widget> [ Container( height: 120, child: Row(children: < Widget> [ Flexible(flex: 1, child: Container(color: Colors.red)), Flexible( flex: 1, child: Container( child: Column( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: < Widget> [ Flexible( flex: 1, child: Container(color: Colors.blue)), Flexible( flex: 1, child: Container(color: Colors.green)) ]))) ])) ])));

文章图片

尝试四：如果最外层不设置高度时，则考虑根据需求使用带有宽高的 Widget，小菜需要展示图片，故直接用图片占位；
小菜主要想实现图片高度自适应，而宽度随屏幕比例占有，右侧两图正常为左图占位一半，但为了防止异常，通常在最外层设置高度；

return new SafeArea( top: false, child: Scaffold( body: ListView(children: < Widget> [ Container( child: Row(children: < Widget> [ Expanded( flex: 1, child: Image.network( https://timgsa.baidu.com/timg?image& quality=80& size=b9999_10000& sec=1544938569112& di=feeab11968f3870520482630563c4f54& imgtype=0& src=https://www.songbingjia.com/android/http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2Fac5c906111130579c6909aae47f6656e20d0906b.jpg)), Expanded( flex: 1, child: Container( child: Column( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: < Widget> [ Flexible( child: Image.network( https://timgsa.baidu.com/timg?image& quality=80& size=b9999_10000& sec=1544938569112& di=feeab11968f3870520482630563c4f54& imgtype=0& src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2Fac5c906111130579c6909aae47f6656e20d0906b.jpg), flex: 1), Flexible( child: Image.network( https://timgsa.baidu.com/timg?image& quality=80& size=b9999_10000& sec=1544938569112& di=feeab11968f3870520482630563c4f54& imgtype=0& src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2Fac5c906111130579c6909aae47f6656e20d0906b.jpg), flex: 1) ]))) ])) ])));

文章图片

扩展： Flexible 的 FlexFit 分两种，在嵌套权重时只可以用默认的 loose，在其他情况下，小菜测试差别不大；但小菜理解的官方说明：tight 模式是强制填补剩余空间，而 loose 模式可以填满剩余空间，也允许稍小不填满，非强制；相对 loose 使用范围更广。
问题二：SnackBar 找不到 Context
【Flutter 专题40 日常问题小结#yyds干货盘点#】 小菜尝试 SnackBar 时总是找不到上下文环境而打不开；

文章图片

尝试一：小菜将整体放在一个 Widget 中，传入 BuildContext 参数，无果，依旧是找不到上下文环境；
尝试二：按官网推荐，可新建一个 Builder 动态添加 BuildContext，但是小菜又出现新的问题，不可在 Builder 中返回无大小的 Container；仔细找了很久发现 Builder 需要 return 一个 Widget，太粗心；

文章图片

Widget _childExpandedWid() return SafeArea( top: false, child: Scaffold( appBar: new AppBar(title: new Text("SnackBar Demo")), body: Builder(builder: (BuildContext context) return Row(children: < Widget> [ Expanded( flex: 1, child: GestureDetector( onTap: () Scaffold.of(context).showSnackBar( SnackBar(content: Text(测试一下 SnackBar 使用！))); , child: Container(color: Colors.red))), Expanded( flex: 1, child: Column(children: < Widget> [ Expanded(flex: 1, child: Container(color: Colors.blue)), Expanded(flex: 1, child: Container(color: Colors.green)) ])) ]); )));

尝试三：按官网推荐，可以将这些子 Widget 拆分为单独的 StatelessWidget 组件，测试正常；

class ChildExpandWidget extends StatelessWidget @override Widget build(BuildContext context) return SafeArea( top: false, child: Scaffold( appBar: new AppBar(title: new Text("SnackBar Demo")), body: Row(children: < Widget> [ Expanded( flex: 1, child: GestureDetector( onTap: () Scaffold.of(context).showSnackBar( SnackBar(content: Text(测试一下 SnackBar 使用！))); , child: Container(color: Colors.red))), Expanded( flex: 1, child: Column(children: < Widget> [ Expanded(flex: 1, child: Container(color: Colors.blue)), Expanded(flex: 1, child: Container(color: Colors.green)) ])) ])));