Flutter Widget 之 Text

本文主要是Flutter中Text控件的简单使用说明

说明

• Text:单一样式的文本控件，类似iOS中的UILabel，支持多行；
• 可以通过设置style参数，修改文本样式；
• 默认样式会继承层级最接近的DefaultTextStyle，如何自定义样式，将DefaultStyle.inherit设置为false；

基本用法

1.data 必要参数，Text的显示文：

Text( '请输入6-12位密码，支持数字、字母、字符（除空格）',)

2.textAlign:文本对齐方式（左对齐，右对齐、居中）；
3.maxLines:最大行数；
4.overflow：文本显示的截断方式：

  /// Clip the overflowing text to fix its container.
  clip,
  /// Fade the overflowing text to transparent.
  fade,
  /// Use an ellipsis to indicate that the text has overflowed.
  ellipsis,
  /// Render overflowing text outside of its container.
  visible,

5.textScaleFactor：文本缩放比例；
6.style:文本样式（可以设置字体、大小、颜色等）；

示例

Text(
          '只是一个Text例子',
          style: new TextStyle(color: Color(0xff999999), fontSize: 11.0),
          textAlign: TextAlign.left,
          softWrap: true,
        ),

注意：Text的尺寸大小默认是根据文本填充的数据确定的，单行文本即使设置了textAlign: TextAlign.left也会出现居中显示，此时需要在Text外层包裹容器布局，比如：Align（）
如下图例子

屏幕快照 2019-07-10 10.21.27.png

实现Text的左侧布局
Align(
      alignment: Alignment.topLeft,
      child: Container(
        margin: EdgeInsets.only(top: 10, left: 15, right: 15),
        child: Text(
          '请输入6-12位密码，支持数字、字母、字符（除空格）',
          style: new TextStyle(color: Color(0xff999999), fontSize: 11.0),
          textAlign: TextAlign.left,
          softWrap: true,
        ),
      ),
    );