Flutter Text & Container Widget

1,464 阅读2分钟

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)