Flutter UI基础 - DecoratedBox组件

DecoratedBox

可以给child增加显示效果，如颜色，阴影，边框等

const DecoratedBox({
    Key key,
    @required this.decoration,//具体添加的效果
    this.position = DecorationPosition.background,//效果是放在背景还是前景，前景会覆盖child
    Widget child,
  }) 

BoxDecoration 具体装饰

const BoxDecoration({
    this.color,//颜色
    this.image,// 图片
    this.border,//边框
    this.borderRadius,//边框弧度
    this.boxShadow,//阴影  可以添加多个
    this.gradient,//渐变  会覆盖color
    this.backgroundBlendMode,//混合模式 
    this.shape = BoxShape.rectangle,//形状，与border borderRadius互斥
  })

 

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ConstrainedBox(
        constraints: BoxConstraints.expand(),
        child: Column(
          children: <Widget>[
            DecoratedBox(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.orange, Colors.blue[700]]), //背景渐变
                    borderRadius: BorderRadius.circular(13.0), //3像素圆角
                    boxShadow: [
                      //阴影
                      BoxShadow(
                          color: Colors.orange,
                          offset: Offset(6.0, 2.0),
                          blurRadius: 14.0)
                    ]),
                child: Padding(
                  padding:
                  EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                  child: Text(
                    "decoration",
                    style: TextStyle(color: Colors.white),
                  ),
                )
            ),
            DecoratedBox(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.red, Colors.orange[700]]), //背景渐变
                    borderRadius: BorderRadius.circular(3.0), //3像素圆角
                    boxShadow: [
                      //阴影
                      BoxShadow(
                          color: Colors.black54,
                          offset: Offset(2.0, 2.0),
                          blurRadius: 4.0)
                    ]),
                position: DecorationPosition.foreground,// background背景装饰，foreground前景装饰
                child: Padding(
                  padding:
                  EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                  child: Text(
                    "Login",
                    style: TextStyle(color: Colors.white),
                  ),
                )
            ),
            DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.green,
//                    gradient: LinearGradient(
//                        colors: [Colors.red, Colors.blue[700]]), //背景渐变 会覆盖color
                    borderRadius: BorderRadius.circular(13.0), //3像素圆角
                    border: Border.all(color: Colors.blue,width: 5,style: BorderStyle.solid),
                    boxShadow: [
                      //阴影
                      BoxShadow(
                          color: Colors.orange,
                          offset: Offset(6.0, 2.0),
                          blurRadius: 14.0)
                    ]),
                child: Padding(
                  padding:
                  EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                  child: Text(
                    "border",
                    style: TextStyle(color: Colors.white),
                  ),
                )
            ),
            DecoratedBox(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.green, Colors.blue[700]]), //背景渐变 会覆盖color
                    borderRadius: BorderRadius.circular(13.0), //3像素圆角
                    border: Border.all(color: Colors.blue,width: 5,style: BorderStyle.solid),
                    backgroundBlendMode: BlendMode.srcATop,
                    boxShadow: [
                      //阴影
                      BoxShadow(
                          color: Colors.red,
                          offset: Offset(6.0, 2.0),
                          blurRadius: 14.0),
                      BoxShadow(
                          color: Colors.orange,
                          offset: Offset(-6.0, -2.0),
                          blurRadius: 14.0),
                    ],
                ),
                child: Padding(
                  padding:
                  EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                  child: Text(
                    "BoxShadow",
                    style: TextStyle(color: Colors.white),
                  ),
                )
            ),
            DecoratedBox(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.green, Colors.blue[700]]), //背景渐变 会覆盖color
//                  backgroundBlendMode: BlendMode.srcATop,
                    boxShadow: [
                      //阴影
                      BoxShadow(
                          color: Colors.red,
                          offset: Offset(6.0, 2.0),
                          blurRadius: 14.0),
                      BoxShadow(
                          color: Colors.orange,
                          offset: Offset(-6.0, -2.0),
                          blurRadius: 14.0),
                    ],
                    shape: BoxShape.circle,// 圆形
//                    shape:BoxShape.rectangle,// 矩形
                ),
                child: Padding(
                  padding:
                  EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                  child: Text(
                    "shape",
                    style: TextStyle(color: Colors.white),
                  ),
                )
            ),
          ],
        ),
      ),
    );
  }
}

body: DecoratedBox(
            decoration: new BoxDecoration(
                color: Color(0x6600ff00),
                border: Border.all(
                    color: Color(0xff0000ff)
                ),
                borderRadius: BorderRadius.circular(10.0),
            ),
            position: DecorationPosition.foreground,
//            position: DecorationPosition.background,
            child: Container(
              padding: EdgeInsets.all(50.0),
              child: Container(
                width: 200.0,
                height: 200.0,
                color: Color(0xffff0000),
              ),
            ),
          )