第一百四十四回 如何在页面中添加图片背景

我们在上一章回中介绍了如何实现程序引导画面相关的内容，本章回中将介绍 如何在页面中添加图片背景.闲话休提，让我们一起Talk Flutter吧。

概念介绍

在实际项目中给页面添加背景色是容易的，因为大部分组件都提供了相关的属性来控制背景颜色，只需要修改控制背景颜色的属性值就可以，如果想把背景颜色换成图片，那么就不能使用这些控制背景色的属性了，因为图片类型和颜色类型不一样，不能把相互赋值。本章回中将介绍如何在页面中添加图片背景。

实现方法

我们提供两种添加背景图片的方法：

• 使用Stack组件叠加组件;

创建一个Stack组件，通过该组件的childern属性叠加其它组件，把图片组件放在最下方用来充当其它组件的背景图片。多个组件叠加时可以使用Stack的对齐属性调整对齐方式，通过Position组件调整组件位置。

• 使用Container容器嵌套组件；

创建一个Container组件，通过该组件的child属性嵌套其它的组件，通过该组件的decoration属性添加图片，图片位于所有被嵌套组件的最下层，该属性还可以添加边框，修改圆角。

这两种实现方法中，我们推荐使用Container容器这种方法，因为它的灵活性好一些。

示例代码

上面的小节中介绍了添加图片背景的实现方法，不过比较抽象，接下来通过代码来演示：

///页面中带有背景图片，使用stack实现
const Stack(
  children: [
    Image(
      width: 200,
      height: 200,
      opacity: AlwaysStoppedAnimation(0.5),
      image: AssetImage('images/ex.png'),
      fit: BoxFit.fill,
    ),
    Center(child: Text('This is the body')),
  ],
),
///页面中带有背景图片，使用container实现
Container(
    width: 200,
    height: 200,
    decoration:const BoxDecoration(
      ///设置容器的边框和圆角，下面的方法可以运行
      border: Border.all(color: Colors.deepPurpleAccent,width: 3),
      borderRadius: BorderRadius.circular(30),
      ///修改图片的填充方式和模糊效果
      image: DecorationImage(
        opacity: 0.5,
        // colorFilter: ColorFilter.mode(Color.fromARGB(100, 200, 20,30),BlendMode.difference),
        image: AssetImage("images/ex.png"),
        fit: BoxFit.fill,
      ),
    ),
    child:const Text('This is the body'),
  ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

上面示例代码中使用的图片需要提前准备好，代码中在关键位置添加了注释，方便大家理解代码。编译并且运行上面的程序可以看到两个大小为200的正方形图片，图片上显示的文字相当于子组件。这两个组件相当于一个局部的页面背景，大家可以自行调整组件的大小，这样可以用于不同的场景中。

此外，示例代码中的子组件是一个Text，大家可以换成自己想要的其它组件。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，与"如何在页面中添加图片背景"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!