我们在上一章回中介绍了页面之间传递数据相关的内容,本章回中将介绍如何使用T
ext Widget
。闲话休提,让我们一起Talk Flutter吧。
概念介绍
我们在这里说的Text Widget
就是显示文字内容的组件,其实我们一直在使用它,只是没有详细介绍它的使用方法,本章回中将详细介绍它的使用方法。
使用方法
和其它的Widget一样,Text也提供了相关的属性来控制文字显示,我们介绍一些常用的属性,详细如下:
textAlign
属性用来控制文字的对齐方式TextStyle
属性用来控制文字和颜色和字体大小maxLines
属性用来控制文字显示的最大行数overflow
属性用来控制文字超出范围后的显示方式
示例代码
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
"的内容就介绍到这里,欢迎大家在评论区交流与讨论!