Text组件,是一个最基础的显示文本组件:
Text("Hello Flutter!"),
在Text组件的默认构造函数中有一个必传的位置参数,且必须作为第一个传入的参数。其内容就是需要显示的文本,类型是String。
const Text(
String this.data, {
super.key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
this.selectionColor,
}) : textSpan = null;
style:
Text组件的默认样式是由上级DefaultTextStyle继承而来。如果需要修改样式,则可以通过style参数传入一个TextStyle类型的值。
Container(
width: 50,
height:100,
color: Colors.yellow,
child:Text("Text",
style: TextStyle(
color: Colors.black, //黑字
backgroundColor: Colors.cyan, //背景颜色
fontSize: 20, //字体大小
fontWeight: FontWeight.bold, //加粗
fontStyle: FontStyle.italic, //加斜体
),
semanticsLabel: "语义标签是辅助功能的一部分",),
),
Text可以借助TextStyle中decoration,以及配套的decorationStyle,decorationColor和decorationThickness共4个属性,可以为文本添加修饰线段。decorationStyle参数可以传入5种TextDecorationStyle
//TextDecoration overline上画线 underline下画线 lineThrough划掉
//TextDecorationStyle soild实线 dashed虚线 dotted点线 wavy波浪线
//double 两条实线
//decorationColor修饰线的颜色 decorationThickness修饰线的粗细
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.solid,
decorationThickness: 2.0,
Text可以利用 letterSpacing来控制字母与字母之间的留白和wordSpacing来控制单词与单词之间的留白,单词是以空格来作为界限识别,汉字可以直接使用letterSpacing来设置:
Text(
"汉字之间的留白hanzi",
style:TextStyle(letterSpacing:4),
),
Text(
"词语 主要靠空格分开 ciyu fenkai",
style:TextStyle(wordSpacing:4)
),
文本渲染: Text中style也支持一些特性的渲染:阴影,描边,渐变等 阴影:利用shadows参数传入阴影:
Text(
"添加文字阴影",
style:TextStyle(
fontSize:40,
color:Colors.black,
shadows:[
BoxShadow(
offset:Offset(10,10),
color:Colors.grey,
blurRadius:8,
),
],
),
)
TextStyle利用foreground和background两个参数直接调用底层Paint渲染自定义特效,直接操作前景和背景的渲染:
Stack(
children:<Widget>[
Text(
"文字镂空效果",
style:TextStyle(
fontSize:40,
forground:Paint()
..style = PaintingStyle.Stroke,
..strokeWidth = 4,
..color = Colors.black,
),
),
Text(
'文字镂空效果',
style:TextStyle(
fontSize:40,
color:Colors.white,
),
),
]
),
Paint还可以为文字添加渐变色效果:
Text(
'文字渐变效果',
style:TextStyle(
fontSize:48,
background:Paint()
..shader = ui.Gradient.linear(
Offset(0,0),
Offset(150,0),
[Colors.black,Colors.white],
),
foreground.Paint()
..shader = ui.Gradient.linear(
Offset(0,100),
Offset(0,180),
[Colors.white,Colors.black],
),
)
)
textAlign 和 textDirection:
Text组件中是通过textAlign设置文字对齐方式,
//left左对齐 right右对齐 center居中 jusify两端对齐 start起始对齐 end末尾对齐
Text(
'文字对齐',
textAlign:TextAlign.end,
textDirection: TextDirection.ltr,
),
当需要改变默认的阅读方式的时候可以使用TextDirection属性,文字显示从左往右.ltr或者右往左.rtl
maxLines 和 softWrap
当文本太长的时候,Text组件默认会将文本内容自动分成多行显示,可以通过softWrap控制是否需要打开多行显示,传入false关闭。 maxLines可以设置文本最多显示几行,文本超出部分将安装overflow设置的属性处置。
overflow
当文本较长时,且不需要渲染全部内容时,可用overflow属性设置超出的部分该如何处置,可以传入的参数为TextOverflow类型,并且提供了clip剪裁,fade渐淡,ellipsis省略号,visible可见。
textScaleFactor
文字缩放系数,可以接受一个double类型,并在Text组件渲染文本时将Style参数设置的字号值与该系数相乘。
DefaultTextStyle
Text组件的默认方式是由上级DefaultTextStyle继承而来,当多个Text组件需要统一的风格时,可以在Text组件的上级插入一个DefaultTextStyle组件,直接通过修改默认样式,统一多个下级的Text组件。 Text组件在渲染时,会自动将style参数中的样式与上级提供的样式合并。 说到合并这里说一下:在遇到多个DefaultTextStyle组件嵌套时,只有最近的那个样式会生效。每一个DefaultTextStyle组件都可以当作一个文本样式的全新起点,不仅确定了他的下级Text组件的默认样式,还同时切断了他们和更上级的DefaultTextStyle的联系。若需要新的DefaultTextStyle组件继承上级已有的默认样式,则可以借助DefaultStyle.merge()构造函数进行合并操作,而不是重新开始。
DefaultTextStyle(
style:TextStyle(
color:Colors.grey,
fontSize:24,
fontWeight:FontWeight.bold,
),
child:Column(
children:<Widget>[
DefaultTextStyle(
style:TextStyle(
color:Colors.black,
fontStyle:FontStyle.italic,
),
child:Text('不使用合并:将样式定义为黑体斜体'),
),
DefaultTextStyle.merge(
style:TextStyle(
color:Colors.black,
fontStyle:FontStyle.italic,
),
child:Text("使用合并:将样式定义为黑体斜体"),
)
],
),
),