第二章●第六节：文本（Text）

文本组件显示一个但一样式的文本字符串，字符串可能多行显示，也可能全部显示在一行中，具体取决于布局约束。其提供两种构造函数。

样式参数时可选的。当省略时，文本将使用最接近的DefaultTextStyle中的样式。如果给定样式的TextStyle.inherit属性为true（默认），则给定样式将于最接近的DefaultTextStyle的样式合并。这种合并行为是很有用的，例如，使用默认字体系列和大小时使文本粗体显示。

• 若使用文本对触摸事件作出反应，请将其包装在GestureDetector组件中，并使用GestureDetector.onTap处理。
• 在Material Design应用程序中，考虑使用FlatButton代替，或者如果不适用，至少使用InkWell来代替GestureDetector。
• 若使用部分文本做交互，需要使用RichText，并将TapeReservator指定为文本相关部分的TextSpan.recognizer。
  • RichText：提供了对文本样式的更多控制；
  • DefaultTextStyle：为文本组件提供默认样式。

1. new Text()：创建一个文本组件

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Text组件"),
        ),
        body: Center(
          child: Text(
            "Hello world",
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 24.0,
              fontWeight: FontWeight.bold
            ),
          ),
        ),
      ),
    );
  }
}

new Text

2. new Text.rich()：使用TextSpan创建文本组件

Text.rich(
  TextSpan(text: "Text.rich",children: [
    TextSpan(text: "01",style: TextStyle(fontSize: 25.0)),
    TextSpan(text: "02"),
    TextSpan(text: "03"),
    TextSpan(text: "04")
  ]),
  textAlign: TextAlign.center,
  textDirection: TextDirection.ltr,
  overflow: TextOverflow.ellipsis,
)

new Text.rich

Text属性

Text属性

本节内容到此结束，若在使用过程中遇到问题，欢迎留言交流，我们一起成长。

---

总目录结构