Fulutter 设置圆角背景图片&Container 设置边框、圆角、阴影

Fulutter 设置圆角背景图片&Container 设置边框、圆角、阴影

---

在 Flutter 中，如何实现背景图片呢？又如何实现带圆角的背景图片呢？

Fulutter 设置圆角背景图片

使用 Container 的 decoration 可以很方便的设置一个容易组件背景图片的圆角大小：

Container(
          decoration: ShapeDecoration(
            image: new DecorationImage(
              //设置背景图片
              image: AssetImage("assets/images/task_icon.jpg"),
              fit: BoxFit.cover,
            ),
            //设置圆角
            shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(20)),
          ),
          //设置边距
          margin: EdgeInsets.only(top: 16, left: 20, right: 20),
          child: new Card(
            color: Colors.transparent,
         ……
)

使用 Container 设置边框、圆角、阴影

如果我们想设置一个容器组件的边框、圆角以及阴影怎么办呢?

实现代码：

Container(
          decoration: BoxDecoration(
            //设置边框
            border: new Border.all(color: Color(0xFFFF0000), width: 0.5),
            //背景颜色
            color: Colors.white, 
            //设置圆角
            borderRadius: new BorderRadius.circular((5.0)), 
            //设置阴影
            boxShadow: [BoxShadow(color: Colors.lightGreen, offset: Offset(1.0, 1.0), blurRadius: 1.0, spreadRadius: 1.0), ],
          ),
)

---

**PS：更多精彩内容，请查看 --> 《Flutter 开发》
**PS：更多精彩内容，请查看 --> 《Flutter 开发》
**PS：更多精彩内容，请查看 --> 《Flutter 开发》