Flutter学习笔记之Text(1)

166 阅读4分钟

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("使用合并:将样式定义为黑体斜体"),
           )
       ],
   ),
),