目 录CONTENT

文章目录

Flutter 基础控件篇-->文本(Text)

俊阳IT知识库
2023-03-02 / 0 评论 / 0 点赞 / 462 阅读 / 1,576 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903956557070343
欢迎访问😃,有任何问题都可留言评论哦~

Flutter 中的Text控件用于显示一些文本内容和样式,其中包含了控制文本显示样式的一些属性

源码示例

构造函数如下:

const Text(
	this.data, {
	Key key,
	this.style,
	this.strutStyle,
	this.textAlign,
	this.textDirection,
	this.locale,
	this.softWrap,
	this.overflow,
	this.textScaleFactor,
	this.maxLines,
	this.semanticsLabel,
})

属性解释

只说一些经常使用的属性

textAlign

设置文本的对齐方式,可以选择左对齐、右对齐还是居中。

示例:

Text(
  '测试',
  textAlign: TextAlign.center,	//文本居中
)

注:对齐的参考系是Text widget本身,
如果Text文本内容宽度不足一行,Text的宽度和文本内容长度相等,那么这时指定对齐方式是没有意义的,只有Text宽度大于文本内容长度时指定此属性才有意义。

Text中,文本也是可以用算式表示的
例如:

Text(
    "xxx" * 100,
),

这样也是可以的,会显示100个xxx

maxLines

指定文本显示的最大行数,默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。

如:maxLines: 1,则文本的内容最多一行
这个属性要配合overflow一起使用

overflow

指定文本的截断方式
默认是直接截断,我们经常使用的截断方式是TextOverflow.ellipsis,他会将多余文本截断后以省略符...表示

示例:

Text(
  '测试测试测试测试测试测试测试测试测试测试测试',
  maxLines: 1,	//设置最多一行
  overflow: TextOverflow.ellipsis,	//如果内容超出屏幕宽度,则以...表示
)

textScaleFactor

代表文本相对于当前字体大小的缩放因子,相对于去设置文本的样式style属性的fontSize,它是调整字体大小的一个快捷方式。

style–>TextStyle(详解)

style中有一个TextStyle,用来设置文本的样式

示例:

Text("Hello world",
  style: TextStyle(
    color: Colors.blue,	    //设置文本颜色
    fontSize: 18.0,	    //设置字体大小
    height: 1.2,    //设置行高
    fontFamily: "Courier",	//设置是什么字体
    background: new Paint()..color=Colors.yellow,	//设置背景色
    decoration:TextDecoration.underline,	
    decorationStyle: TextDecorationStyle.dashed
  ),
);

关于decoration有关的使用,请参考我的文章:Flutter 容器控件篇–>Container

源码示例

构造函数如下:

const TextStyle({
	this.inherit = true,
	this.color,
	this.backgroundColor,
	this.fontSize,
	this.fontWeight,
	this.fontStyle,
	this.letterSpacing,
	this.wordSpacing,
	this.textBaseline,
	this.height,
	this.locale,
	this.foreground,
	this.background,
	this.shadows,
	this.decoration,
	this.decorationColor,
	this.decorationStyle,
	this.decorationThickness,
	this.debugLabel,
	String fontFamily,
	List<String> fontFamilyFallback,
	String package,
})

其实平常用不了这么多,只要记住常用的几个就行

属性解释

有关基础的属性,在上面的例子中已经注释标明了,所以就不做过多解释,这里只说几个需要注意的

height

该属性用于指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于fontSize*height

color

在使用color时,我们通常都是这样color: Colors.blue,
也可以这样color: Color(0xFF1E88E5),

然后会呈现蓝色,但是如果我们想改变一下颜色的深度呢?不想让他那么蓝

我们可以这样color: Colors.blue[50],
在颜色后面加一个[]里面放1-100的数值,就可以调整颜色的深度

fontFamily

由于不同平台默认支持的字体集不同,所以在手动指定字体时一定要先在不同平台测试一下。

fontSize

该属性和TexttextScaleFactor都用于控制字体大小。但是有两个主要区别:

  • fontSize可以精确指定字体大小,而textScaleFactor只能通过缩放比例来控制。
  • textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整,而fontSize通常用于单个文本,字体大小不会跟随系统字体大小变化。

TextSpan

在上面的例子中,Text的所有文本内容只能按同一种样式,

如果我们需要对一个Text内容的不同部分按照不同的样式显示,这时就可以使用TextSpan,它代表文本的一个“片段”。

源码示例

构造函数如下:

const TextSpan({
	this.style,
	this.text,
	this.children,
	this.recognizer,
	this.semanticsLabel,
});

属性解释

其中 styletext 属性代表该文本片段的样式和内容。

children是一个TextSpan的数组,也就是说TextSpan可以包括其他TextSpan

recognizer用于对该文本片段上用于手势进行识别处理。这里不做介绍

举一个例子:

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "夜夕i的博客: "
     ),
     TextSpan(
       text: "https://juejin.im/user/2999123452633720",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _click
     ),
    ]
))

上面代码中,通过TextSpan实现了一个基础文本片段和一个链接片段,然后通过Text.rich方法将 TextSpan 添加到Text中,
_click是点击链接后的一个处理器(代码已省略)

DefaultTextStyle

在Widget树中,文本的样式默认是可以被继承的
因此,如果在Widget树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,而DefaultTextStyle正是用于设置默认文本样式的。

代码示例:

DefaultTextStyle(
  //1.设置文本默认样式  
  style: TextStyle(
    color:Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("hello world"),
      Text("I am Jack"),
      Text("I am Jack",
        style: TextStyle(
          inherit: false, //2.不继承默认样式
          color: Colors.grey
        ),
      ),
    ],
  ),
);

上面代码中,首先设置了一个默认的文本样式,即字体为20像素(逻辑像素)、颜色为红色。然后通过 DefaultTextStyle 设置给了子树Column节点处,这样一来Column的所有子孙Text默认都会继承该样式,除非Text显示指定不继承样式,如代码中注释2


U_U

0

评论区