Flutter - 控件之 Text

效果预览

Text

Text显示一个样式单一的文本字符串，可以显示单行也可以显示多行。
1、Text参数解析：

	Text(
        this.data, {
        Key key,
        this.style, //文本样式，默认DefaultTextStyle
        this.strutStyle, //支柱样式
        this.textAlign, //水平对齐样式,TextAlign.center居中，left,right, justify两端对齐
        this.textDirection, //文本方向，TextDirection.ltr
        this.locale, //通常不需要设置，根据地区显示相应的字体
        this.softWrap, //文本换行处是否断行，默认true
        this.overflow, //文本溢出处理,TextOverflow.ellipsis省略号
        this.textScaleFactor, //文本缩放系数，默认1.0，如设置为2，则，文本大小是指定fontSize的2倍。
        this.maxLines, //最大行数
        this.semanticsLabel,
        })

2、代码示例：

          Container(
            height: 100,
            color: Colors.red,
            child: Text(
              "Performing hot reload,Syncing files to device iPhone 11 Pro Max,Reloaded 3 of 543 libraries in 203ms."
              "Performing hot reload,Syncing files to device iPhone 11 Pro Max,Reloaded 3 of 543 libraries in 203ms.",
              strutStyle: StrutStyle(
                leading: 1, //space均匀分布在单行文本上下
              ),
              textAlign: TextAlign.left,
              textDirection: TextDirection.ltr,
              softWrap: true,
              overflow: TextOverflow.ellipsis,
              textScaleFactor: 1,
              maxLines: 3,
            ),
          ),

3、效果图：

TextStyle

TextStyle作为Text参数是可选的，默认使用DefaultTextStyle，如果给定style且TextStyle.inherit为true(默认)，则给定样式与DefaultTextStyle样式合并。
1、TextStyle参数解析：

TextStyle({
        this.inherit = true,
        this.color, //文本字体颜色，若设置了foreground则，这个属性需要为null
        this.backgroundColor, //文本背景色
        this.fontSize, //字号，单位px, 默认14px
        this.fontWeight, //字重，如粗体Bold .w700
        this.fontStyle, //可设置斜体，FontStyle.italic斜体， FontStyle.normal
        this.letterSpacing, //字符间隔，单位px， 可为负值
        this.wordSpacing, //单词(空白序列)间隔， 单位px, 可为负值
        this.textBaseline, //基线
        this.height, //文本高度，数值为字体大小的倍数
        this.locale, //不常用，用于选择特定区域符号的区域设置
        this.foreground, //前景色，字体颜色，与color冲突
        this.background, //背景, 与backgroundColor冲突
        this.shadows, //字体阴影, 可以设置多个光源
        this.decoration, //文本装饰，如下划线TextDecoration.underline,
        this.decorationColor, //文本装饰颜色
        this.decorationStyle, //文本装饰样式，如TextDecorationStyle.solid一条实线，.double两条实线，.dotted点线，.dashed虚线，.wavy波浪线
        this.decorationThickness, //默认1.0，值越大线条越宽
        this.debugLabel,
        String fontFamily,
        List<String> fontFamilyFallback,
        String package,
        })

