勿以善小而不为,勿以恶小而为之。——刘备

      

阴影(BoxShadow)+Y轴偏移量(Offset)

 
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.green,), boxShadow: [ BoxShadow( color:
Colors.green, offset: Offset(0.0, 6.0), //阴影y轴偏移量 blurRadius: 0, //阴影模糊程度
spreadRadius: 0 //阴影扩散程度 ) ], ), child:
Text("BoxShadow(绘制阴影)+Container+BoxDecoration"), )); } }
 阴影(BoxShadow)+X轴偏移量(Offset)

     

 
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.black,), boxShadow: [ BoxShadow( color:
Colors.black, offset: Offset(6.0, 0.0), //阴影x轴偏移量 blurRadius: 0, //阴影模糊程度
spreadRadius: 0 //阴影扩散程度 ) ], ), child:
Text("BoxShadow(绘制阴影)+Container+BoxDecoration"), )); } }
 阴影(BoxShadow)+XY轴偏移量(Offset)

      

class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.green,), boxShadow: [ BoxShadow( color:
Colors.green, offset: Offset(6.0, 6.0), //阴影x轴偏移量 blurRadius: 0, //阴影模糊程度
spreadRadius: 0 //阴影扩散程度 ) ], ), child:
Text("BoxShadow(绘制阴影)+Container+BoxDecoration"), )); } }
 阴影(BoxShadow)+XY轴偏移量(Offset) +模糊(blurRadius)

     

 
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.black,), boxShadow: [ BoxShadow( color:
Colors.black, offset: Offset(-6.0, 6.0), //阴影x轴偏移量 blurRadius: 10, //阴影模糊程度
spreadRadius: 0 //阴影扩散程度 ) ], ), child:
Text("BoxShadow(绘制阴影)+Container+BoxDecoration"), )); } }
阴影(BoxShadow)+XY轴偏移量(Offset) +模糊(blurRadius)+扩散(spreadRadius) 

      
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.green,), boxShadow: [ BoxShadow( color:
Colors.green, offset: Offset(-6.0, 6.0), //阴影x轴偏移量 blurRadius: 10, //阴影模糊程度
spreadRadius: 10 //阴影扩散程度 ) ], ), child:
Text("BoxShadow(绘制阴影)+Container+BoxDecoration"), )); } }
withOpacity淡化阴影

     
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 0, color: Colors.red,), boxShadow: [ BoxShadow( color:
Colors.red.withOpacity(0.2), offset: Offset(-6.0, 6.0), //阴影x轴偏移量 blurRadius:
10, //阴影模糊程度 spreadRadius: 5 //阴影扩散程度 ) ], ), child:
Text("BoxShadow(绘制阴影)+Container+BoxDecoration"), )); } }
通过英文单词理解:

box-盒子

shadow-阴影

blur-模糊

spread-传播扩散

我们可以理解为: 这样一个装有widget的盒子的外面需要添加阴影效果,我们可以设置阴影扩散范围和阴影模糊程度.

 

技术
©2020 ioDraw All rights reserved
基于pytest框架自动化测试智慧屏和智能穿戴开发:容器组件dialogpython--大一期末测试题(含答案)让Mac系统始终不休眠的设置技巧使用Postman做mock测试谈谈全栈测试工程师【编写高质量代码:改善Java程序的151个建议】第1章:Java开发中通用的方法和准则___建议14~20解决vuex页面刷新数据丢失问题(简单有效)一个例子让你明白什么是CART回归树ValueError: Shape of passed values is (6, 3), indices imply (6, 6)