flutter 装饰类【BoxDecoration】

装饰类 BoxDecoration

BoxDecoration 是 Flutter 中用于控制 Container 等组件外观的装饰类，它提供了丰富的属性来设置背景、边框、圆角、阴影等样式。
BoxDecoration 的主要属性

1.color

• 背景颜色。
• 类型：Color?
• 示例：

color: Colors.blue,

2.image

• 背景图片。
• 类型：DecorationImage?
• 示例：

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

3.border

• 边框样式。
• 类型：BoxBorder?（如 Border 或 BorderDirectional）
• 示例：

border: Border.all(
  color: Colors.red,
  width: 2.0,
),

4.borderRadius

• 圆角设置，仅在边框是矩形时有效。
• 类型：BorderRadius?
• 示例：

borderRadius: BorderRadius.circular(10),

5.shape

• 控制组件形状，支持矩形和圆形。
• 类型：BoxShape
• 默认值：BoxShape.rectangle
• 示例：

shape: BoxShape.circle,

6.gradient

• 背景渐变样式。
• 类型：Gradient?（如 LinearGradient 或 RadialGradient）
• 示例：

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

7.boxShadow

• 阴影效果。
• 类型：List?
• 示例：

boxShadow: [
  BoxShadow(
    color: Colors.black.withOpacity(0.2),
    offset: Offset(2, 4),
    blurRadius: 6,
  ),
],

8.backgroundBlendMode

• 背景混合模式，用于控制 color 和 image 的混合效果。
• 类型：BlendMode?
• 示例：

backgroundBlendMode: BlendMode.multiply,

9.clipBehavior

• 定义如何裁剪子组件。
• 类型：Clip，默认值为 Clip.none
• 示例：

clipBehavior: Clip.hardEdge,

---

完整属性示例：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue, // 背景颜色
    border: Border.all( // 边框
      color: Colors.red,
      width: 2.0,
    ),
    borderRadius: BorderRadius.circular(15), // 圆角
    boxShadow: [ // 阴影
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        offset: Offset(3, 3),
        blurRadius: 5,
      ),
    ],
    gradient: LinearGradient( // 渐变
      colors: [Colors.blue, Colors.green],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    image: DecorationImage( // 背景图片
      image: AssetImage('assets/images/example.png'),
      fit: BoxFit.cover,
    ),
  ),
)

---

属性用途总结：