Flutter 学习 - Widget 之 Text

前言

什么是Widget

Widget是学习Flutter的基础，用于构建UI，相当于Android中的View，IOS中的UIView一样。

文本显示Widget -- Text

Text是Fultter 中文本展示的控件，类似于Android中的TextView，Flutter中还有另一种文本展示Widget - RichText（将在下篇文章中介绍）

使用

先来看下代码中最简单的使用方法

Text("hello flutter") //这里传入需要显示的文字

下面看下Text的源码，参数中对应的数据类型，下面会逐个介绍

const Text( 
    this.data, { //data就是我们需要展示的文字，这个是必传字段，其他的都是可选
    Key key,    //widget的标识
    this.style,  //文本样式，类型是TextStyle
    this.strutStyle, //使用的支柱风格，类型是StrutStyle
    this.textAlign, //文本的对齐方式，类型是TextAlign
    this.textDirection, // 文字方向，类型是TextDirection
    this.locale, //选择用户语言和格式的标识符，类型是Locale
    this.softWrap, //bool 类型 ，false标识文本只有一行，水平方向无限
    this.overflow, //文本的阶段方式，类型是TextOverflow
    this.textScaleFactor,//double类型 表示文本相对于当前字体的缩放因子，默认为1.0
    this.maxLines,// int 类型，显示的最大行数
    this.semanticsLabel, //String 类型，给文本加上一个语义标签，没有实际用处
    this.textWidthBasis,//一行或多行文本宽度的不同方式，类型是TextWidthBasis
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);

• TextStyle - 用来定义Text显示的样式 使用方式及效果如下：

    Text("Hello Flutter",
        style: TextStyle(color: Colors.red,
          fontSize: 24,
          background: Paint()..color = Colors.yellow),
      )

设置TextStyle效果.jpg
下面看下TextStyle的源码，逐个解释各个参数的含义
注：TextStyle只有可选参数，没有必选参数

const TextStyle({ 
    this.inherit = true, //是否继承父Text的样式，默认为true
    this.color,  //文字的颜色 类型为Color
    this.backgroundColor,  //背景颜色 类型为Color
    this.fontSize, //double 类型，文字的大小 
    this.fontWeight, //字体粗细，类型是FontWeight
    this.fontStyle, //是否在字体中倾斜字形，类型为FontStyle
    this.letterSpacing, // double类型，字母之间的间隔 
    this.wordSpacing, //double类型，单词之间的间隔
    this.textBaseline, //用于对齐文本的水平线，类型是 TextBaseline
    this.height, //double类型，文本的高度，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。
    this.locale, //选择用户语言和格式的标识符，类型是Locale
    this.foreground,//文本的前景色，类型是Paint
    this.background,//文本的背景色    ，类型是Paint
    this.shadows,//在文本下方绘制阴影，类型是List< ui.Shadow>
    this.fontFeatures,//字体选择字形的列表，类型List<ui.FontFeature>     
    this.decoration,//文本的线条，类型是TextDecoration   
    this.decorationColor,//TextDecoration 线条的颜色，类型是Color
    this.decorationStyle,//TextDecoration 线条的样式，类型是TextDecorationStyle
    this.decorationThickness,//double类型，默认为1.0，表示使用字体的基本画笔厚度宽度
    this.debugLabel,//String 类型，文本样式的描述无实际用处
    String fontFamily,//String类型，用于设置使用哪种自定义字体
    List<String> fontFamilyFallback,//String 类型，字体列表，当前面的字体找不到时，会在这个列表里依次查找
    String package,//String 类型，用于设置使用哪种自定义字体
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       _fontFamilyFallback = fontFamilyFallback,
       _package = package,
       assert(inherit != null),
       assert(color == null || foreground == null, _kColorForegroundWarning),
       assert(backgroundColor == null || background == null, _kColorBackgroundWarning);

• StrutStyle -- 使用的支柱风格,使用方式及效果如下

注：forceStrutHeight 为true的情况

     Text("Hello Flutter",
        style: TextStyle(color: Colors.red,
          fontSize: 24,
          background: Paint()..color = Colors.yellow),
          strutStyle: StrutStyle(forceStrutHeight: true,fontSize: 12),
      )

forceStrutHeight 为true的情况.jpg

forceStrutHeight 为false情况

    Text("Hello Flutter",
        style: TextStyle(color: Colors.red,
          fontSize: 24,
          background: Paint()..color = Colors.yellow),
          strutStyle: StrutStyle(forceStrutHeight: false,fontSize: 12),

forceStrutHeight 为false的情况.jpg

• TextAlign -- 文本的对齐方式，共6种

1.TextAlign.left：左对齐
2.TextAlign.right：右对齐
3.TextAlign.center：居中对齐
4.TextAlign.start：从文字开始的那个方向对齐，如果文字方向从左到
右，就左对齐，否则是右对齐。
5.TextAlign.end：从文字开始的相反方向对齐，如果文字方向从左到
右，就右对齐，否则是左对齐。
6.TextAlign.justify

• TextDirection -- 文字方向，共两种

1.TextDirection.ltr：文字方向从左到右
2.TextDirection.ltr：文字方向从右到左

• Locale -- 选择用户语言和格式的标识符

下面看下Locale的源码

const Locale(
    this._languageCode, [//主语言标记 ，必选
    this._countryCode,//区域（国家），可选
  ]) : assert(_languageCode != null),
       assert(_languageCode != ''),
       scriptCode = null;

使用示例：

Text(widget.title,
          textWidthBasis: TextWidthBasis.parent, ),
      ),
      body: Text("Hello Flutter 哈哈",
        style: TextStyle(color: Colors.red,
          fontSize: 24,
          background: Paint()..color = Colors.yellow),
          strutStyle: StrutStyle(forceStrutHeight: false,fontSize: 12),
      locale: Locale("fr","CH"),)

• TextOverflow -- 文本的截断方式,共三种

当要显示的内容超了之后
1.TextOverflow.ellipsis：多余文本截断后以省略符“...”表示
2.TextOverflow.clip：剪切多余文本，多余文本不显示
3.TextOverflow.fade：将多余的文本设为透明

• TextWidthBasis -- 一行或多行文本宽度的不同方式,共两种

1.TextWidthBasis.parent:多行文本的将占用父类给出的全部宽度，针对一行文本只需要包含文本所需要的最小宽度，常见用例为段落
2.TextWidthBasis.longestLine:宽度刚好可以容纳最长的行，比如聊天气泡

结尾

截止到现在，Text 就介绍完了。
以下是我的Flutter系列的链接，后续会持续更新，欢迎大家指正。

Flutter 系列文章

• Flutter 学习 - 开篇
• Flutter 学习 - 基础框架
• Flutter 学习 - 网络请求和数据解析
• Flutter 学习 - Widget 之 Text
• Flutter 学习 - Widget 之 RichText