Text

默认显示

在我们进行日常开发工作中，Text可以说是我们使用最多的部件了，那么我们来研究一下Text的相关使用；
首先，我们来看一下一段文本在Text上的默认显示效果：

Text('Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。');

其显示效果如下：

居中显示

textAlign: TextAlign.center,

显示效果如下：

TextStyle

创建一个TextStyle给Text的style属性赋值，用来改变字体大小及粗细；

  final TextStyle _textStyle = const TextStyle(
    fontSize: 20.0,
    fontWeight: FontWeight.w800,
  );
  @override
  Widget build(BuildContext context) {
    return Text(
      'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。',
      textAlign: TextAlign.center,
      style: _textStyle,
    );
  }

显示效果如下：

maxLines

显示最大行数：

return Text(
      'Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。',
      textAlign: TextAlign.center,
      style: _textStyle,
      maxLines: 2,
    );

代码运行效果如下：

overflow

�多余行数我们以...来显示：

显示效果：

文本拼接

显示文字很容易，但是在开发过程中经常是需要拼接文本的，那么又该如何处理呢？

我们先定义几个文本字符串：

  final String _title = '《法外狂徒张三的自我修养》';
  final String _lector = '讲师：';
  final String _name = '罗翔';

那么，我们如何将这三个字符串进行拼接呢？在Flutter中可以使用$来进行操作：

Text(
    '$_title -- $_lector$_name',
    textAlign: TextAlign.center,
    style: _textStyle,
);

我们来看一下显示效果：

RichText

简单的Text显示文字很容易，但是这还不足以满足我们的开发需求，我们在开发过程中经常会有需要显示富文本的情况，那么又该如何处理呢？

这个时候就需要使用RichText部件了；再使用RichText时结合TextSpan一起使用：

最终显示效果如下：

Container

Container这个部件在我们开发过程中会经常用到;

我们先来给Container添加一个颜色：

Container(
    color: Colors.orange,
);

我们执行代码之后发现，这个Container是整个屏幕大小：

这是为什么呢？这是因为Container默认大小是由其父部件决定的，会铺满父部件;

我们在Container里边使用Row部件布局，再添加一个Container：

运行发现，红色的Container是无法显示的，橙色的Container依然是全屏显示，那么我们给这个红色的Container添加一个子部件：

这个时候我们再次刷新界面发现效果如下：

添加了一个Icon图标之后，Container显示出来了，而且原来的橙色的Container高度也改变了；这是自适应弹性布局的渲染效果：父部件会跟随子部件的内容进行改变；

我们再给红色Container添加一个内边距：

这个时候我们再来看一下运行效果：

结果，红色Container区域扩大，同时橙色的Container也同步扩大；那么再增加一个外边距呢：

我们再次查看渲染效果：

红色Container大小不变，而橙色的Container区域再次扩大了；高度扩大了15*2；