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,),),
)

---

属性用途总结：