容器

Container

Container 是一个组合类容器,它本身不对应具体的 RenderObject,它是 DecoratedBox、ConstrainedBox、Transform、Padding、Align 等组件组合的一个多功能容器,所以我们只需通过一个 Container 组件可以实现同时需要装饰、变换、限制的场景。

Container 的定义:

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

示例:

Container(
  margin: EdgeInsets.only(top: 100, left: 100), // 容器外填充
  constraints: BoxConstraints.tightFor(width: 200, height: 150), // 卡片大小
  decoration: BoxDecoration( // 背景装饰
      gradient: RadialGradient( // 背景径向渐变
          colors: [Colors.red, Colors.orange],
          center: Alignment.center,
          radius: .98
      ),
      boxShadow: [ // 卡片阴影
        BoxShadow(
            color: Colors.black54,
            offset: Offset(20, 20),
            blurRadius: 14
        )
      ]
  ),
  alignment: Alignment.center, // 卡片内文字居中
  transform: Matrix4.rotationZ(.2), // 卡片倾斜变换
  child: Text( // 卡片文字
    "Hello",
    style: TextStyle(color: Colors.white, fontSize: 40),
  ),
)

Container 类比于 HTML 中的 div, 可以对其进行各种定制

参考

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress