1、不废话,先爆照看效果
2、Decoration介绍
Flutter的Decoration可以设置:背景色 背景图 边框 圆角 阴影 渐变色 的等属性,有点像android里面的shape,Decoration 是基类,它的子类有下面这些
- BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像
- ShapeDecoration:实现四边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场(竖向椭圆)、 角形(八边角)边色
- FlutterLogoDecoration:Flutter图片
- UnderlineTabindicator:下划线
这里先介绍常用的 BoxDecoration,构造方法
const BoxDecoration({
this.color,//背景色
this.image,//图片
this.border,//描边
this.borderRadius,//圆角大小
this.boxShadow,//阴影
this.gradient,//渐变色
this.backgroundBlendMode,//图像混合模式
this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用
})
boxShadow 阴影
- color - 阴影颜色
- offset - 阴影相偏移量
- blurRadius - 高斯模糊数值
- spreadRadius - 阴影膨胀量,这个值我是真不知有啥用,没场景啊,一般不写这个值
gradient渐变
支持2种渐变:LinearGradient线性渐变 和 RadialGradient扫描渐变
- LinearGradient :
- begin - 渐变开始的位置
- end - 渐变结束的位置
- colors - 渐变颜色,是数组
- stops - 值列表,装有0.0到1.0的数值
- tileMode - 平铺模式
shape形状
- rectangle是矩形,BoxShape.circle是圆形,BoxShape.circle和borderRadius不能一起使用
3、代码测试
效果1测试代码
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',home: Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method,and use it to set our appbar title.
title: Text('hello flutter'),),body: Center(
child: DecoratedBox(
// padding: EdgeInsets.all(16),// padding: EdgeInsets.fromLTRB(10,20,30,40),// padding: EdgeInsets.only(left: 10,right: 30),decoration: BoxDecoration(
// 背景色
color: Colors.lightBlueAccent,// 边框,
border: Border.all(color: Colors.yellowAccent,style: BorderStyle.solid,width: 5),// 背景图
image: new DecorationImage(
image: new NetworkImage(
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605,2864708693&fm=11&gp=0.jpg'),fit: BoxFit.cover
),borderRadius: BorderRadius.all(Radius.circular(30)),boxShadow:[
BoxShadow(
color: Colors.redAccent,offset: Offset(20,20),blurRadius: 10,]
),child: Container(
height: 200,width: 200,);
}
}
效果2测试代码
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',decoration: BoxDecoration(
// 背景色
gradient: LinearGradient(colors:[Colors.blue,Colors.green]),//背景渐变
color: Colors.lightBlueAccent,// 背景图
borderRadius: BorderRadius.all(Radius.circular(3)),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("chenyu",style: TextStyle(color: Colors.white),)
),);
}
}
效果3测试代码
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',decoration: BoxDecoration(
// 背景色
border: Border.all(
color: Colors.yellowAccent,shape: BoxShape.circle,child: Container(
width: 200,height: 200,);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。