Flutter教程07——容器

目录

1.Padding

2.装饰容器DecoratedBox

2.1BoxDecoration

 3.Container

---

1.Padding

和css中的padding作用一样，给子组件添加内边框，构造器：

Padding({
  ...
  EdgeInsetsGeometry padding,
  Widget child,
})

EdgeInsetsGeometry是一个抽象类，其子类EdgeInsets。

EdgeInsets提供了一些方法来设置边框：

fromTRB(left，top，right，bottom)

all(value)

only({left，top，right，bottom})

symmetric({ vertical, horizontal })

2.装饰容器DecoratedBox

DecoratedBox可以在其子组件绘制前后增加一些装饰，如背景、边框等。

const DecoratedBox({
  Decoration decoration,
  DecorationPosition position = DecorationPosition.background,
  Widget? child
})

decoration，表示要增加的装饰，Decoration是一个抽象类，内有一个接口createBoxPainter()用于定义装饰；

position，表示在哪里增加装饰，接收DecorationPosition的枚举值：background在子组件之后，foreground在子组件之上；

2.1BoxDecoration

BoxDecoration是DecoratedBox的子类：

BoxDecoration({
  Color color, //颜色
  DecorationImage image,//图片
  BoxBorder border, //边框
  BorderRadiusGeometry borderRadius, //圆角
  List<BoxShadow> boxShadow, //阴影,可以指定多个
  Gradient gradient, //渐变
  BlendMode backgroundBlendMode, //背景混合模式
  BoxShape shape = BoxShape.rectangle, //形状
})

示例，通过DecoratedBox给其子组件增加了背景装饰，其子组件是一个Padding增加了20的边框。

return const Center(
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Text('padding'),
        ),
      ),
);

效果：

 3.Container

Container是一个组合类容器，是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器。

Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
  ...
})

Container的大小可通过width/height设置，也可以通过constraints约束来设置，若两者同时设置width/height优先；

color和decoration都是设置背景的，两者不能同时设置，否则会报错；

return Container(
      color: Colors.blue,
      padding: const EdgeInsets.all(20),
      child: const Text(
        'Container',
        style: TextStyle(color: Colors.white),
      ),
);

效果图：