Flutter基础组件详解-Text的使用

Text最基本的用法有这些：

• 字体
• 颜色，字体，大小，背景
• 文本的对齐方式，可以选择左对齐、右对齐还是居中对齐
• TextSpan，它代表文本的一个“片段”
• 设置某一个节点处设置一个默认的文本样式
• 文本点击事件
• 富文本的显示 ,文字，阴影

基本使用
Text 用来显示单一样式的文本字符串，

Container(
              child: Text(
                "多行文本显示时，只显示 maxLines，多余文本通过 overflow 处理 " * 7,
                ///overflow：文本溢出时，多余文本的处理方式，可以配合 maxLines 使用。
                overflow: TextOverflow.ellipsis,

                ///当文本跨行，页面显示的最大行数。
                maxLines: 1,
              ),
            ),
            Container(
              child: Text(
                "文字缩放倍数",
                /// textScaleFactor：相当于当前字体大小的缩放比例，它是设置 fontSize 属性的快捷方式。
                textScaleFactor: 1.5,
              ),
            )

字体

如果需要使用自定义字体，则需要在项目中的fonts文件夹下放置字体文件，然后在配置文件pubspec.yaml中进行配置：

flutter: fonts:
- family: Raleway
fonts:
- asset: fonts/Raleway-Regular.ttf
- asset: fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: fonts/RobotoMono-Regular.ttf
- asset: fonts/RobotoMono-Bold.ttf
weight: 700

通过主题设置字体：

MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: MyHomePage(),
);

单独设置字体

Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
);

style 属性用来指定文本的显示方式，例如颜色，字体，大小，背景，装饰等等

Container(
                child: Text(
              "textStyle 的用法 " * 2,
              style: TextStyle(
                ///color：文本颜色。文本的前景色，不能与 foreground 共同设置。
                color: Colors.deepOrange,

                ///fontSize：字体大小( pt、sp )，默认为 14 个逻辑像素( 14pt、14sp )。
                fontSize: 20.0,

                ///height:指定行高，但它并不是一个绝对值
                height: 2.0,

                ///fontFamily：使用的字体名称
                fontFamily: "MicroSoft Yahei",

                ///fontStyle：字体的显示方式，如 FontStyle.italic 为斜体
                fontStyle: FontStyle.italic,

                ///fontWeight：绘制文本时使用的字体粗细
                fontWeight: FontWeight.bold,

                ///background：文本背景色
                background: new Paint()..color = Colors.yellow,
                /*decoration：绘制文本装饰

                  TextDecoration.underline：下划线
                TextDecoration.overline：上划线
                TextDecoration.lineThrough：删除线
                  TextDecoration.none：无（默认）*/
                decoration: TextDecoration.underline,
                /*decorationStyle：绘制文本装饰的样式

                  TextDecorationStyle.dashed：一条虚线（短横线）
                TextDecorationStyle.dotted：一条虚线 （点）
                TextDecorationStyle.solid：一条实线
                TextDecorationStyle.double：两条实线
                TextDecorationStyle.wavy：一条波浪线*/

                decorationStyle: TextDecorationStyle.dashed,
              ),
            )),
            Container(
                padding: EdgeInsets.only(top: 80),
                child: Text(
                  '单行文字间隔，中文无效。How are you',

                  ///wordSpacing：单行文字间隔，中文无效
                  style: TextStyle(wordSpacing: 20),
                )),
            Container(
                padding: EdgeInsets.only(top: 80),
                child: Text(
                  '文本字与字之间间隔。How are you',

                  ///letterSpacing：文本字与字之间间隔
                  style: TextStyle(letterSpacing: 20),
                ))

textAlign
文本的对齐方式，可以选择左对齐、右对齐还是居中对齐：

Container(
  width: 300.0,
  child: Text(
    "这里演示 textAlign.left 的用法 ",
    textAlign: TextAlign.left,
  ),
),
Container(
  width: 300.0,
  child: Text(
    "这里演示 textAlign.center 的用法 ",
    textAlign: TextAlign.center,
  ),
),
Container(
  width: 300.0,
  child: Text(
    "这里演示 textAlign.right 的用法 ",
    textAlign: TextAlign.right,
  ),
),

textSpan
在上面的例子中，Text 的所有文本内容只能按同一种样式，如果我们需要对一个 Text 内容的不同部分按照不同的样式显示，这时就可以使用 TextSpan，它代表文本的一个“片段”。

Container(
                child: Text.rich(TextSpan(children: [
              TextSpan(text: "Home:"),
              TextSpan(
                text: "https://blog.youkuaiyun.com/timtian008",
                style: TextStyle(color: Colors.blue),
              ),
              TextSpan(
                text: " 请点击链接",
                style: TextStyle(
                  color: Colors.red,
                  fontStyle: FontStyle.italic,
                ),
              ),
            ]))),

DefaultTextStyle
在 widget 树中，文本的样式默认是可以被继承的，因此，如果在 widget 树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而 DefaultTextStyle 正是用于设置默认文本样式的。

Container(
                child: DefaultTextStyle(
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.red,
                fontSize: 20.0,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: double.infinity,
                    child: Text("这里演示 DefaultTextStyle 的用法"),
                  ),
                  Text("这里演示 DefaultTextStyle 的用法"),
                  Text(
                    "这里没有继承默认字体样式",
                    style: TextStyle(
                      inherit: false,
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
            )),

Text的点击事件
可以使用GestureDetector，也可以使用InkWell：

InkWell(
            child: Text(
              "Default Text",
            ),
            onTap: (){print("click");},
          )

**富文本 **
可以使用Text.rich/ RichText + TextSpan来显示富文本文字阴影

文字的阴影可以通过TextStyle中的shadows属性进行控制：

Container(
                child: Text.rich(
              TextSpan(
                text: "plain text ",
                children: <TextSpan>[
                  TextSpan(
                      text: "color",
                      style: TextStyle(color: Colors.pinkAccent)),
                  TextSpan(text: "fontSize", style: TextStyle(fontSize: 28)),
                  TextSpan(
                      text: "decoration",
                      style: TextStyle(decoration: TextDecoration.lineThrough)),
                ],
              ),
            )),
            Container(
              child: RichText(
                  text: TextSpan(
                children: <TextSpan>[
                  TextSpan(
                      text: "Text 1",
                      style: TextStyle(color: Colors.blueAccent)),
                  TextSpan(
                      text: "Text 2",
                      style: TextStyle(color: Colors.pinkAccent, fontSize: 28)),
                ],
              )),
            )