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

2021-03-23  本文已影响0人  jeffrey12138

根据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

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

上一篇下一篇

猜你喜欢

热点阅读