Flutter文本组件Text

文本组件在开发中出现的频率几乎是最高的,flutter开发中使用的文本组件主要是Text。现在介绍一下

Text的常用属性:
属性 类型 说明
style TextStyle 主要是对文本样式的设置
textAlign TextAlign 文本对齐方式
TextAlign.left:左对齐
TextAlign.right:右对齐
TextAlign.center:中间对齐
TextAlign.justify:拉伸结束的文本行以填充容器的宽度。使用了decorationStyle才起效
TextAlign.start:起始对齐
TextAlign.end:结尾对齐
textDirection TextDirection 文字排列方式
TextDirection.ltr:从左到右
TextDirection.rtl:从右到左
locale Locale 区域特定字形的语言环境
softWrap bool 在没有边界的空间中是否自动换行
overflow TextOverflow 文本显示溢出处理
TextOverflow.clip:裁剪文字
TextOverflow.fade:超出文字透明
TextOverflow.ellipsis:超出文字用…代替
TextOverflow.visible:显示在容齐外
maxLines int 文本最大显示行数
textScaleFactor double 字体缩放因子
TextStyle的常用属性:
属性 类型 说明
color Color 文本颜色
fontSize double 字体大小
fontWeight FontWeight 字重,文字笔画粗细,w100-w900依次增强
FontWeight.w100:最细的,
FontWeight.w200:特细的
FontWeight.w300:细的
FontWeight.w400:正常的的
FontWeight.w500:中等的
FontWeight.w600:半粗的
FontWeight.w700:粗体的
FontWeight.w800:特粗的
FontWeight.w900:最粗的
FontWeight normal:相当与FontWeight.w400
FontWeight.bold:相当于FontWeight.w700
fontStyle FontStyle FontStyle.normal:正常
FontStyle.italic:斜体
fontFamily String 字体
letterSpacing double 字符间距
wordSpacing double 单词间距,主要针对英文等
shadows Shadow[] 文字阴影效果,可以层叠
decoration TextDecoration 在文本附近画一条线
TextDecoration.none:不画线
TextDecoration.underline:底部画线
TextDecoration.overline:顶部画线
TextDecoration.lineThrough:中间画线,删除线
decorationColor Color 文本附近画线的
decorationStyle TextDecorationStyle 文本附近画线的样式
TextDecorationStyle.solid:实线
TextDecorationStyle.double:双线
TextDecorationStyle.dotted:点线
TextDecorationStyle.dashed:虚线
TextDecorationStyle.wavy:波浪线

示例代码:

          Text('这是flutter的文字组件text的示例,其中仅使用了平时较常用的属性',
            style: TextStyle(
              color: Colors.red,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              fontStyle: FontStyle.normal,
              fontFamily: 'Roboto',
              letterSpacing: 1.0,
              wordSpacing: 5.0,
              textBaseline: TextBaseline.alphabetic,
              shadows: [
                Shadow(color: Colors.green,offset: Offset(1, 2),blurRadius: 2.0),
                Shadow(color: Colors.orange,offset: Offset(1, 1)),
              ],
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.wavy,

            ),
            textAlign: TextAlign.center,
            textDirection: TextDirection.rtl,
            textScaleFactor: 2.0,
            locale: Locale.fromSubtags(),
            softWrap: false,
            overflow: TextOverflow.ellipsis,
            maxLines: 2,

          ),

以上是flutter中Text的常用属性设置,基本满足日常开发需求。也有其他的功能不太常见,遇到时再更新。

你可能感兴趣的:(Flutter探索之旅,flutter,text)