幽映每白日,清辉照衣裳。这篇文章主要讲述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))
]))
])));
文章图片
小菜作为初学者,遇到很多基础的问题,仅做记录;如有错误请多多指导!
推荐阅读
- #yyds干货盘点#算法给小码农归并排序列阵
- 10道不得不会的Java基础面试题
- #私藏项目实操分享#分布式技术专题「OSS中间件系列」Minio的文件服务的存储模型及整合Java客户端访问的实战指南
- Springboot2+Quartz+debug源码教程#yyds干货盘点#
- 什么是 APM 系统(如何设计与实现?#yyds干货盘点#)
- #私藏项目实操分享#?Alibaba中间件技术系列「EasyExcel实战案例」实战研究一下EasyExcel如何从指定文件位置进行读取数据
- #yyds干货盘点#Springboot——Shiro(安全框架)学习笔记
- 学习Java必备的基础知识打卡12.19,要想学好必须扎实基本功(?建议收藏)#yyds干货盘点#
- #yyds干货盘点# 数据结构与算法之单链表