Flutter 之 装饰容器DecoratedBox （四十四）

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

https://book.flutterchina.club/chapter5/decoratedbox.html