Flutter Text 组件
TextAlign 属性
center:文本以居中形式对齐
left:左对齐,效果和start一样
right:右对齐
start:以开始位置进行对齐,类似于左对齐
end: 以为本结尾处进行对齐,有点类似右对齐
justfy 两端对齐
最常用的三个:left(左对齐)、center(居中对齐)、right(右对齐)
maxLines 属性:设置最多显示的行数
overflow 属性:
clip:直接切断,体验性不好
ellipsis:在后边显示省略号,体验性较好,这个在工作中经常使用
fade:溢出的部分会进行一个渐变消失的效果,是上线的渐变,非左右
style 属性:
const TextStyle({
this.inherit: true, // 为false的时候不显示
this.color, // 颜色
this.fontSize, // 字号
this.fontWeight, // 字重,加粗也用这个字段 FontWeight.w700
this.fontStyle, // FontStyle.normal FontStyle.italic 斜体
this.letterSpacing, // 字符间距:就是单个字母或者汉字之间的间隔,可以是负数
this.wordSpacing, // 字间距:句字之间的间距
this.textBaseline, // 基线,两个值,字面意思是一个用来排字母的,一个用来排表意字的(类似中文)
this.height, // 当用来Text控件上时,行高(乘以fontSize,所以不宜设置过大)
this.decoration, // 文字装饰线(none 没有线,lineThrough 删除线,overline 上划线,underline 下划线)
this.decorationColor, // 文字装饰线颜色
this.decorationStyle, // 文字装饰线风格([dashed dotted]虚线,double 两根线,solid 一根实线,wavy 波浪线)
this.debugLabel,
String fontFamily, // 字体
String package,
}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
assert(inherit != null);
Container 容器
在Flutter是经常使用的控件,它就相当于 HTML 里的 div 标签
alignment 属性
padding 属性:内边距
padding:const EdgeInsets.all(10.0),
padding:const EdgeInsets.fromLTRB(10.0, 15.0, 10.0, 15.0), // 上下边距为10,左右边距为15
margin 属性:外边距
margin:const EdgeInsets.all(10.0),
margin:const EdgeInsets.fromLTRB(10.0, 15.0, 10.0, 15.0), // 上下边距为10,左右边距为15
decoration 属性:设置背景和边框
// 边框
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue, Colors.greenAccent, Colors.purple]
),
border:Border.all(width:3.0, color:Colors.red)
),
// 圆角,圆形等
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.blue,
width: 3.0
),
borderRadius: BorderRadius.all(
// Radius.circular(150), //圆形
Radius.circular(10),
)
),
transform 属性:旋转
transform:Matrix4.diagonal3Values(1.5, 1.1, 1.1)