Flutter基础Widget之Text(文本控件)

Text 构造方法及属性

Text Widget用于显示简单样式文本,它包含一些控制文本显示样式的一些属性,类似于Android中的TextView

首先我们来看看Text控件的构造方法
在这里插入图片描述

可以看到,data是必填参数,其他的都是可选参数,下面我们来看看Text类中的常用属性

属性名作用值所属类型
dataText显示的文本,必填参数String
textAlign文本的对齐方式,可以选择左对齐、右对齐还是居中对齐TextAlign
maxLines文本显示的最大行数int
overflow文本显示的截断方式TextOverflow
textScaleFactor文本的缩放比例double
style用于指定文本显示的样式如颜色、字体、粗细、背景等TextStyle

可以看到Text控件还是很简单的,下面我们来简单的用一下看一下效果。
首先我们新建一个项目,由于Flutter代码是嵌套式的,如果都写在一起显得可读性非常差,这次我们把一些组件拆开来。读写起来也方便一些
首先我们先来看一下项目结构,这里我把body要显示的控件提出来了,返回的是text.dart中的MyText()
在这里插入图片描述

然后MyText返回的是NormalText控件,NormalText中我们创建了一个Text控件,默认的对齐方式是左对齐,这里我们设置了文本对齐方式为居中对齐

在这里插入图片描述

运行后就是这样
在这里插入图片描述

下面我们看一下各个属性的效果

style

style接收一个TextStyle类型的值
我们先来看一下TextStyle类中的属性

TextStyle copyWith({
    Color color,
    String fontFamily,
    double fontSize,
    FontWeight fontWeight,
    FontStyle fontStyle,
    double letterSpacing,
    double wordSpacing,
    TextBaseline textBaseline,
    double height,
    Locale locale,
    Paint foreground,
    Paint background,
    List<ui.Shadow> shadows,
    TextDecoration decoration,
    Color decorationColor,
    TextDecorationStyle decorationStyle,
    String debugLabel,
  })

名字跟css样式很像

常用属性

属性名作用值所属类型
color设置文本的颜色Color
fontSize设置字体大小double
fontWeight字体的加粗权重FontWeight
fontStyle文本显示样式FontStyle
letterSpacing单词之间的间距double
wordSpacing字母之间的间距double
height行高,需要注意的是这里的值是个比例值double

我们来用几个属性看看效果

Text(
      "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.",
      style: TextStyle(
        color: Colors.red,
        fontSize: 18,
        letterSpacing: 1,
        wordSpacing: 2,
        height: 1.2,
        fontWeight: FontWeight.w600
      ),
    );

效果如下
在这里插入图片描述

textAlign

textAlign的值的类型是TextAlign ,TextAlign是一个枚举,值如下,比较简单就不贴代码了

enum TextAlign {  left,  right, center, justify,start, end,}

left |start
left和start效果一致,左对齐
在这里插入图片描述

center
居中对齐
在这里插入图片描述

right | end
right和end都是右对齐
在这里插入图片描述

justify
类似一种填充满宽度的效果
在这里插入图片描述

maxLines

最大显示行数,很简单,没啥好说的

Text(
      "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.",
      style: TextStyle(
          color: Colors.red,
          fontSize: 18,
          letterSpacing: 1,
          wordSpacing: 2,
          height: 1.2,
          fontWeight: FontWeight.w600),
      textAlign: TextAlign.justify,
      maxLines: 3,
    );

可以看到,只显示了三行
在这里插入图片描述

overflow

文本的截断方式,接收一个TextOverflow 类型的值

enum TextOverflow {  clip,  fade,  ellipsis,}

clip
默认的截断方式,直接根据容器大小截断

fade
最下面的一行有一点渐隐的效果,这里为了看的清楚点字体放大了些
在这里插入图片描述
ellipsis
截断处为省略符的形式
在这里插入图片描述

还有一些其他的属性不太常用,这里就不介绍了,自己可以去试试看看是什么效果。


TextSpan

查看Text源码的时候发现还有另外一个构造方法如下,该方法是用TextSpan来创建一个Text widget。
可以看到rich方法必须要传一个TextSpan
在这里插入图片描述

TextSpan跟Text的区别就在于TextSpan是分片,我们可以把一串字符串分为几个片段来管理,每个片段可以单独设置样式。
我们再来看看TextSpan的构造方法

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

  final TextStyle style;
  final String text;
  final List<TextSpan> children;
  final GestureRecognizer recognizer;

其中style 跟上面的Text的style一致,用来设置样式,text就是要显示的文本内容。 children是一个TextSpan的数组,不能为空,recognizer是用来处理手势的

下面我们来用一用,下面的代码如果你觉得嵌套的层次多,可以把TextSpan再封一下,这里我就直接这么写了。

/*TextSpan
* 文本片段,可以对文本片段单独设置样式
* */
class MyTextSpan extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(
              text: "网址:",
              style: TextStyle(
                color: Colors.black,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              )),
          TextSpan(
            text: "http//:baidu.com/",
            style: TextStyle(
              color: Colors.blue,
              fontSize: 24,
              fontStyle: FontStyle.italic,
            ),
          ),
        ],
      ),
    );
  }
}

来看一看效果

在这里插入图片描述


DefaultTextStyle

在Flutter的widget树中,文本的样式默认是可以被继承的,这点跟css很像,父节点的文本样式子节点默认会继承,如果子节点中重新设置了默认样式的某些属性,那么则以子节点设置的为准。我们也可以通过设置inherit: false 不继承父节点的默认样式。

/*带有默认样式的Text*/
class MyDefaultStyleText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
        /*这里我们设置了一些默认的样式*/
        textAlign: TextAlign.left,
        style: TextStyle(
          fontSize: 30,
          color: Colors.grey,
          letterSpacing: 1,
          wordSpacing: 3,
          fontWeight: FontWeight.bold,
        ),
        /*子节点就会默认继承父节点的样式,如果子节点重新设置了父节点中已设置的样式,那么以子节点设置的样式为准*/
        child: Column(
          children: <Widget>[
            Text(
              "text 1",
              style: TextStyle(
                /*这里我们重新指定一下颜色,那么最终的颜色就以子节点的设置为准*/
                color: Colors.deepOrange,
              ),
            ),
            Text(
              "text 2",
              style: TextStyle(
                inherit: false,//inherit设为false表示不继承父节点默认样式,默认值为true
                color: Colors.blue,
              ),
            ),
          ],
        ));
    ;
  }
}

运行效果图如下

在这里插入图片描述

好了,Text Widget相关的内容大概就这么多。更详细的请看官方文档

如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我的 Flutter 博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,谢谢!

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页