1. DecoratedBox
DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。
DecoratedBox定义如下：
const DecoratedBox({
Decoration decoration,
DecorationPosition position = DecorationPosition.background,
Widget? child
})
-
decoration：代表将要绘制的装饰，它的类型为Decoration。Decoration是一个抽象类，它定义了一个接口createBoxPainter()，子类的主要职责是需要通过实现它来创建一个画笔，该画笔用于绘制装饰。 -
position：此属性决定在哪里绘制Decoration，它接收DecorationPosition的枚举类型，该枚举类有两个值：-
background：在子组件之后绘制，即背景装饰。 -
foreground：在子组件之上绘制，即前景。
-
2. BoxDecoration
我们通常会直接使用BoxDecoration类，它是一个Decoration的子类，实现了常用的装饰元素的绘制。
BoxDecoration({
Color color, //颜色
DecorationImage image,//图片
BoxBorder border, //边框
BorderRadiusGeometry borderRadius, //圆角
List<BoxShadow> boxShadow, //阴影,可以指定多个
Gradient gradient, //渐变
BlendMode backgroundBlendMode, //背景混合模式
BoxShape shape = BoxShape.rectangle, //形状
})
2.1 带阴影的背景色渐变的按钮
class MSDecoratedBoxDemo1 extends StatelessWidget {
const MSDecoratedBoxDemo1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.orange.shade700]), //背景渐变
borderRadius: BorderRadius.circular(3), //3像素圆角
boxShadow: [
BoxShadow(
color: Colors.black54,
blurRadius: 4.0,
offset: Offset(2.0, 2.0),
),
],
),
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Text("Login",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400)),
),
onTap: () {
print("Login Click");
},
),
),
),
);
}
}
image.png
2.2 圆形头像 圆角头像
圆形头像
class MSDecoratedBoxDemo2 extends StatelessWidget {
const MSDecoratedBoxDemo2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
child: DecoratedBox(
decoration: BoxDecoration(
image:
DecorationImage(image: AssetImage("assets/images/tx2.jpeg")),
shape: BoxShape.circle,
),
),
),
),
);
}
}
image.png
圆角头像
class MSDecoratedBoxDemo3 extends StatelessWidget {
const MSDecoratedBoxDemo3({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/tx2.jpeg"),
),
borderRadius: BorderRadius.circular(20.0),
shape: BoxShape.rectangle,
),
),
),
),
);
}
}
image.png
