第三百七十三回

我们在上一章回中介绍了"分享三个使用TextField的细节"相关的内容，本章回中将介绍如何让Text组件中的文字自动换行.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的Text组件就是用来显示文本的组件，关于该组件的用法可以点击这里查看前面章回中的内容，本章回中主要介绍如何让Text组件中的文本内容自动
换行。这里说的文本主要指长文本，这类文本的长度超过了屏幕宽度或者组件宽度，无法在一行内显示。在实际项目中会遇到这样的场景，因此我们专门来介绍这方面的内容。

2. 实现方法

2.1 基本用法

让长文本自动换行需要使用Text组件的属性，涉及到的属性有三个，详细如下：

• maxLines属性：主要用来控制文本占用的行数；
• softWrap属性：主要用来控制是否自动换行，默认值为true；
• overflow属性：主要用来控制超过长度的文本显示方式，比如显示省略号；
  使用这三个属性后就可以让长文本自动换行显示，不过softWrap属性可以不设置，因为该属性的默认值是true.

2.2 特殊用法

当Text组件处于其它布局组件中时上一小节中介绍的基本用法就不起作用了，这就是Text组件的特殊用法，详细如下：

• 当Text组件位于Column组件中时，不使用基本用法中的三个属性也会让长文本自动换行；
• 当Text组件位于Row组件中时，不仅要使用基本用法中的三个属性还需要在它外层加一个Extend组件，这样才会让文本自动换行；
  这两个用法只用文本描述比较抽象，我们将在后面的小节中通过示例代码来演示它们的用法。

3. 示例代码

Column(
  children: [
    ///列中的长文本可以自动换行
    const Text( " Text Widget WidgetWidgetWidgetWidgetWidgetWidgetWidget",
        style: TextStyle(
          color: Colors.white,
          fontSize: 16,
          backgroundColor: Colors.cyan,
        ),
    ),
    const SizedBox(height: 16,),
    ///行中的长文本不可以自动换行，需要嵌套一个Expander组件
    const Row(
      children: [
        Expanded(
          child: Text( " Text Widget WidgetWidgetWidgetWidgetWidgetWidgetWidget",
          maxLines: 2,
          softWrap: true,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
            backgroundColor: Colors.cyan,
          ),
          ),
        ),
      ],
    ),
  ],
),

我们在上面的示代码中演示了基本用法和特殊用法中介绍的内容，基本用法没有单独列出来，而是包含在特殊用法中了，也就是代码中Expander组件中的内容。编译并且
运行上面的程序可以得到下面的运行效果图。035

4. 内容总结

最后我们对本章回的内容做一个全面的总结：

• 当项目中遇到超过屏幕或者容器宽度的长文本时需要换行显示；
• 在Text组件中提供了:maxLines，softWrap和overflow三个属性来控制文本自动换行显示；
• 当Text组件位于Column和Row等布局组件中时需要特殊的用法才能让长文本自动换行显示；
  看官们，与"如何让Text组件中的文字自动换行"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!