美文网首页
Flutter学习日记(二)--Container,TextVi

Flutter学习日记(二)--Container,TextVi

作者: jeffrey12138 | 来源:发表于2021-03-23 15:46 被阅读0次

    根据Widget的管理状态分为StatelessWidget和StatefulWidget(无状态和有状态),因为我需要快点上手,所以后面再研究具体的原理,而现在主要目的就是学会怎么用!!

    StatelessWidget的组件大体上分为:Container、Text、Icon、CloseButton、BackButton、Chip、Divider、Card、AlertDialog

    1、Container:容器组件 ; 继承 StatelessWidget , 可以通过约束其 this.child 子节点 , 设置该子节点的 this.alignment 居中方式 , this.padding 边距 , Color color 颜色值 等参数 ;

    Container({
        Key? key,//key来控制框架将在widget重建时与哪些其他widget匹配  
        this.alignment,//child的widget的位置
        this.padding,//容器内边距
        this.color,//容器背景颜色,与装饰器不能同时设置
        this.decoration,//装饰器:绘制容器背景图案,和color不能同时设置
        this.foregroundDecoration,//装饰器:绘制容器前景
        double? width,//宽度
        double? height,//高度
        BoxConstraints? constraints,//装饰器可一般用于设置组件的装饰效果 , 如背景颜色 , 背景图片 , 背景边框 , 圆角等效果 
        this.margin,//容器外边距
        this.transform,//可以根据自己的需要调整旋转的角度
        this.transformAlignment,//指定了[transform],则原点相对于容器大小的对齐方式
        this.child,//容器中的控件
        this.clipBehavior = Clip.none,//[Container.decoration]不为null时的剪辑行为
      }) : 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)".'
           
    

    而其中alignment的属性如下:


    截屏2021-03-16 上午10.13.16.png

    然后说下它的BoxConstraints是什么?
    BoxDecoration 装饰器可一般用于设置组件的装饰效果 , 如背景颜色 , 背景图片 , 背景边框 , 圆角等效果

    const BoxDecoration({
        this.color,//背景颜色
        this.image,//背景图片
        this.border,//边框
        this.borderRadius,//圆角
        this.boxShadow,//阴影
        this.gradient,//渐变
        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.'
           );
    

    2、Text

    截屏2021-03-16 上午10.18.01.png
    具体请看大佬的文章:
    https://cloud.tencent.com/developer/article/1695410

    3、sizeBox
    请看下这个链接文章,大佬写得很详细,而且有代码可以实现练习的哈
    https://juejin.cn/post/6844903749522030606

    因为控件实在太多了,所以现在转移目标,一直学,然后用到的时候不明白就写下来,这个还是比较靠谱!!

    相关文章

      网友评论

          本文标题:Flutter学习日记(二)--Container,TextVi

          本文链接:https://www.haomeiwen.com/subject/szurcltx.html