Flutter 布局 - Container详解

Posted 2023-05-03

参考技术A Container的组成如下：

- width  和  height ：宽和高。

- color ：背景色，值为一个 Color 对象，不能与 decoration 属性同时设置。

-  margin ：外边距，值为一个 EdgeInsets 对象。EdgeInsets 对象即可调用EdgeInsets.all() 方法统一设置左上右下四条边的边距，也可以调用 EdgeInsets.fromLTRB() 分别设置左上右下四条边的边距。

-  padding ：内间距，值同 margin。

-  alignment ：元素对齐方式

-  decoration ：装饰、背景颜色、边框、背景图片、等，不能与 color 属性同时设置

-  child ：子组件

-参数 alignment：

topCenter ：顶部居中对齐     topLeft ：顶部左对齐      topRight ：顶部右对齐      center ：水平垂直居中对齐      centerLeft ：垂直居中水平居左对齐      centerRight ：垂直居中水平居右对齐      bottomCenter 底部居中对齐     bottomLeft ：底部居左对齐     bottomRight ：底部居右对齐

-参数 decoration ：

 Container参数的使用如下：

Flutter控件——容器控件：Container

Container

容器，一个拥有绘制、定位、调整大小的 widget，是开发中最常用、最基础的组件。
由于Container结合了许多其他小部件，每个小部件都有自己的布局行为，因此Container的布局行为有些复杂。

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

Container.dart 源码：

  Container(
    Key? key,       //key用于控制控件如何取代树中的另一个控件，即若widget指定了相同的key，则这些widget可以复用。若开发中对组建的使用没有较高要求，一般不设置该属性。
    this.alignment,       //Container内child的对齐方式  Alignment.center
    this.padding,       // 内边距  const EdgeInsets.all(10.0), // EdgeInsets.fromLTRB(value1,value2,value3,value4) LTRB分别代表左、上、右、下。
    this.color,       //  容器的颜色 和 decoration 互斥   Colors.white,
    this.decoration,       // Decoration 为背景装饰 简单理解就是设置样式，不仅仅是设置颜色，还包括形状、图片、渐变、阴影、模糊等
    this.foregroundDecoration,       // 前景装饰
    double? width,       //
    double? height,       //
    BoxConstraints? constraints,    //约束条件：eg：constraints: BoxConstraints(maxWidth: max, ),
    this.margin,       // 外边距
    this.transform,       //
    this.transformAlignment,       //
    this.child,       //
    this.clipBehavior = Clip.none,       //
  )

ps：

• 容器的大小可以通过width、height属性来指定，也可以通过constraints来指定；如果它们同时存在时，width、height优先。实际上Container内部会根据width、height来生成一个constraints。
• color和decoration是互斥的，如果同时设置它们则会报错！实际上，当指定color时，Container内会自动创建一个decoration

---

属性：

• alignment： Alignment
  • bottomCenter:下部居中对齐。
  • bottomLeft: 下部左对齐。
  • bottomRight：下部右对齐。
  • center：纵横双向居中对齐。
  • centerLeft：纵向居中横向居左对齐。
  • centerRight：纵向居中横向居右对齐。
  • topLeft：顶部左侧对齐。
  • topCenter：顶部居中对齐。
  • topRight： 顶部居左对齐。
• decoration：Decoration

  • Decoration为抽象类，没有具体的实现，需要使用其实现类或子类，

  • 其实现类主要有BoxDecoration、FlutterLogoDecoration、UnderlineTabIndicator、ShapeDecoration。

  • Container中通常使用BoxDecoration，BoxDecoration有如下几个参数：

    const BoxDecoration(
      this.color,       //颜色  Colors.white,
      this.image,      // 图片  image就是设置装饰图片，图片分为资源图片、本地图片和网络图片，这里只能使用DecorationImage
                          DecorationImage中指定了image的类型必须是ImageProvider，也就是这里使用的是AssetImage()、
                          NetworkImage()、FileImage()，而不是Image.asset()、Image.net()、Image.file()等。
      this.border,      //边框  Border.all(width: 2.0, color: Colors.green),
      this.borderRadius,      //圆角  BorderRadius.circular(10)
      this.boxShadow,      // 阴影
      this.gradient,      // 渐变  const LinearGradient(colors: [Colors.lightBlue, Colors.purple ]),
      this.backgroundBlendMode,      //  背景混合模式，和前面讲的图片滤镜差不多，大概有将近30种模式
      this.shape = BoxShape.rectangle,      //
    )