2、代码示例：

    Widget _buildTextStyle() {
      return ListView(
        shrinkWrap: true,
        children: <Widget>[
          Text(
            "文本默认样式",
          ),
          Text(
            "字体是红色的",
            style: TextStyle(color: Colors.red),
          ),
          Text(
            "字体背景色是红色的",
            style: TextStyle(backgroundColor: Colors.red),
          ),
          Text(
            "字号=20, 字体样式=斜体, 字重=粗体w700",
            style: TextStyle(
              fontSize: 20,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.w700,
            ),
          ),
          Text(
            "字(符)间距=默认",
          ),
          Text(
            "字(符)间距=5px",
            style: TextStyle(letterSpacing: 5),
          ),
          Text(
            "字间距=默认,I am word,我是字体 哈哈",
          ),
          Text(
            "字间距=5px,I am word,我是字体 哈哈",
            style: TextStyle(
              wordSpacing: 5,
            ),
          ),
          Container(
            color: Colors.red,
            child: Text(
              "文本高度 = 字体大小3倍",
              style: TextStyle(
                height: 3,
              ),
            ),
          ),
          Text(
            "字体阴影",
            style: TextStyle(
              fontSize: 24,
              shadows: [
                Shadow(
                  color: Colors.red,
                  offset: Offset(0, 0),
                  blurRadius: 4,
                ),
              ],
            ),
          ),
          Text(
            "字体阴影，多个光源",
            style: TextStyle(
              fontSize: 24,
              shadows: [
                Shadow(
                  color: Colors.red,
                  offset: Offset(0, 4),
                  blurRadius: 4,
                ),
                Shadow(
                  color: Colors.green,
                  offset: Offset(4, 0),
                  blurRadius: 4,
                ),
              ],
            ),
          ),
          Text(
            "装饰线 - 下划线",
            style: TextStyle(
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
          Padding(padding: EdgeInsets.all(5)),
          Text(
            "装饰线-上方线",
            style: TextStyle(
              decoration: TextDecoration.overline,
              decorationColor: Colors.blue,
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
          Text(
            "字体装饰线 - 字体中间划掉",
            style: TextStyle(
              decoration: TextDecoration.lineThrough,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
          Text(
            "字体装饰线 - 双划线",
            style: TextStyle(
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.double,
            ),
          ),
          Text(
            "字体装饰线 - 虚线",
            style: TextStyle(
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.dashed,
            ),
          ),
          Text(
            "字体装饰线 - 点线",
            style: TextStyle(
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.dotted,
            ),
          ),
          Text(
            "字体装饰线 - 波浪线",
            style: TextStyle(
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.wavy,
            ),
          ),
          Text(
            "字体装饰线-波浪线线条加粗",
            style: TextStyle(
              decoration: TextDecoration.underline,
              decorationColor: Colors.red,
              decorationStyle: TextDecorationStyle.wavy,
              decorationThickness: 2,
            ),
          ),
        ],
      );
    }

3、效果图：

TextAlign

TextAlign文本水平对齐方式，如居左，居右等。
1、TextAlign参数解析：

enum TextAlign {
  /// 居左
  left,
  /// 居右
  right,
  /// 居中
  center,
  /// 两端对齐
  justify,
  ///对于left-to-right([TextDirection.ltr)，居左；对于right-to-left，居右；
  start,
  ///对于left-to-right，居右；对于right-to-left，居左；
  end,
}

2、代码示例：

    Widget _buildTextTextAlign() {
      return ListView(
        shrinkWrap: true,
        children: <Widget>[
          Text("文本居左"),
          Text(
            "文本居中",
            textAlign: TextAlign.center,
          ),
          Text(
            "文本居右",
            textAlign: TextAlign.right,
          ),
          Container(
            color: Colors.red,
            child: Text(
              "Stretch lines of text that end with a soft line break to fill the width of the container. Lines that end with hard line breaks are aligned towards the [start] edge. justify,",
              textAlign: TextAlign.justify,
            ),
          ),
          Text(
            "TextAlign.start & TextDirection.ltr = 文本居左",
            textAlign: TextAlign.start,
            textDirection: TextDirection.ltr,
          ),
          Text(
            "TextAlign.end & TextDirection.ltr = 文本居右",
            textAlign: TextAlign.end,
            textDirection: TextDirection.ltr,
          ),
          Text(
            "TextAlign.start & TextDirection.rtl = 文本居右",
            textAlign: TextAlign.start,
            textDirection: TextDirection.rtl,
          ),
          Text(
            "TextAlign.end & TextDirection.rtl = 文本居左",
            textAlign: TextAlign.end,
            textDirection: TextDirection.rtl,
          ),
        ],
      );
    }

3、效果图：

TextDirection

TextDirection文本方向，如从左到右。通常语言从左向右写的，而有些语言是从右往左写的(例如，亚拉姆语、希伯来语或乌尔都语)。还有一些是混合书写的，比如阿拉伯语主要是从右到左写的，数字则是从左到右写的。
1、TextDirection参数解析：

	enum TextDirection {
        /// 文本从右到左，如阿拉伯语、希伯来语。
        rtl,
        /// 文本从左到右，如汉语，英语。
        ltr,
    }

2、代码示例：

    Widget _buildTextDirection() {
      return ListView(
        shrinkWrap: true,
        children: <Widget>[
          Text(
            "从左到右 - TextDirection.ltr",
            textDirection: TextDirection.ltr,
          ),
          Text(
            "从右到左 - TextDirection.rtl",
            textDirection: TextDirection.rtl,
          ),
        ],
      );
    }

3、效果图：

TextOverflow

TextOverflow溢出容器部分处理方式，如省略号代替等。
1、TextOverflow参数解析：

	enum TextOverflow {
        /// 剪去溢出容器部分
        clip,

        /// 将溢出的文本淡化为透明
        fade,

        /// 溢出部分用省略号代替
        ellipsis,

        /// 容器外显示溢出部分
        visible,
        }

2、代码示例：

    Widget _buildTextOverflow() {
      return Wrap(
        runSpacing: 20,
        children: <Widget>[
          Container(
            height: 50,
            color: Colors.orange,
            child: Text(
              "TextOverflow.clip - 基金，英文是fund，广义是指为了某种目的而设立的具有一定数量的资金。主要包括信托投资基金、公积金、保险基金、退休基金，各种基金会的基金。",
              overflow: TextOverflow.clip,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Container(
            height: 50,
            color: Colors.orange,
            child: Text(
              "TextOverflow.fade - 基金，英文是fund，广义是指为了某种目的而设立的具有一定数量的资金。主要包括信托投资基金、公积金、保险基金、退休基金，各种基金会的基金。",
              overflow: TextOverflow.fade,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Container(
            height: 50,
            color: Colors.orange,
            child: Text(
              "TextOverflow.ellipsis - 基金，英文是fund，广义是指为了某种目的而设立的具有一定数量的资金。主要包括信托投资基金、公积金、保险基金、退休基金，各种基金会的基金。",
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Container(
            height: 50,
            color: Colors.orange,
            child: Text(
              "TextOverflow.visible - 基金，英文是fund，广义是指为了某种目的而设立的具有一定数量的资金。主要包括信托投资基金、公积金、保险基金、退休基金，各种基金会的基金。",
              overflow: TextOverflow.visible,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
        ],
      );
    }     

3、效果图