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
具体请看大佬的文章:
https://cloud.tencent.com/developer/article/1695410
3、sizeBox
请看下这个链接文章,大佬写得很详细,而且有代码可以实现练习的哈
https://juejin.cn/post/6844903749522030606
因为控件实在太多了,所以现在转移目标,一直学,然后用到的时候不明白就写下来,这个还是比较靠谱!!