做 App 開發(fā)，甚至所有前端開發(fā)，文本控件應(yīng)該是用的最多的，用戶看到最多的基本上也都是文本控件相關(guān)的，這篇博客詳細(xì)介紹一下 Flutter 中的文本控件 Text

Text 基本介紹

位置

在 Flutter SDK 下，flutter -> widgets -> text.dart源碼不大，加注釋總共才不到400行。

繼承關(guān)系

Text -> StatelessWidget ->Widget -> DiagnosticableTree ->Diagnosticable,這里可以看出Text 是直接繼承 StatelessWidget的。這里額外結(jié)介紹下Flutter 有兩種狀態(tài)控件:StatelessWidget（無狀態(tài)組件）、StatefulWidget（有狀態(tài)組件）,這兩者的區(qū)別可以參考下走路不穿鞋oO作者寫的
Flutter中StatefulWidget控件狀態(tài)管理的兩種方式

Text 的基本用法

這讓我這個(gè)習(xí)慣用 XML 畫布局感到特別的不習(xí)慣。

class MyTextApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new Text(
            "This is Text"
          ),
        ),
      ),
    );
  }

image.png

就這么簡(jiǎn)單我們完成了第一個(gè) Text 控件的使用，new Text("This is Text") .

Text 的常見屬性

這個(gè)我們只需要查看一下 Text 的構(gòu)造方法就知道了。

  const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  })