用户登录

Stack 里面可以放一摞小部件 .. 这些小部件会叠加到一块儿 .. 先剪切一下这几个 SizedBox ... 把它们放一个 Stack 里面 .. 添加一个 children 属性 .. 它的值就是 Stack 里面的一组小部件 ...

你会发现 .. 在 Stack 里的小部件会叠加到一块儿 .. 它里面的第一个 SizedBox 的尺寸是最大的 .. 所以它就相当于是这个 Stack 里的一个底版 .. Stack 里面的小部件的位置可以相对于这个底版去设置 ..

在 Stack 里面可以添加一个 alignment 设置一下没有设置对齐的子部件的对齐 ... 比如 Alignment.topRight ... 顶部靠右 .. topLeft .. 表示顶部靠左对齐 ..

找到这个月亮小图标的 SizedBox .. 给它的子部件添加一个径向的渐变效果 .. 先去掉它的圆角的效果 ... 然后把它的 shape ... 也就是形状设置成圆形 ...

然后添加一个 gradient ... 用一个径向渐变 ... 里面添加一个 colors .. 设置一组渐变的颜色 ...

Positioned

在 Stack 里面可以用一些 Positioned 小部件 .. 这种小部件我们可以设置它的具体的位置 ..

先剪切一下这个雪花小图标 .. 在下面再添加一个 Positioned 部件 .. 它的 child ,子部件就是刚才我们剪切的小图标 ..

在 Positioned 里面,我们可以设置它的 left .. top .. right .. 还有 bottom 的位置 .. 这个位置会相对于 Stack 里的那个最大的部件的位置 ..

比如添加一个 right .. 设置一下它的右边的位置 .. 20.0 .. 靠右 20.0 的位置 ... 再添加一个 top .. 20.0 ... 距离上边 20 的位置 ..

你可以继续添加一些这样的 Positioned 小部件 ... 分别设置一下它们的具体的位置 ...

Stack:一摞小部件《 Flutter 移动应用:布局 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点