Flutter 学习之路 Text 文本组件

一、Flutter Text文本组件介绍：

    文本组件（Text）负责显示文本和定义显示样式，它包含控制文本显示样式属性

二、构造方法中属性说明：

const Text(
    this.data, {  // 文字内容
    Key key,
    this.style, // 字体的样式设置
    this.strutStyle,
    this.textAlign, //文本对齐方式（center居中，left左对齐，right右对齐，justfy两端对齐）
    this.textDirection,//文本方向（ltr从左至右，rtl从右至左）
    this.locale, // 用于选择区域特定字形的语言环境
    this.softWrap, // 是否需要换行
    this.overflow, //文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）
    this.textScaleFactor, //字体显示倍率
    this.maxLines,  // 文字显示最大行数
    this.semanticsLabel, // 图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
    this.textWidthBasis,
    this.textHeightBehavior,
  })

属性style中 TestStyle 的参数

const TextStyle({
    this.inherit = true,
    this.color,  // 颜色
    this.backgroundColor, // 背景色
    this.fontSize,    // 字体大小
    this.fontWeight,  // 字体粗细  
    this.fontStyle,    // 文字样式（italic 斜体，normal 正常体）
    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 fontFamilyFallback,
    String package,
  })

代码演示：

import 'package:flutter/material.dart';

class TextPage extends StatefulWidget {
  TextPage({Key key}) : super(key: key);

  @override
  _TextPageState createState() => _TextPageState();
}

class _TextPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("56zhiyi.com Flutter Text"),
      ),
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.only(top: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "下划线演示",
              style: TextStyle(decoration: TextDecoration.underline),
            ),
            Text(
              "中划线演示",
              style: TextStyle(decoration: TextDecoration.lineThrough),
            ),
            Text(
              "综合演示",
              textAlign: TextAlign.right,
              style: TextStyle(
                  fontSize: 14.0,
                  color: Colors.red,
                  fontWeight: FontWeight.w800,
                  fontStyle: FontStyle.italic,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Colors.white,
                  decorationStyle: TextDecorationStyle.dashed,
                  letterSpacing: 4.0),
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
              textScaleFactor: 2,
            ),
          ],
        ),
      ),
    );
  }
}

效果图