前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Flutter 专题】40 日常小问题小结 (一)

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

作者头像
阿策小和尚
发布2019-08-12 16:28:20
8220
发布2019-08-12 16:28:20
举报
文章被收录于专栏:阿策小和尚

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

问题一:嵌套权重异常

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

尝试一:

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

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

代码语言:javascript
复制
// 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 便会出现如上问题;日志中建议使用 FlexibleColumn mainAxisSize: MainAxisSize.min,虽然不报错,但是页面空白无效果;若只用 Flexible 结果依然是上述问题;

和尚理解两层 Column 加上 Expanded/Flexible 无法计算 Container 高度,子 Widget 无法自适应父 Widget 高度;

代码语言:javascript
复制
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 层是不同的;

和尚理解不显示的原因是高度未匹配,故尝试不同位置设置默认高度,但基本都在最外层设置并以最外层为基准;

代码语言:javascript
复制
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,和尚需要展示图片,故直接用图片占位; 和尚主要想实现图片高度自适应,而宽度随屏幕比例占有,右侧两图正常为左图占位一半,但为了防止异常,通常在最外层设置高度;

代码语言:javascript
复制
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,太粗心;

代码语言:javascript
复制
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 组件,测试正常;

代码语言:javascript
复制
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))
                  ]))
            ])));
  }
}

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 阿策小和尚 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题一:嵌套权重异常
    • 尝试一:
      • 尝试二:
        • 尝试三:
          • 尝试四:
            • 扩展:
            • 问题二:SnackBar 找不到 Context
              • 尝试一:
                • 尝试二:
                  • 尝试三:
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档