Flutter基础篇之九-Text文本展示

Text显示文本的组件，一个Text只支持一种样式，如果需要富文本请参考RichText.

    this.textAlign, // 对齐方式
    this.overflow, // 处理文本溢出的样式
    this.maxLines, // 最多显示的行数
    this.style, // 文本样式

textAlign

left:左对齐
right:右对齐
left:居中对齐
justify:调整字符间距，填满水平空间
start:文本方向的起始点对齐,配合TextDirection使用，ltr就是左对齐，rtl就是右对齐，
end:和start相反

image.png

  Text(
            _showText,
            textAlign: TextAlign.left,
    )

textAlign

clip:截掉显示区域
fade:淡化为透明的效果
ellipsis:常见的...标识有内容被截取掉了

image.png

maxLines

控制文本显示的最大行数,不设置自动默认换行，不能设置为0

style：是一个TextStyle类型，

  // TextStyle proerty
    this.color, // 文字颜色
    this.backgroundColor, // 文本的背景色
    this.fontSize,// 字体大小
    this.fontWeight,// 字重
    this.fontStyle,// 字体是否倾斜
    this.letterSpacing, // 字符间距 
    this.wordSpacing,// 单词和中文字之间的间距
    this.foreground,  //前景样式
    this.background,// 背景，和backgroundColor不可同时使用。区别是background可以样式更加复杂，backgroundColor是便利的设置背景色
    this.shadows,// 阴影
    this.decoration,// 文本装饰
    this.decorationColor,// 文本装饰颜色
    this.decorationStyle,// 装饰的样式
    this.decorationThickness,// 设置装饰线的粗细

image.png

Text(
            'Text 组件',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              fontFamily: 'Chilanka',
              color: Colors.amber,
              backgroundColor: Colors.grey,
              // letterSpacing: 2,// 中英文文字设置都可以控制间距，负值可让文字紧凑一些
              wordSpacing: 15, // 中文文字设置没有效果，设置两个英文单词之间的间距，单词内的字符间距不改变
            ),
          ),

为文本添加下划线，删除线等文本样式decoration,在电商类项目中可以快速实现价格上有删除线的效果

image.png

Text(
            _chinestShowText,
            style: TextStyle(
                fontSize: 40,
                decoration: TextDecoration.lineThrough,
                // 文本装饰 underline 下划线， lineThrough 删除线，overline 上划线
                decorationStyle: TextDecorationStyle.solid,
                // 装饰的样式,solid 实现 dashed 虚线 double两条线 dotted点状线 wavy 波浪线
                decorationColor: Colors.red),
                decorationThickness: 2 // 装饰线的粗细
          ),

详情请见demo

最后编辑于：2020.10.26 09:02:47