用户帐户头部的背景图像

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

想在 UserAccountDrawerHeader 这里添加一个背景图像 .. 可以在它里面先添加一个 decoration .. 它的值是 BoxDecoration ..

里面我们可以使用 color 去设置一下这块区域的背景颜色 .. 使用一种黄色 ... 保存 .. 你会发现这块背景的颜色会有点变化 ..

添加一个背景图像,可以用一下 image 属性 .. 它的值是个 DecorationImage .. 在它里面再添加一个 image 属性,设置一个背景图像 .. 我要用的图像来自网络,所以可以使用 NetworkImage ... 它的值就是一个网络上的图像的地址 ...

现在抽屉头部这块区域里面会有一个背景图像 .. 在这个 DecorationImage 里面再添加一个 fit 属性设置一下图像的填充 .. 把它设置成 BoxFit.cover .. 让图像填满这块区域 ...

在图像的上面,我们还可以使用一些颜色滤镜 .. 添加一个 colorFilter ... 它的值是 ColorFilter.mode ... 有两个参数,一个是颜色,一个是混合模式 ..

颜色可以使用一种黄色 .. 加上一个 withOpacity 设置一下颜色的不透明度 .. 0.6

再设置一种混合模式 .. 输入 BlendMode .. 编辑器会列出可以使用的一些效果 .. 先试一下 srcOver ... 你可以试一下其它的这些混合模式 ..

这里我要用的是 hardLight 这种效果 ...

用户帐户头部的背景图像《 Flutter 移动应用:界面结构 》

统计

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

社会化网络

关于

微信订阅号

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