本文共 6383 字，大约阅读时间需要 21 分钟。

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
   
     {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(widget.title),      ),      body: ConstrainedBox(        constraints: BoxConstraints.expand(),        child: Column(          children: 
    
     [            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),              ),            ),          )

转载地址：http://wlnci.baihongyu.com/