写点什么

【Flutter 专题】40 日常问题小结 (一)

发布于: 3 小时前
【Flutter 专题】40 日常问题小结 (一)

      小菜作为一个小学生在实际操作中遇到很多问题,相对比较常见,小菜来整理记录一下。

问题一:嵌套权重异常

      小菜做 Android 时为了屏幕适配,用到权重/比例比较多,Flutter 也提供了实现权重的功能,小菜尝试过 权重基本用法,当时没有涉及到嵌套权重的问题,小菜想要实现的是左侧一张大图,右侧垂直两张小图,水平方向 1:1 均分,小菜用 Expanded 配合 flex 在嵌套权重时遇到如下问题,于是重新研究一下权重的使用;



尝试一:

      在根 Widget 中尝试如下,ExpandedFlexible 均正常,默认填满布局,与小菜预计的相同;


      小菜理解 Container 未设置宽高,但 Row/Column 默认 mainAxisSize=MainAxisSize.max,因此正常填满;


// Expandedreturn 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))              ]))        ]))));
// Flexiblereturn 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 便会出现如上问题;日志中建议使用 FlexibleColumn 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=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)                    ])))          ]))        ])));
复制代码



扩展:

      FlexibleFlexFit 分两种,在嵌套权重时只可以用默认的 loose,在其他情况下,小菜测试差别不大;但小菜理解的官方说明:tight 模式是强制填补剩余空间,而 loose 模式可以填满剩余空间,也允许稍小不填满,非强制;相对 loose 使用范围更广。

问题二:SnackBar 找不到 Context

      小菜尝试 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))                  ]))            ])));  }}
复制代码




      小菜作为初学者,遇到很多基础的问题,仅做记录;如有错误请多多指导!


来源:阿策小和尚

发布于: 3 小时前阅读数: 2
用户头像

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟~

评论

发布
暂无评论
【Flutter 专题】40 日常问题小结 (一)