Flutter BoxDecoration

牛马1112026-04-12 11:36

在 Flutter 里，decoration 一般就是指 BoxDecoration ，用来给组件加背景、边框、圆角、阴影、渐变这些样式。结合你刚才在写的 ClipRRect + BackdropFilter，我给你最实用、最常用的用法。

1. 最基础写法

dart

复制代码

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
  ),
)

2. 常用属性一览

dart

复制代码

BoxDecoration(
  color: Colors.white,                // 背景色
  borderRadius: BorderRadius.circular(16), // 圆角
  border: Border.all(                 // 边框
    color: Colors.grey,
    width: 1,
  ),
  boxShadow: [                        // 阴影
    BoxShadow(
      color: Colors.black12,
      blurRadius: 10,
      offset: Offset(0, 4),
    ),
  ],
  gradient: LinearGradient(...),     // 渐变
  image: DecorationImage(...),       // 背景图
)

3. 圆角（和你前面的 borderRadius 一样）

dart

复制代码

borderRadius: BorderRadius.circular(20),

// 或者只对某些角圆角
borderRadius: BorderRadius.only(
  topLeft: Radius.circular(20),
  topRight: Radius.circular(20),
),

4. 毛玻璃常用组合（你现在的场景）

dart

复制代码

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      width: 300,
      height: 200,
      // 毛玻璃一定要用带透明度的颜色
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.15),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Center(child: Text("毛玻璃")),
    ),
  ),
)

5. 注意一个大坑

**如果 Container 用了 decoration，就不能再用 color 属性！**错误：

dart

复制代码

Container(
  color: Colors.red, // 冲突
  decoration: BoxDecoration(...),
)

正确：

dart

复制代码

Container(
  decoration: BoxDecoration(
    color: Colors.red,
  ),
)