flutter 装饰类【BoxDecoration】

装饰类 BoxDecoration

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

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

1. color: Colors.blue,

复制代码

2.image

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

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

复制代码

3.border

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

1. border: Border.all(
2.   color: Colors.red,
3.   width: 2.0,
4. ),

复制代码

4.borderRadius

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

1. borderRadius: BorderRadius.circular(10),

复制代码

5.shape

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

1. shape: BoxShape.circle,

复制代码

6.gradient

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

1. gradient: LinearGradient(
2.   colors: [Colors.blue, Colors.purple],
3.   begin: Alignment.topLeft,
4.   end: Alignment.bottomRight,
5. ),

复制代码

7.boxShadow

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

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

复制代码

8.backgroundBlendMode

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

1. backgroundBlendMode: BlendMode.multiply,

复制代码

9.clipBehavior

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

1. clipBehavior: Clip.hardEdge,

复制代码

---

完备属性示例：

1. Container(  width: 100,  height: 100,  decoration: BoxDecoration(    color: Colors.blue,
2. // 配景颜色    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,    ),  ),)

复制代码

---

属性用途总结：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。