Text组件的主要功能

文章目录

• 1 概念介绍
• 2 使用方法
• 3 示例代码

我们在上一章回中介绍了页面之间传递数据相关的内容,本章回中将介绍如何使用Text Widget。闲话休提，让我们一起Talk Flutter吧。

1 概念介绍

我们在这里说的Text Widget就是显示文字内容的组件，其实我们一直在使用它，只是没有详细介绍它的使用方法，本章回中将详细介绍它的使用方法。

2 使用方法

和其它的Widget一样，Text也提供了相关的属性来控制文字显示，我们介绍一些常用的属性，详细如下：
textAlign 属性用来控制文字的对齐方式
TextStyle 属性用来控制文字和颜色和字体大小
maxLines 属性用来控制文字显示的最大行数
overflow 属性用来控制文字超出范围后的显示方式

3 示例代码

return Scaffold(
  appBar: AppBar(
    title: const Text("Text Example"),
  ),
  body: Container(
    width: 300,
    height: 200,
    margin:const EdgeInsets.only(left:50,top:20,right: 0,bottom: 0) ,
    alignment: Alignment.center,
    decoration: const BoxDecoration(
      color: Colors.amberAccent,
      borderRadius:BorderRadius.all(Radius.circular(20)),
    ),
    child: const Text(
      " Text Widget WidgetWidgetWidgetWidgetWidgetWidgetWidget",
      style: TextStyle(
        color: Colors.white,
        fontSize: 12,
        backgroundColor: Colors.cyan,
      ),
      textAlign: TextAlign.left,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    ),
  ),
);

在上面的代码中，我们定义了一个Container容器，并且把Text当做它的子控件，代码设置了容器的大小和背景颜色，同时也设置了Text的颜色，两种颜色不同，因此
可以明显地看出来文字的颜色，如果还是觉得不明显，可以调整文字的字体大小，我们还可以设置文字的背景颜色，这个在部分场景下会使用。文字的颜色，大小和背景
颜色都是通过TextStyle类控制的。该类还提供了其它的属性，由于不常用，我们就不一一介绍了，感兴趣的看官可以参考官方文档。代码中设置了文字的对齐方式是向
左对齐，大家可以自己调整为居中对齐，这也是常用的对齐方式。代码中文字的内容比较多，它会自动换行显示，如果我们不想让它换行，可以使用maxLines属性来控制
文字的行数，比如代码中将文字行数设定为一行，超出一行的内容使用overflow属性控制，代码中使用的属性值为TextOverflow.ellipsis，它表示超出一行的文字
显示为三个小点，这也是常用的方式。大家也可以试试其它的属性值，我在这里就不介绍了。最后说一下，我们把Text放到了Container容器中，这样做是为了调试时方
便查看它的位置和文字颜色，以及背景颜色，Text是十分常用的widget，大家可以把它放到任何需要显示文字的地方。

看官们，关于"如何使用Text Widget"的内容就介绍到这里，欢迎大家在评论区交流与讨论!