Flutter 学习之旅(二十二) Flutter 布局编

关于Flutter 控件还有4个基础的没有说分别是

Stack(折叠布局)
Checkbox(单选框) 
Wrap   (流式布局)
ProgressIndicator(进度条)

还有一些常用的小部件

SizedBox(用来确定大小,设置边距,两个控件之间的距离)  
Padding(设置内边距)  
DecoratedBox(用来装饰父布局)  
Divider (水平线) 
VerticalDivider(垂直线)

但是今天的我膨胀了,想要试一下用Flutter 写一些稍微复杂一点的布局,先上图

1598324252(1).jpg

这个看起来比较复杂,写起来还是比较简单的我先把我写的效果图上一下

GIF 2020-8-25 11-00-01.gif

首先来分析一下这个布局,
由于可以滑动 ,并且不存在复用的可能,2个选择,SingleChildScrollView嵌套Column ,或者ListView 利用children 设置子布局,为了显示 滑动进度条 使用 Scrollbar ,仔细看一下除了Column 和Row 嵌套Expanded , 再给Text 设置其他的一些属性,剩下真就是没什么了

image.png
图例中标注了方向,水平的使用Row ,垂直的使用 Column

代码可以去demo里面找,

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter