用户登录

在 SliverAppBar 里面,可以添加一个 expandHeight ,它可以设置一个伸展高度 .. 先把它设置成 178.0 .. 这个伸展出来的高度可以把它变成一块弹性空间 .. 添加一个 flexibleSpace .. 它的值一般是个 FlexibleSpaceBar ..

里面可以添加一个 title 设置一个标题 .. 标题用一下 Text .. 标题文字是 Ninghao Flutter .. 后面再用一个 toUpperCase ,把它变成大写的 ...

然后可以设置一下文字的样式 .. TextStyle .. 文字的大小设置成 15.0 ... 再添加点字间距 ... 大小是 3.0 .. 可以再让文字细一点 .. FontWeight.w400 .. 应用工具栏上原本的标题可以暂时把它去掉 ..

在模拟器上试一下 .. 向下滚动视图 .. 你会发现标题文字会慢慢变小,颜色也会越来越透明,直到最后从屏幕上消失 ..

向上滚动视图的时候 .. 标题文字会逐渐变大显示出来..

我们还可以设置 FlexibleSpaceBar 的背景 .. 用一个 background 属性 .. 背景可以使用一个来自网络的图像 .. 设置一下这个图像的地址 ..

现在这个应用工具栏上会显示一个背景图像 ..

我们可以再把图像的 fit 属性的值设置成 BoxFit.cover ...

现在顶部的工具栏上显示的就是一个 FlexibleSpaceBar ... 向下滚动 .. 背景图像会逐渐消失 .. 向上滚动的时候,这个背景图像又会逐渐显示出来 ..

最后我们可以再试一下把这个 SliverDemo 放到一个标签视图里面 .. 回到 main.dart ..

home 的值,可以换成原来的 Home ...

再找到这个小部件 .. 把第四个标签的视图换成 SliverDemo ...

打开最后一个小标签 ... 上面会显示的就是这个 SliverDemo ...

现在显示的是一个列表视图... 在 sliver_demo 里面,可以修改一下 .. 我们还做过一个网格视图 ... 名字是 SliverGridDemo ...

带渐近动画的可伸缩空间《 Flutter 移动应用:Sliver 》

统计

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

社会化网络

关于

微信订阅号

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