Flutter基础Widget之Text（文本控件）

Text 构造方法及属性

Text Widget用于显示简单样式文本，它包含一些控制文本显示样式的一些属性，类似于Android中的TextView

首先我们来看看Text控件的构造方法

可以看到，data是必填参数，其他的都是可选参数，下面我们来看看Text类中的常用属性

属性名	作用	值所属类型
data	Text显示的文本，必填参数	String
textAlign	文本的对齐方式,可以选择左对齐、右对齐还是居中对齐	TextAlign
maxLines	文本显示的最大行数	int
overflow	文本显示的截断方式	TextOverflow
textScaleFactor	文本的缩放比例	double
style	用于指定文本显示的样式如颜色、字体、粗细、背景等	TextStyle

可以看到Text控件还是很简单的，下面我们来简单的用一下看一下效果。
首先我们新建一个项目，由于Flutter代码是嵌套式的，如果都写在一起显得可读性非常差，这次我们把一些组件拆开来。读写起来也方便一些
首先我们先来看一下项目结构，这里我把body要显示的控件提出来了，返回的是text.dart中的MyText()

然后MyText返回的是NormalText控件，NormalText中我们创建了一个Text控件，默认的对齐方式是左对齐，这里我们设置了文本对齐方式为居中对齐

运行后就是这样

下面我们看一下各个属性的效果

style

style接收一个TextStyle类型的值
我们先来看一下TextStyle类中的属性

TextStyle copyWith({
    Color color,
    String fontFamily,
    double fontSize,
    FontWeight fontWeight,
    FontStyle fontStyle,
    double letterSpacing,
    double wordSpacing,
    TextBaseline textBaseline,
    double height,
    Locale locale,
    Paint foreground,
    Paint background,
    List<ui.Shadow> shadows,
    TextDecoration decoration,
    Color decorationColor,
    TextDecorationStyle decorationStyle,
    String debugLabel,
  })

名字跟css样式很像

常用属性

属性名	作用	值所属类型
color	设置文本的颜色	Color
fontSize	设置字体大小	double
fontWeight	字体的加粗权重	FontWeight
fontStyle	文本显示样式	FontStyle
letterSpacing	单词之间的间距	double
wordSpacing	字母之间的间距	double
height	行高，需要注意的是这里的值是个比例值	double

我们来用几个属性看看效果

Text(
      "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.",
      style: TextStyle(
        color: Colors.red,
        fontSize: 18,
        letterSpacing: 1,
        wordSpacing: 2,
        height: 1.2,
        fontWeight: FontWeight.w600
      ),
    );

效果如下

textAlign

textAlign的值的类型是TextAlign ，TextAlign是一个枚举，值如下，比较简单就不贴代码了

enum TextAlign {  left,  right, center, justify,start, end,}

left |start
left和start效果一致，左对齐

center
居中对齐

right | end
right和end都是右对齐

justify
类似一种填充满宽度的效果

maxLines

最大显示行数，很简单，没啥好说的

Text(
      "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.",
      style: TextStyle(
          color: Colors.red,
          fontSize: 18,
          letterSpacing: 1,
          wordSpacing: 2,
          height: 1.2,
          fontWeight: FontWeight.w600),
      textAlign: TextAlign.justify,
      maxLines: 3,
    );

可以看到，只显示了三行

overflow

文本的截断方式，接收一个TextOverflow 类型的值

enum TextOverflow {  clip,  fade,  ellipsis,}

clip
默认的截断方式，直接根据容器大小截断

fade
最下面的一行有一点渐隐的效果，这里为了看的清楚点字体放大了些

ellipsis
截断处为省略符的形式

还有一些其他的属性不太常用，这里就不介绍了，自己可以去试试看看是什么效果。

---

TextSpan

查看Text源码的时候发现还有另外一个构造方法如下，该方法是用TextSpan来创建一个Text widget。
可以看到rich方法必须要传一个TextSpan

TextSpan跟Text的区别就在于TextSpan是分片，我们可以把一串字符串分为几个片段来管理，每个片段可以单独设置样式。
我们再来看看TextSpan的构造方法

 const TextSpan({
    this.style,
    this.text,
    this.children,
    this.recognizer,
  });

  final TextStyle style;
  final String text;
  final List<TextSpan> children;
  final GestureRecognizer recognizer;

其中style 跟上面的Text的style一致，用来设置样式，text就是要显示的文本内容。 children是一个TextSpan的数组，不能为空，recognizer是用来处理手势的

下面我们来用一用，下面的代码如果你觉得嵌套的层次多，可以把TextSpan再封一下，这里我就直接这么写了。

/*TextSpan
* 文本片段，可以对文本片段单独设置样式
* */
class MyTextSpan extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(
              text: "网址:",
              style: TextStyle(
                color: Colors.black,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              )),
          TextSpan(
            text: "http//:baidu.com/",
            style: TextStyle(
              color: Colors.blue,
              fontSize: 24,
              fontStyle: FontStyle.italic,
            ),
          ),
        ],
      ),
    );
  }
}

来看一看效果

---

DefaultTextStyle

在Flutter的widget树中，文本的样式默认是可以被继承的，这点跟css很像，父节点的文本样式子节点默认会继承，如果子节点中重新设置了默认样式的某些属性，那么则以子节点设置的为准。我们也可以通过设置inherit: false 不继承父节点的默认样式。

/*带有默认样式的Text*/
class MyDefaultStyleText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
        /*这里我们设置了一些默认的样式*/
        textAlign: TextAlign.left,
        style: TextStyle(
          fontSize: 30,
          color: Colors.grey,
          letterSpacing: 1,
          wordSpacing: 3,
          fontWeight: FontWeight.bold,
        ),
        /*子节点就会默认继承父节点的样式，如果子节点重新设置了父节点中已设置的样式，那么以子节点设置的样式为准*/
        child: Column(
          children: <Widget>[
            Text(
              "text 1",
              style: TextStyle(
                /*这里我们重新指定一下颜色，那么最终的颜色就以子节点的设置为准*/
                color: Colors.deepOrange,
              ),
            ),
            Text(
              "text 2",
              style: TextStyle(
                inherit: false,//inherit设为false表示不继承父节点默认样式，默认值为true
                color: Colors.blue,
              ),
            ),
          ],
        ));
    ;
  }
}

运行效果图如下

好了，Text Widget相关的内容大概就这么多。更详细的请看官方文档

如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我的 Flutter 博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，谢谢！