Flutter DecoratedBox Widget使用详解

Flutter中，DecoratedBox Widget是一个可以在其子组件绘制前或后绘制背景、边框、渐变等装饰效果的Widget。

DecoratedBox的定义如下：

class DecoratedBox extends StatelessWidget {
  const DecoratedBox({
    Key? key,
    required this.decoration,
    this.position = DecorationPosition.background,
    this.child,
  }) : assert(decoration != null),
       assert(position != null),
       super(key: key);

  final Decoration decoration;

  final DecorationPosition position;

  final Widget? child;

  ...
}

其中：

• decoration: 装饰样式，可以是背景、边框、渐变等
• position: 装饰的位置，可以是在子组件之前或之后绘制
• child: 子组件

下面我们来看一下DecoratedBox的使用示例。

DecoratedBox(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.red, Colors.orange[700]!],
    ),
    borderRadius: BorderRadius.circular(3.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black54,
        offset: Offset(2.0, 2.0),
        blurRadius: 4.0,
      )
    ],
  ),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
    child: Text(
      "Login",
      style: TextStyle(color: Colors.white),
    ),
  ),
);

上述代码中，我们在一个文本的外面嵌套了一个DecoratedBox，并设置了渐变、圆角和阴影等装饰效果。