Flutter – BoxDecoration小部件介绍

Flutter中的Decoration类提供了多种小部件以修饰widget的外观，其中BoxDecoration小部件是最常用的之一。它可以用于修饰一个容器的背景、边框、圆角、阴影等外观特征。

基本用法

BoxDecoration类可以通过BoxDecoration()构造函数来创建。下面是一个使用BoxDecoration的例子：

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.grey), 
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text(
    'Hello, world!',
    style: TextStyle(fontSize: 20),
  ),
),

这个例子创建了一个宽度和高度均为200的Container，它的背景是白色的，边框是灰色的，圆角半径是10。在容器内部放置了一段文本。

BoxDecoration属性

BoxDecoration有很多属性可以用来调整widget的外观。下面我们将逐一介绍这些属性：

color

设置小部件的背景颜色。

BoxDecoration(
  color: Colors.white,
)

image

设置背景图片。

BoxDecoration(
  image: DecorationImage(
    image: AssetImage('assets/images/bg.png'),
    fit: BoxFit.cover,
  ),
)

border

设置边框，可以设置边框的颜色、宽度、样式。

BoxDecoration(
  border: Border.all(
    color: Colors.grey,
    width: 1,
    style: BorderStyle.solid,
  ),
)

borderRadius

设置圆角，可以设置4个角的半径。

BoxDecoration(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(10),
    topRight: Radius.circular(20),
    bottomLeft: Radius.circular(30),
    bottomRight: Radius.circular(40),
  ),
)

boxShadow

设置阴影，可以设置阴影的颜色、偏移量、模糊半径和扩散半径。

BoxDecoration(
  boxShadow: [
    BoxShadow(
      color: Colors.grey.withOpacity(0.5),
      offset: Offset(0, 3),
      blurRadius: 5,
      spreadRadius: 2,
    ),
  ],
)

gradient

设置渐变色。

BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.red,
      Colors.blue,
    ],
  ),
)

shape

设置何种形状，可以是矩形、圆形等。

BoxDecoration(
  shape: BoxShape.circle,
)

总结

BoxDecoration是Flutter中用来修饰widget外观的一个非常实用的小部件。通过改变他的属性，我们可以轻松地为一个小部件添加背景、边框、圆角、阴影等特征，使得我们的UI更加美观。