5.2 容器类组件 - DecoratedBox

DecoratedBox

const DecoratedBox({
  super.key,
  required this.decoration, // 绘制的装饰
  this.position = DecorationPosition.background, // 在哪里绘制，默认背景绘制
  super.child,
})

BoxDecoration

const BoxDecoration({
  this.color, // 颜色
  this.image, // 图片
  this.border, // 边框
  this.borderRadius, // 圆角
  this.boxShadow, // 阴影
  this.gradient, // 渐变
  this.backgroundBlendMode, // 背景混合模式
  this.shape = BoxShape.rectangle, // 形状
})

示例

@override
Widget build(BuildContext context) {
  return const DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient( // 背景渐变
          colors: [Colors.red, Colors.orange]
        ),
        borderRadius: BorderRadius.all(Radius.circular(9)), // 圆角
        boxShadow: [ // 阴影
          BoxShadow(
            color: Colors.black54,
            offset: Offset(20, 20),
            blurRadius: 4
          )
        ]
      ),
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 80,vertical: 80),
      child: Text("Login",style: TextStyle(color: Colors.white)),
    ),
  );
}