Flutter-Text文本组件详解

示例

API

Text，很常用的一个Widget；用于显示简单样式文本，它包含一些控制文本显示样式的一些属性

text构造方法源码：

/// If the [style] argument is null, the text will use the style from the  /// closest enclosing [DefaultTextStyle].  ///  /// The [data] parameter must not be null.  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,  }) : assert(         data != null,         'A non-null String must be provided to a Text widget.',       ),       textSpan = null,       super(key: key);  /// Creates a text widget with a [InlineSpan].  ///  /// The following subclasses of [InlineSpan] may be used to build rich text:  ///  /// * [TextSpan]s define text and children [InlineSpan]s.  /// * [WidgetSpan]s define embedded inline widgets.  ///  /// The [textSpan] parameter must not be null.  ///  /// See [RichText] which provides a lower-level way to draw text.  const Text.rich(    this.textSpan, {    Key key,    this.style,    this.strutStyle,    this.textAlign,    this.textDirection,    this.locale,    this.softWrap,    this.overflow,    this.textScaleFactor,    this.maxLines,    this.semanticsLabel,    this.textWidthBasis,  }) : assert(         textSpan != null,         'A non-null TextSpan must be provided to a Text.rich widget.',       ),       data = null,       super(key: key);

参数详解：

data

要显示的字符串

style样式TextStyle

TextStyle的构造函数：

const TextStyle({    this.inherit = true,    this.color,    this.backgroundColor,    this.fontSize,    this.fontWeight,    this.fontStyle,    this.letterSpacing,    this.wordSpacing,    this.textBaseline,    this.height,    this.locale,    this.foreground,    this.background,    this.shadows,    this.fontFeatures,    this.decoration,    this.decorationColor,    this.decorationStyle,    this.decorationThickness,    this.debugLabel,    String fontFamily,    List<String> fontFamilyFallback,    String package,  }) : 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);

textAlign

文本应如何水平对齐enum：

textDirection

相对TextAlign中的start、end而言有用（当start使用了ltr相当于end使用了rtl，也相当于TextAlign使用了left）

softWrap

是否自动换行（true自动换行，false单行显示，超出屏幕部分默认截断处理）

overflow

文字超出屏幕之后的处理方式

其他

文本拼接

在上面的例子中，Text的所有文本内容只能按同一种样式，如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。我们看看TextSpan的定义:

const TextSpan({  TextStyle style,   Sting text,  List<TextSpan> children,  GestureRecognizer recognizer,});

Demo源码

import 'dart:math';import 'package:flutter/material.dart';class TextDemo extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new Scaffold(      appBar: AppBar(        title: Text("文本测试"),      ),      backgroundColor: Colors.white,      body: buildText(),    );  }  Widget buildText(){    return new SingleChildScrollView(        child: Column(          children: <Widget>[            Text('普通文本样式'),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('自定义文本颜色',style: TextStyle(color: Color.fromRGBO(234,200,134,1)),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本背景颜色',style: TextStyle(backgroundColor: Colors.red),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本字体大小',style: TextStyle(fontSize: 30.0),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本加粗',style: TextStyle(fontWeight: FontWeight.w900),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本斜体',style: TextStyle(fontStyle: FontStyle.italic),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本字母间隙space',style: TextStyle(letterSpacing: 2),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本单词间距 word space',style: TextStyle(wordSpacing: 10),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本行高',style: TextStyle(height: 3, backgroundColor: Colors.red),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本阴影shadows',style: TextStyle(shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)]),),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本文字删除线',style: TextStyle(decoration: TextDecoration.lineThrough, decorationColor: Colors.red),),            ),                        Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本文字底边线',style: TextStyle(height: 3, decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.double),),            ),                        Container(              // margin: EdgeInsets.only(top: 50.0, left: 120.0),               constraints: BoxConstraints.tightFor(width: 200.0, height: 50.0), //卡片大小              decoration: BoxDecoration(//背景装饰                  gradient: RadialGradient( //背景径向渐变                      colors: [Colors.red, Colors.orange],                      center: Alignment.topLeft,                      radius: .98                  ),                  boxShadow: [ //卡片阴影                    BoxShadow(                        color: Colors.black54,                        offset: Offset(2.0, 2.0),                        blurRadius: 4.0                    )                  ]              ),              // alignment: Alignment.center,               child: Text('文本对齐方式',textAlign: TextAlign.left,),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本换行测试softWrap（自动换行）文本换行测试（自动换行）文本换行测试（自动换行）文本换行测试（自动换行）文本换行测试（自动换行）', softWrap: true,),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本换行测试softWrap（不换行）文本换行测试（不换行）文本换行测试（不换行）文本换行测试（不换行）文本换行测试（不换行）', softWrap: false,),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本溢出测试overflow ellipsis文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试', overflow: TextOverflow.ellipsis,),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本溢出测试overflow clip文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试', overflow: TextOverflow.clip,),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本溢出测试overflow fade文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试', overflow: TextOverflow.fade,),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text('文本显示行数2文本显示行数2文本显示行数2文本显示行数2文本显示行数2文本显示行数2文本显示行数2文本显示行数2文本显示行数2文本显示行数2文本显示行数2', maxLines: 2,),            ),            Padding(              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),              child: Text.rich(                TextSpan(                  children: [                    TextSpan(                    text:'￥',                    style: TextStyle(                      color: Color.fromRGBO(255,85,46,1),                      fontSize: 18.0,                      fontWeight: FontWeight.w700                    )                  ),                  TextSpan(                    text: '100',                    style: TextStyle(                      color: Color.fromRGBO(255,85,46,1),                      fontSize: 24.0,                      //字体加粗                      fontWeight: FontWeight.w700                    )                  ),                  TextSpan(                    text:'1001元',                    style: TextStyle(                      decoration: TextDecoration.lineThrough,                      color: Color.fromRGBO(153,153,153,1),                      fontSize: 14.0,                      //字体加粗                      // fontWeight: FontWeight.w700                    )                  ),                  TextSpan(                    text:'拼接普通文本拼接普通文本拼接普通文本拼接普通文本拼接普通文本'                  )                  ]                )              ),            ),          ],        ),    );  }}