Flutter 分步 UI 布局和 Widget 教程 - 文本和样式 Text Widget

Text

我们先看一下 Text 构造函数的参数：

const Text( 
    this.data, { 
    //data 就是我们需要展示的文字 是字符串类型，这个是必传字段，其他的都是可选
    Key key,    
    //widget的标识
    this.style, 
    //文本样式，类型是TextStyle
    this.strutStyle, 
    //用来设置最小行高的参数
    this.textAlign, 
    //文本的对齐方式，类型是TextAlign
    this.textDirection, 
    // 文字方向，类型是TextDirection
    this.locale, 
    //选择用户语言和格式的标识符，类型是Locale，主要用于国际化
    this.softWrap, 
    //bool 类型 ，false标识文本只有一行，水平方向无限
    this.overflow, 
    //超出显示区域后的展示方式，类型是TextOverflow
    this.textScaleFactor,
    //double类型 表示文本相对于当前字体的缩放系数，默认为1.0
    this.maxLines,
    // int 类型，显示的最大行数
    this.semanticsLabel, 
    //String 类型，给文本加上一个语义标签
    this.textWidthBasis,
    //一行或多行文本宽度的不同方式，类型是TextWidthBasis
  }) 
复制代码

Text data 、样式、文字对齐、❿maxLines飞。 1。最简单的例子

  Text("Fulade");
复制代码

2。放大和缩小

Text("文字放大1.5倍",textScaleFactor: 1.5);
复制代码

textScaleFactor 是比例参数。默认值为 1.0。设置小于1的参数为放大，设置为1左右的参数为放大。 3。 Center、left 和 right

Text(
  "居右显示" * 10,
  textAlign: TextAlign.right,
);
复制代码

textAlign 是位置参数。常见的枚举值有TextAlign.right、TextAlign.left和Centern.centern。 4。单行显示

Text(
  "最多一行显示超过部分显示..." * 10,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);
复制代码

maxLines 表示文本必须显示多少行。如果超过要显示的行数，文本将被截断。使用 overflow 剪切文本。 overflow有以下枚举值：

enum TextOverflow {
  clip,      //直接裁剪。
  fade,      // 渐变淡出
  ellipsis,  // 以省略号的方式
  visible,   // 依然显示，此时将会溢出父组件
}
复制代码

如果我们不设置maxLines，文本默认换行。以展示一切的方式展示一切。

以上四种样式的效果如下：

Text样式

如果要设置更复杂的文字样式，我们必须输入Text❓❓❓'样式参数，style参数获取Text Style的对象。 Text风格可以帮助我们做很多事情。

5。 Bold

Text(
  "粗体",
  style: TextStyle(fontWeight: FontWeight.bold),
)
复制代码

fontWeight 用于设置粗体字体。 FontWeight.bold默认为w700。 6。颜色 参数

Text(
  "红色",
  style: TextStyle(color: Colors.red),
)
复制代码

color用于设置颜色。 7。字体大小

Text(
  "字号20",
  style: TextStyle(fontSize: 20),
)
复制代码

字体大小用于设置字体大小。 8。 Italic

Text(
  "斜体",
  style: TextStyle(fontStyle: FontStyle.italic),
)
复制代码

fontStyle可用于设置斜体，FontStyle.italic表示斜体，默认为♿♿♿♿♿♿♿♿♿♿♿ ♿♿♿♿♿♿ ♿♿？

Text(
  "删除线",
  style: TextStyle(
      decoration: TextDecoration.lineThrough,
      decorationColor: Colors.red),
)
复制代码

decorationColor参数是设置删除线的颜色，TextDecoration.lineThrough是删除线的样式。 ？

以上样式的显示效果如下：

Rich Text 和 Text Span

Flutter 支持在一个文本行中显示不同颜色的文本。这里我们必须使用Rich Text和Text Span。

12。彩色文本

RichText(
  text: TextSpan(
    textAlign: TextAlign.center,
    text: "多彩文字：",
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
          text: "红色、", style: TextStyle(color: Colors.red)),
      TextSpan(
          text: "蓝色、", style: TextStyle(color: Colors.blue)),
      TextSpan(
          text: "绿色 ", style: TextStyle(color: Colors.green)),
    ],
  ),
);
复制代码

Text Span 的参数 children 可以是 Text Span❓❓❓ 对象的数组。每个Text跨度都可以设置颜色和字体，这样我们就可以将其组合成丰富多彩的文本结构。同样，Rich Text也有textAlign参数，即整个文本的位置参数。

13。为文本添加点击事件

RichText(
  text: TextSpan(
    text: "添加了手势的文字: ",
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: "点击会输出Log",
        style: TextStyle(color: Colors.blue),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            tapCount++;
            print("taped taped " + tapCount.toString());
          },
      ),
    ],
  ),
);
复制代码

Text Span可以为对应的文本添加手势，这样我们就可以满足我们点击某个文本触发事件的需求，这在日常开发中非常有效。我们不需要做“文字+按钮+文字+...”的组合。

DefaultTextStyle(
  // 设置文本默认样式
  style: TextStyle(
    color: Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("DefaultTextStyle "),
      Text("DefaultTextStyle"),
      Text(
        "改变了的DefaultTextStyle",
        style: TextStyle(
            inherit: false, // 设置不再继承默认样式
            color: Colors.blue),
      ),
    ],
  ),
);
复制代码

Text(
  "最多一行显示超过部分显示..." * 10,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);
复制代码

Text("文字放大1.5倍",textScaleFactor: 1.5);
复制代码