关于flutter:Flutter第十课Flutter组件之Container

Flutter第十课:Flutter组件之Container

一:Container组件
1.能够设置宽高:flutter中大部分组件不能设置宽高,须要依赖容器
2.增加背景色彩
3.增加背景图像
4.增加边框
5.增加内外边框margin和padding

//构造方法
  Container({
    Key? key,
    this.alignment,//管制child的对其形式
    this.padding,//设置内边距
    this.color,//设置背景色
    this.decoration,//绘制在child上层的装璜,不能与color同时应用
    this.foregroundDecoration,//绘制在child下层的装璜
    double? width,//宽
    double? height,//高
    BoxConstraints? constraints,//增加到child上额定的约束条件大小,范畴束缚,constraints有四个属性:minWidth、minHeight、maxWidth、maxHeight。
    this.margin,//外边距
    this.transform,////设置container的变换矩阵,类型为Matrix4
    this.transformAlignment,
    this.child,//子组件
    this.clipBehavior = Clip.none,
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(clipBehavior != null),
       assert(decoration != null || clipBehavior == Clip.none),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'To provide both, use "decoration: BoxDecoration(color: color)".',
       ),
       constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,
       super(key: key);
属性名 性能 值所属类型
alignment topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:程度垂直居中对齐 centerLeft:垂直居中程度居左对齐 centerRight:垂直居中程度居右对齐 bottomCenter 底部居中对齐bottomLeft:底部居左对齐 bottomRight:底部居右对齐 Alignment
decoration 容器的润饰器,用于背景或者border BoxDecoration
margin Container与内部其余组件的间隔 值为一个 EdgeInsets 对象。EdgeInsets 对象即可调用EdgeInsets.all() 办法对立设置左上右下四条边的边距,也能够调用 EdgeInsets.fromLTRB() 别离设置左上右下四条边的边距
padding Container边缘与Child之间的间隔 值为一个 EdgeInsets 对象。EdgeInsets 对象即可调用EdgeInsets.all() 办法对立设置左上右下四条边的边距,也能够调用 EdgeInsets.fromLTRB() 别离设置左上右下四条边的边距
transform 调整旋转的角度 Matrix4
height 容器高度 double
width 容器宽度 double
child 容器子元素 Widght

color:Color背景色,不能与 decoration 属性同时设置
decoration:Decoration装璜,也就是设置背景色、边框、圆角等,不能和color同时应用,Decoration是抽象类,个别应用BoxDecoration的实现类(FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator也是Decoration的实现类)

const BoxDecoration({
    this.color,//背景填充色彩
    this.image,//应用图片作为装璜
    this.border,//能够设置边框色彩、边框宽度、边框款式
    this.borderRadius,//边框圆角
    this.boxShadow,//暗影成果
    this.gradient,//设置成突变成果的背景,会笼罩 color
    this.backgroundBlendMode,//混合模式(暂不理解)
    this.shape = BoxShape.rectangle,
  }) : assert(shape != null),
       assert(
         backgroundBlendMode == null || color != null || gradient != null,
         "backgroundBlendMode applies to BoxDecoration's background color or "
         'gradient, but no color or gradient was provided.'
       );

栗子:

 return Scaffold(
        body: Center(
      child: Container(
        //对齐形式
        alignment: Alignment.center,
        //内边距
        padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
        //背景色
//          color: Colors.yellow,
        //装璜
        decoration: BoxDecoration(
          //背景色
          color: Colors.red,
          //图片地址
//        image: DecorationImage(image: NetworkImage("url")),
          //边框
          border: Border.all(color: Color(0xff000000), width: 5.0),
          //圆角
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              topRight: Radius.circular(20.0),
              bottomLeft: Radius.circular(30.0),
              bottomRight: Radius.circular(40.0)),
          //暗影
          boxShadow: [BoxShadow(color: Color(0xff000000), blurRadius: 5.0)],
          //渐变色
          gradient: LinearGradient(
              colors: [Colors.amberAccent, Colors.blue, Colors.deepPurple]),
//          backgroundBlendMode: BlendMode.color //混合模式
        ),
        //装璜,child之上
//      foregroundDecoration: BoxDecoration(),
        child: Text(
          "我是一个文本",
          style: TextStyle(color: Colors.red),
        ),
        //宽
        width: 300.0,
        //高
        height: 300.0,
        //外边距
        margin: EdgeInsets.all(10.0),
        //依据x,y,z的值进行平移
//          transform:Matrix4.translationValues(20.0, 20.0, 20.0),
        //依据x,y,z的值进行缩放,正值放大,负值放大
//            transform: Matrix4.diagonal3Values(-2, -2, 1),
        //依据z轴进行旋转
//            transform: Matrix4.rotationZ(1.3),
        //依据y轴进行旋转
//        transform: Matrix4.rotationY(1.3),
        //依据x轴进行旋转
//      transform: Matrix4.rotationX(1.5),
        //扭曲,依据x,y轴的值进行扭曲
//        transform: Matrix4.skew(1.5, 0.0),
        //扭曲,依据x轴的值进行扭曲
//        transform: Matrix4.skewX(1.3),
        //扭曲,依据y轴的值进行扭曲
        transform: Matrix4.skewY(-0.5),
      ),
    ));

小知识点Tips:
*dart 1.x的时候,new是不能省略的。
dart 2.x的时候,new是可选关键词,能够省略*

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理