酷客网Flutter 装饰盒子(DecoratedBox)，DecoratedBox可以从多方面进行装饰处理，如颜色、形状、阴影、渐变及背景图片等。它有一个非常重要的属性是decoration，类型为BoxDecoration。
那么，我们重点列一下BoxDecoration的主要属性，如表所示：
接下来编写几个例子来演示各种装饰的效果。
背景图效果
给容器添加背景图，只需要给image属性指定一个DecorationImage对象即可。它和Image的属性基本一致。
示例代码如下所示：
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BoxDecoration装饰盒子-背景图示例'),
),
body: Center(
child: Container(
width: 300.0,
height: 300.0,
// 装饰器
decoration: BoxDecoration(
// 背景色
color: Colors.grey,
// 图片装饰器
image: DecorationImage(
image: ExactAssetImage('images/1.jpeg'),//添加image属性
fit: BoxFit.cover,//填充类型
),
),
)
),
);
}
}
void main() {
runApp(
MaterialApp(
title: 'BoxDecoration装饰盒子-背景图示例',
home: LayoutDemo(),
),
);
}
上述示例代码的运行效果大致如图所示：
边框圆角处理
给容器添加边框，既可以添加所有边框，也可以只加某一个边框。为了使容器显得平滑，可以添加borderRadius属性值，值越大弧度越大。边框设置的代码如下所示：
border: Border.all(color: Colors.grey, width: 4.0),
其中EdgeInsets支持多种自定义方法：
EdgeInsets.all()，所有方向。EdgeInsets.only(left，top，right，bottom)，分别定义各个方向的边框。EdgeInsets.symmetric(vertical，horizontal)，自定义垂直、水平方向边框。EdgeInsets.fromWindowPadding(ui.WindowPadding padding, double devicePixelRatio)，根据机型屏幕尺寸定义。
在“背景图效果”示例的基础上，添加一个边框及圆角处理。完整的示例代码如下所示：
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BoxDecoration装饰盒子-边框圆角示例'),
),
body: Center(
child: Container(
width: 260.0,
height: 260.0,
// 装饰器
decoration: BoxDecoration(
// 背景色
color: Colors.white,
// 添加所有的边框，颜色为灰色，宽度为4.0
border: Border.all(color: Colors.grey, width: 4.0),
// 添加边框弧度，这样会有一个圆角效果
borderRadius: BorderRadius.circular(36.0),
// 添加背景图片
image: DecorationImage(
image: ExactAssetImage('images/1.jpeg'), //添加image属性
fit: BoxFit.cover, //填充类型
),
),
),
),
);
}
}
void main() {
runApp(
MaterialApp(
title: 'BoxDecoration装饰盒子-边框圆角示例'
home: LayoutDemo(),
),
);
}
上述示例代码的运行效果大致如图所示：
边框阴影处理
为容器的边框加上阴影，会使容器显得更有立体感。在DecoratedBox组中添加BoxShadow即可实现。
BoxShadow有几个重要属性，如下所示：
color：阴影颜色。blurRadius：模糊值。spreadRadius：扩展阴影半径。offset：x和y方向偏移量。
BoxShadow的使用如下所示：
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey, //阴影颜色
blurRadius: 8.0, //模糊值
spreadRadius: 8.0, //扩展阴影半径
offset: Offset(-1.0, 1.0), //x和y方向偏移量
),
],
编写一个例子，添加一个容器并加上BoxShadow处理。完整的示例代码如下所示：
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BoxDecoration装饰盒子-边框阴影示例'),
),
body: Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.white,
// 边框阴影效果，可添加多个BoxShadow，是一种组合效果
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey, //阴影颜色
blurRadius: 8.0, //模糊值
spreadRadius: 8.0, //扩展阴影半径
offset: Offset(-1.0, 1.0), //x/y方向偏移量
),
],
),
child: Text(
'BoxShadow阴影效果',
style: TextStyle(
color: Colors.black,
fontSize: 28.0,
),
),
),
),
);
}
}
void main() {
runApp(
MaterialApp(
title: 'BoxDecoration装饰盒子-边框阴影示例',
home: LayoutDemo(),
),
);
}
上述示例代码的运行效果大致如图所示：
渐变处理
渐变有两种形式，一种是LinearGradient线性渐变，另一种是RadialGradient环形渐变。不管是哪种渐变形式都有一个共性，即需要一组数组数据来逐步渲染界面。
LinearGradient线性渐变参数包括：
begin：起始偏移量。end：终止偏移量。colors：渐变颜色数据集。
LinearGradient的使用如下所示：
gradient: LinearGradient(
begin: const FractionalOffset(0.5, 0.0), //起始偏移量
end: const FractionalOffset(1.0, 1.0), //终止偏移量
// 渐变颜色数据集
colors: <Color>[
Colors.red,
Colors.green,
Colors.blue,
Colors.grey,
],
),
编写一个例子，添加一个容器并加上线性渐变处理。完整的示例代码如下所示：
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('LinearGradient线性渐变效果'),
),
body: Center(
child: DecoratedBox(
decoration: BoxDecoration(
// 线性渐变
gradient: LinearGradient(
begin: const FractionalOffset(0.5, 0.0), //起始偏移量
end: const FractionalOffset(1.0, 1.0), //终止偏移量
// 渐变颜色数据集
colors: <Color>[
Colors.red,
Colors.green,
Colors.blue,
Colors.grey,
],
),
),
child: Container(
width: 280.0,
height: 280.0,
child: Center(
child: Text(
'LinearGradient线性渐变效果',
style: TextStyle(
color: Colors.black,
fontSize: 28.0,
),
),
),
),
),
),
);
}
}
void main() {
runApp(
MaterialApp(
title: 'DecoratedBox装饰盒子示例',
home: LayoutDemo(),
),
);
}
上述示例代码的运行效果大致如图所示：
RadialGradient环形渐变参数包括：
center：中心点偏移量，即x和y方向偏移量。radius：圆形半径。colors：渐变颜色数据集。
RadialGradient的使用如下代码所示：
gradient: RadialGradient(
center: const Alignment(-0.0, -0.0),
// 中心点偏移量，x和y均为0.0表示在正中心位置
radius: 0.50, //圆形半径
// 渐变颜色数据集
colors: <Color>[
Colors.red,
Colors.green,
Colors.blue,
Colors.grey,
],
),
编写一个例子，添加一个容器并加上环形渐变处理。完整的示例代码如下所示：
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RadialGradient环形渐变效果'),
),
body: Center(
child: DecoratedBox(
decoration: BoxDecoration(
// 环形渐变
gradient: RadialGradient(
// 中心点偏移量，x和y均为0.0表示在正中心位置
center: const Alignment(-0.0, -0.0),
// 圆形半径
radius: 0.50,
// 渐变颜色数据集
colors: <Color>[
Colors.red,
Colors.green,
Colors.blue,
Colors.grey,
],
),
),
child: Container(
width: 280.0,
height: 280.0,
child: new Center(
child: Text(
'RadialGradient环形渐变效果',
style: TextStyle(
color: Colors.black,
fontSize: 28.0,
),
),
),
),
),
),
);
}
}
void main() {
runApp(
MaterialApp(
title: 'DecoratedBox装饰盒子示例',
home: LayoutDemo(),
),
);
}
上述示例代码的运行效果大致如图所示：
酷客教程相关文章：
评论前必须登录！
注册