Flutter手机App开发的第一天

上一篇

该公司已经拥有一支成熟的Flutter开发团队。由于APP开发工作量大，开发手机APP被抓。以下是由于在开发过程中对Flutter和手机开发有过多的基础知识而遇到的一些问题和陷阱。

1、 忘记写脚手架

脚手架相当于＜HTML页面开发；html><；/html>标记，没有该标记，页面将无法建立。

2、 列布局子元素Container不能占用宽度的100%

宽度：double.infinity。强制宽度覆盖整个宽度，与高度相同。

3、 惊人的扩展

您希望实现的效果是，Row布局中的两个子元素分别占宽度的50%。

如果Row嵌套在Row中，Column嵌套在Column中，则只有最外层的Row或Column将占据尽可能多的空间，而内部Row或Column占据的空间是实际大小。来自在编写代码之前，我已经看到了这一点，但我仍然不记得在使用它时使用它。意识到效果后，我真的理解了Ta的用法。

错误：FractionalySizedBox是一个可以使用百分比进行布局的组件，但在ROW中不生效。它总是在指定的宽度和高度下生效。因为Ta在渲染时使用widthFactor和heightFactor，所以需要一定的值来计算。

Use Expanded：按比例“扩展”Row、Column和Flex子组件占用的空间。膨胀包括一个弹性系数。如果为0或null，则表示孩子没有弹性。如果该值大于0，则所有Expaned都将根据柔性比率划分主轴的剩余空间。

在Row下，两个Expanded分别占50%。扩展flex的默认值为1。也就是说，该行被分成两部分。这两个扩展的弹性占总数的50%。

使用Expanded实现的另一个效果。进度照明效果，如图所示：

三个时间表可以根据数据状态依次点亮

一切都开始了

三个点图标占据固定宽度，中间的进度由Expanded填充（子元素是具有高度和背景色的容器）。代码如下：