Flutter控件——容器控件:Container

Posted wzj_what_why_how

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,      //
      )
      

以上是关于Flutter控件——容器控件:Container的主要内容,如果未能解决你的问题,请参考以下文章

flutter之Container

Flutter控件——容器控件:装饰容器 DecoratedBox

Flutter控件——容器控件:装饰容器 DecoratedBox

Flutter控件——容器控件:Scaffold

Flutter控件——容器控件:Scaffold

Flutter控件——容器控件:变换Transform