Flutter 常用Widget-Text

Text 部件是我们日常开发中最常用的部件，我们先来看看文档上对它的描述。

Text 部件用于显示单个样式的文本字符。字符串可能会多行显示，也可能在同一行显示，具体取决于布局对它的约束。

Text 部件的样式参数是可选的。等省略这个参数时，文本将使用最接近的封闭的DefaultTextStyle的样式（原文为the closest enclosing DefaultTextStyle）。如果给定样式的TextStyle.inherit属性为true（默认值），则该给定样式将与最接近的DefaultTextStyle合并。

使用Text.rich构造函数，“文本”窗口小部件可以显示具有不同样式的TextSpans的段落。 下面的示例显示每个单词具有不同样式的“ Hello beautiful world”。

交互
要使Text对触摸事件做出反应，请将其包装在GestureDetector小部件中，使用GestureDetector.onTap处理程序。在material design应用程序中，请考虑改用FlatButton，如果不合适，请考虑使用InkWell而不是GestureDetector。要使文本的各个部分具有交互性，请使用RichText并指定TapGestureRecognizer作为文本相关部分的TextSpan.recognizer的引用。

最为最基本的UI元素，我们最常用的用法有一下几种。

• 字体大小、颜色。
• 常用的样式，粗体、倾斜、下划线等。
• 单行多行控制。
• 超出边界显示。
• 富文本。
• 文字阴影。
• 点击交互。

接下来，看一看如何使用。

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//    return Center(child: Text('我是一个text'));
    return Scaffold(
      body: Center(child: Text('我是一个text')),
    );
  }
}

切换上面两段代码，我们对于text的设置是一样的，那么为什么会有两个不同的结果呢？还记得上面对于DefaultTextStyle的描述吗，我们在没有设置TextStyle的时候，会去寻早周围最近的一个textStyle设置。所以当我们使用Scaffold来最为树的根节点的时候，text就可以好到附近的TextStyle了。 

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          '我是一个text 是一个text 是一个text 是一个text 是一个text 是一个text 是一个text 是一个text 是一个text',
          maxLines: 2, // 最大行数
          softWrap: true, // 是否自动换行
          overflow: TextOverflow.ellipsis, //字体截断方式
          style: TextStyle(
            shadows: <Shadow>[
              //阴影
              Shadow(
                color: Colors.green, //颜色
                offset: Offset(5, 10), // 影子的偏移
              )
            ],
            fontSize: 20, //字体大小
            color: Colors.blue, //字体颜色
            fontWeight: FontWeight.w900,
            fontStyle: FontStyle.italic, //倾斜、加粗
            decoration: TextDecoration.underline, //下划线
            decorationColor: Colors.red, //颜色
            decorationStyle: TextDecorationStyle.solid, // 装饰的类型
          ),
        ),
      ),
    );
  }
}

富文本 可以使用Text.rich 或者 RichText + TextSpan来显示富文本：

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text.rich(
          TextSpan(
            text: "hello ",
            children: <TextSpan>[
              TextSpan(
                text: "beautiful ",
                style: TextStyle(color: Colors.red),
              ),
              TextSpan(
                text: "wor",
                style: TextStyle(fontSize: 20),
              ),
              TextSpan(
                text: "ld",
                style: TextStyle(decoration: TextDecoration.lineThrough),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

交互

text 交互

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          child: Text(
            '我是一个text',
          ),
          onTap: () {
            debugPrint("click");
          },
        ),
      ),
    );
  }
}

富文本交互 

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text.rich(
          TextSpan(
            recognizer: TapGestureRecognizer()..onTap = () {},
            text: "hello ",
            children: <TextSpan>[
              TextSpan(
                recognizer: TapGestureRecognizer()..onTap = () {},
                text: "beautiful ",
                style: TextStyle(color: Colors.red),
              ),
              TextSpan(
                text: "wor",
                style: TextStyle(fontSize: 20),
              ),
              TextSpan(
                text: "ld",
                style: TextStyle(decoration: TextDecoration.lineThrough),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

总结：text的基本用法和属性就先写到这，Flutter中大部分的属性用法都写在文档和Flutter源码注释中，而且解释的也比较详细。接下来的文章会继续将常用Widget的使用方法逐一介绍，在最后的系列中，会公开一个商业级的项目，感兴趣的小伙伴关注。如果您在阅读过程中发现错误，请及时留言给我，我会第一时间改正，争取不误导他人。