美文网首页
Flutter学习--Text组件

Flutter学习--Text组件

作者: 小迷糊_dcee | 来源:发表于2020-11-16 23:20 被阅读0次

一、介绍

显示文本字符串的组件

二、创建text的源码

const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);

三、属性学习

\color{red}{data:String} 输入的文本
\color{red}{style:TextStyle}文本样式,style属性如下

const TextStyle({
    this.inherit = true,//为false的时候不显示
    this.color,// 文本颜色,不可和foreground同时使用
    this.backgroundColor,// 背景色
    this.fontSize,// 字体大小,默认14
    this.fontWeight,//字体宽度,默认为w400
    this.fontStyle,// 字体样式,粗体、斜体
    this.letterSpacing,// 字符间距,可以为负数
    this.wordSpacing,// 字间距,可以为负数
    this.textBaseline,// 文本基准线
    this.height,// 文本的行高
    this.locale,
    this.foreground,// 文本前景色,不可和color同时使用
    this.background,// 文本背景色
    this.shadows, // 文本阴影
    this.fontFeatures,
    this.decoration,// 添加上划线,下划线,删除线
    this.decorationColor,// 上划线,下划线,删除线的颜色
    this.decorationStyle,// 上划线,下划线,删除线的样式:可控制画实线,虚线,两条线,点, 波浪线等
    this.decorationThickness,
    this.debugLabel,
    String? fontFamily,//字体
    List<String>? fontFamilyFallback,
    String? package,
  })

\color{red}{trutStyle:StrutStyles} 允许设置最小线高的功能
\color{red}{textAlign:TextAlign} 文本对齐方式

属性 说明
TextAlign.center 将文本对齐容器的中心
TextAlign.start 对齐容器前缘上的文本
TextAlign.end 对齐容器后缘上的文本
TextAlign.left 对齐容器左边缘的文本
TextAlign.right 对齐容器右边缘的文本
TextAlign.justify 拉伸以结束的文本行以填充容器的宽度

\color{red}{textDirection:TextDirection } 文本的方向

属性 说明
TextAlign.ltr 文本从左向右流动
TextAlign.rtl 文本从右向左流动

\color{red}{locale:Locale} 用于选择区域特定字形的语言环境(很少使用)
\color{red}{softWrap:bool} 某一行中文本过长,是否需要换行。默认为true
\color{red}{overflow:TextOverflow} 文本溢出的显示效果

属性 说明
TextOverflow.clip 剪切溢出的文本填满容器
TextOverflow.fade 将溢出的文本淡化为透明
TextOverflow.ellipsis 使用省略号表示文本已溢出
TextOverflow.visible 呈现容器外溢出的文本

\color{red}{textScaleFactor:double} 每个逻辑像素的字体像素数,默认值为1.0(假如文字大小为10.0,textScaleFactor设置为1.5,那么文字大小为15.0,textScaleFactor设置为3.0,文字大小为30.0)
\color{red}{maxLines:int} 文本最大行数
\color{red}{semanticsLabel:String} 图像的语义描述,很少用到
\color{red}{textWidthBasis:TextWidthBasis} 一行或多行文本宽度的不同方式

属性 说明
TextWidthBasis.parent 多行文字将占据父文本给定的全宽,单行文本仅包含文本所需的最小宽度。(段落)
TextWidthBasis.longestLine 宽度刚好能容纳最长的一行(聊天气泡)

\color{red}{textHeightBehavior:TextHeightBehavior} 定义如何应用第一行的ascent和最后一行的descent

(整理出来,方便个人查找和学习)

相关文章

网友评论

      本文标题:Flutter学习--Text组件

      本文链接:https://www.haomeiwen.com/subject/gqstiktx.html