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

属性用途总结:

相关推荐
技术男33 分钟前
flutter中怎么局部刷新
flutter
恋猫de小郭1 小时前
Flutter 也有类 React Flow 的节点流程编辑器,快来了解下刚刚开源的 vyuh_node_flow
android·前端·flutter
我命由我123453 小时前
Android PDF 操作 - AndroidPdfViewer 显示 PDF 异常清单(数据为 null、数据为空、PDF 文件损坏、非 PDF 文件)
android·java·java-ee·pdf·android studio·android-studio·android runtime
火柴就是我7 小时前
android:enableJetifier=true 再学习
android·flutter
星释9 小时前
鸿蒙Flutter三方库适配指南-04.使用MacOS搭建开发环境
flutter·macos·harmonyos
消失的旧时光-194320 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
星释21 小时前
鸿蒙Flutter三方库适配指南-02.Flutter相关知识基础
flutter·华为·harmonyos
傅里叶1 天前
Flutter项目使用 buf.build
flutter
恋猫de小郭1 天前
iOS 26 开始强制 UIScene ,你的 Flutter 插件准备好迁移支持了吗?
android·前端·flutter
yuanlaile1 天前
Flutter开发HarmonyOS鸿蒙App商业项目实战已出炉
flutter·华为·harmonyos