用户登录

BoxDecoration 里面的 image 属性可以添加一个背景图像 .. 我们在这个最外面的这个 Container 里面 .. 先添加一个 decoration ... 它是一个 BoxDecoration ... 注释掉上面用的 color 属性 ..

然后在这个 BoxDecoration 里面,添加一个 image 属性,设置一个背景图像 .. 这的值是个 DecorationImage .. 在它的里面,再添加一个 image 属性,它的值是个图像 .. 可以使用项目里的图像,也可以使用网络上的图像 .. 使用项目里的图像要用 AssetImage .. 网络上的图像可以使用 NetworkImage ...

添加一个 NetworkImage ... 再把图像的地址交给它 ...

你会发现,界面上现在会显示一个背景图像 ..

alignment 可以控制图像的位置 .. 添加一个 alignment .. 让它在顶部居中的位置,这个值可以设置成 Alignment.topCenter ...

reqeat 属性可以设置图像的重复模式 .. 添加一个 repeat .. 它的值是 ImageRepeat .. 可以是 noRepeat .. 不重复 .. 也可以是 repeat .. 重复 .. 还可以在 Y 轴重复 .. 或者让它在 X 轴重复 ..

暂时先注释掉这个 repeat 属性 ..

这个背景图像的填充模式我们可以使用 fit 这个属性设置一下 .. 它的值是 BoxFit .. 先把它设置成 BoxFit.cover ... 让图像保持比例 .. 覆盖整个容器显示 ..

我们还可以用一个 colorFilter 去设置一种颜色的滤镜 ... 它的值用一下 ColorFilter 里的 mode ... 这个方法有两个参数,一个是滤镜用的颜色 .. 还有一个是滤镜的混合模式 .. 先设置一种滤镜的颜色 ... indigoAccent .. 400 ... 再用一个 withOpacity 设置一下颜色的不透明度 ..

然后是要使用的滤镜的混合模式 .. 这个混合模式有很多种 .. 这里我们可以用一下 BlendMode.hardLight ...

BoxDecoration:背景图像(image)《 Flutter 移动应用:基础部件 》

统计

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

社会化网络

关于

微信订阅号

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