Flutter容器类Widget使用----Padding、DecoratedBox和ConstrainedBox

容器顾名思义是可以容纳其他 Widget 的，这一节我们学习Padding、DecoratedBox和ConstrainedBox。

一、Padding

在 Android 开发中我们给控件会设置内边距和外边距，也就是 padding 和 margin，当然父控件如果设置了 padding 实际上对子控件也会造成影响。Flutter 中 Padding 可以给其子节点添加填充。

  const Padding({
    Key key,
    @required this.padding,
    Widget child,
  })

padding ---- EdgeInsetsGeometry 类型，为子节点插入填充

EdgeInsetsGeometry 是一个抽象类，我们一般使用其子类 EdgeInsets

class EdgeInsets extends EdgeInsetsGeometry {
  /// 分别指定四个方向的填充。
  const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);

  /// 所有方向均使用相同数值的填充。
  const EdgeInsets.all(double value)
    : left = value,
      top = value,
      right = value,
      bottom = value;

  /// 可以设置具体某个方向的填充。
  const EdgeInsets.only({
    this.left = 0.0,
    this.top = 0.0,
    this.right = 0.0,
    this.bottom = 0.0,
  });

  /// 设置对称方向的填充。
  const EdgeInsets.symmetric({
    double vertical = 0.0,
    double horizontal = 0.0,
  }) : left = horizontal,
       top = vertical,
       right = horizontal,
       bottom = vertical;
  ......
}

下面我们给 Padding 的 child 设置一个 Text 看一下效果。效果是 Text 周围预留 8px。

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text("观察如何影响子控件，观察如何影响子控件，观察如何影响子控件")
),

二、ConstrainedBox

Constrained 约束的意思，Box 盒子，所以这个容器实际上就是一个带有限制的框子！

  ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child,
  })

constraints ---- 对 child 施加的附加约束。

  const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
  })

这些属性非常好理解，最小宽度、最大宽度、最小高度和最大高度。另外当设置为 double.infinity 代表无限大。

接下来我们对一个 Text 施加限制，观察 ConstrainedBox Widget 的效果。我们设置了最大宽度为 100，无法在一行内容纳所有的文字，要换行几次才行。

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 100),
  child: Text("观察如何影响子控件，观察如何影响子控件，观察如何影响子控件"))

三、DecoratedBox

可装饰的 Box，可以在其子 Widget 绘制前（或后）绘制一些装饰，如背景和边框等。

  const DecoratedBox({
    Key key,
    @required this.decoration,
    this.position = DecorationPosition.background,
    Widget child,
  })

decoration ---- 代表将要绘制的装饰，它的类型为 Decoration，我们一般使用它的子类 BoxDecoration。

position ---- 在哪里画框装饰。

enum DecorationPosition {
  /// 子 Widget 之后
  background,

  /// 子 Widget 之前
  foreground,
}

下面来详细学习 BoxDecoration。

  const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })

color ---- 背景颜色

image ---- 背景图片

border ---- 边框，在背景 [color]，[gradient] 或 [image] 上方绘制边框，依据 [shape] 和 [borderRadius] 绘制。

borderRadius ---- 边框圆角

boxShadow ---- 阴影

gradient ---- 渐变

backgroundBlendMode ---- 背景混合模式

shape ---- 背景形状

再来看 border ，它是一个 BoxBorder 类型，抽象类，我们一般使用其子类 Border。

  const Border({
    this.top = BorderSide.none,
    this.right = BorderSide.none,
    this.bottom = BorderSide.none,
    this.left = BorderSide.none,
  })

这不难看出是是个方向都可以控制，另外它们的类型是 BorderSide。

  const BorderSide({
    this.color = const Color(0xFF000000),
    this.width = 1.0,
    this.style = BorderStyle.solid,
  })

color ---- 颜色

width ---- 宽度

style ---- 样式

enum BorderStyle {
  none,
  /// 以实线绘制边框。
  solid,
}

borderRadius 是 BorderRadiusGeometry 类型，我们一般使用其子类 BorderRadius。

  /// 边框半径均为 [radius]。
  const BorderRadius.all(Radius radius) : this.only(
    topLeft: radius,
    topRight: radius,
    bottomLeft: radius,
    bottomRight: radius,
  );

  /// 创建垂直对称的边框半径，其中矩形的顶部和底部的半径相同。
  const BorderRadius.vertical({
    Radius top = Radius.zero,
    Radius bottom = Radius.zero,
  }) : this.only(
    topLeft: top,
    topRight: top,
    bottomLeft: bottom,
    bottomRight: bottom,
  );

  /// 创建水平对称的边框半径，其中矩形的左侧和右侧具有相同的半径。
  const BorderRadius.horizontal({
    Radius left = Radius.zero,
    Radius right = Radius.zero,
  }) : this.only(
    topLeft: left,
    topRight: right,
    bottomLeft: left,
    bottomRight: right,
  );

  /// 仅使用给定的非零值创建边框半径，其他角将是直角。
  const BorderRadius.only({
    this.topLeft = Radius.zero,
    this.topRight = Radius.zero,
    this.bottomLeft = Radius.zero,
    this.bottomRight = Radius.zero,
  });

boxShadow ---- 在框后面投射的阴影列表，其 list 内元素为 BoxShadow 类型。

  const BoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0,
    this.spreadRadius = 0.0,
  })

color 和 offset 很容易理解，即为颜色和偏移。

创建一个偏移量。 第一个参数设置[dx]，水平分量，第二个参数[dy]，垂直分量。

const Offset(double dx, double dy)

blurRadius ---- 模糊半径

spreadRadius ---- 在应用模糊效果之前，应先对 Box 扩展，设置宽展半径。

gradient 是 Gradient 类型，2D渐变，也就是填充 Box 时要使用的渐变。我们一般使用其子类 LinearGradient、RadialGradient 和 SweepGradient。

shape 是 BoxShape 类型。

enum BoxShape {
  /// 矩形
  rectangle,
  /// 圆形
  circle,
}

来看一个使用 DecoratedBox 的例子。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ContainerRoute(),
    );
  }
}

class ContainerRoute extends StatefulWidget {
  @override
  _ContainerRouteState createState() => new _ContainerRouteState();
}

class _ContainerRouteState extends State<ContainerRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Container"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("观察如何影响子控件，观察如何影响子控件，观察如何影响子控件")),
          ConstrainedBox(
              constraints: BoxConstraints(maxWidth: 100),
              child: Text("观察如何影响子控件，观察如何影响子控件，观察如何影响子控件")),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: DecoratedBox(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.red[600], Colors.green[600]]),
                borderRadius: BorderRadius.all(Radius.circular(6)),
                boxShadow: [
                  //阴影
                  BoxShadow(
                      color: Colors.grey,
                      offset: Offset(3.0, 3.0),
                      blurRadius: 4.0,
                      spreadRadius: 2.0),
                ],
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("观察如何影响子控件，观察如何影响子控件，观察如何影响子控件"),
              ),
            ),
          )
        ],
      ),
    );
  }
}