flutter 装饰类【BoxDecoration】

装饰类 BoxDecoration

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

1.color

  • 背景颜色。
  • 类型:Color?
  • 示例:
dart 复制代码
color: Colors.blue,

2.image

  • 背景图片。
  • 类型:DecorationImage?
  • 示例:
dart 复制代码
image: DecorationImage(
  image: AssetImage('assets/images/bg.png'),
  fit: BoxFit.cover,
),

3.border

  • 边框样式。
  • 类型:BoxBorder?(如 Border 或 BorderDirectional)
  • 示例:
dart 复制代码
border: Border.all(
  color: Colors.red,
  width: 2.0,
),

4.borderRadius

  • 圆角设置,仅在边框是矩形时有效。
  • 类型:BorderRadius?
  • 示例:
dart 复制代码
borderRadius: BorderRadius.circular(10),

5.shape

  • 控制组件形状,支持矩形和圆形。
  • 类型:BoxShape
  • 默认值:BoxShape.rectangle
  • 示例:
dart 复制代码
shape: BoxShape.circle,

6.gradient

  • 背景渐变样式。
  • 类型:Gradient?(如 LinearGradient 或 RadialGradient)
  • 示例:
dart 复制代码
gradient: LinearGradient(
  colors: [Colors.blue, Colors.purple],
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
),

7.boxShadow

  • 阴影效果。
  • 类型:List?
  • 示例:
dart 复制代码
boxShadow: [
  BoxShadow(
    color: Colors.black.withOpacity(0.2),
    offset: Offset(2, 4),
    blurRadius: 6,
  ),
],

8.backgroundBlendMode

  • 背景混合模式,用于控制 color 和 image 的混合效果。
  • 类型:BlendMode?
  • 示例:
dart 复制代码
backgroundBlendMode: BlendMode.multiply,

9.clipBehavior

  • 定义如何裁剪子组件。
  • 类型:Clip,默认值为 Clip.none
  • 示例:
dart 复制代码
clipBehavior: Clip.hardEdge,

完整属性示例:

dart 复制代码
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,
    ),
  ),
)

属性用途总结:

相关推荐
Zender Han15 小时前
Flutter 实现人脸检测 — 使用 google_mlkit_face_detection
android·flutter·ios
西西学代码15 小时前
Flutter---默认程序(计数器)
flutter
君逸臣劳15 小时前
玩Android Flutter版本,通过项目了解Flutter项目快速搭建开发
android·flutter
_大学牲21 小时前
Flutter 之魂 GetX🔥(二)全面解析路由管理
前端·flutter
恋猫de小郭1 天前
Flutter 在 iOS 26 模拟器跑不起来?其实很简单
android·前端·flutter
大雷神2 天前
Flutter鸿蒙开发
flutter·华为·harmonyos
shelutai2 天前
实现提供了完整的 Flutter Web 文件上传解决方案
前端·flutter
小仙女喂得猪2 天前
2025 Android原生开发者角度的Flutter 笔记整理(对比ReactNative)
android·flutter·react native
猪哥帅过吴彦祖2 天前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
程序员老刘3 天前
为什么我从不推荐GetX?11k星标背后的真相
flutter·客户端