当前位置：首页 > article >正文

flutter 装饰类【BoxDecoration】

article 2025/1/15 5:57:13

装饰类 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,
    ),
  ),
)