Plain's Blog

休想打败我的生活🔥

  1. 1. 文本组件 Text
    1. 1.1. 认识
    2. 1.2. 使用
    3. 1.3. 一些属性

文本组件 Text

认识

Text是Flutter中的基础组件,如同它的名称一样,它的作用是用来显示文本的,这和Android原生中的TextView是一样的作用

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body: Center(
child: Text(
"我在学习Flutter文本组件Text的使用",
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: 16,//单位:px
color: Color.fromARGB(255, 255, 255, 255),//设置颜色方法一
backgroundColor: Colors.grey,//设置颜色方法二
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.solid
),
),

一些属性

  • 指定文字:双引号“”扩起来内部写文字即可

  • textAligin:文本的对齐方式,有以下几种

    TextAlgin.start头部对齐,与之对应的还有TextAlgin.left

    TextAlgin.end尾部对齐,与之对应的还有TextAlgin.right

    TextAlgin.center居中对齐

    TextAlgin.justify拉伸到尾部换行并与头部对齐(通俗来讲就是换行时会硬拉伸到尾部在换行)特殊情况下使用

  • maxLines:文本的最大行数

  • overflow:文本超过最大行数时所展示的样式,有以下几种属性

    TextOverflow.ellipsis文本末尾显示三个点…,(与Android中TextView的ellipsize属性类似)

    TextOverflow.clip剪切超出的文本

    TextOverflow.fade剪切超出的文本,并且有淡入透明的效果(方向:从上往下)

    TextOverflow.visible使超出的文本在容器外显示

除了上述的属性外,还有一些属性可以通过style来设置,比如以下几种

  • fontSize:文字的大小,单位是px,数值无需加单位,推荐使用浮点数float

  • color:文字的颜色,有以下几种方法指定颜色

    1
    2
    3
    4
    5
    6
    //方法一:Flutter预设了多种颜色方案
    Colors.red
    //方法二:指定带透明度的颜色
    Color.fromARGB(a,r,g,b)
    //方法三:和上面类似,也是指定带透明度的颜色
    Color.fromRGBO(r,g,b,opacity)
  • decoration:文本装饰,比如下划线、删除线等

    TextDecoration.none

    TextDecoration.lineThrough删除线样式

    TextDecoration.overline在每个文字的上方画线(可以叫它上划线😂)

    TextDecoration.underline下划线

  • decorationStyle:装饰线的样式

    TextDecorationSryle.solid默认样式:直线

    TextDecorationStyle.dotted虚线(点状. . . . . .)

    TextDecorationStyle.dashed虚线(线状_ _ _ _)

    TextDecorationStyle.double双线(====)

    TextDecorationStyle.wavy波浪线

以上只是一些常用的属性,具体的属性见API文档

https://api.flutter.dev/flutter/widgets/Text-class.html

本文作者 : Plain
This blog is under a CC BY-NC-SA 3.0 Unported License
本文链接 : https://plain-dev.com/flutter-widget-text/

本文最后更新于 天前,文中所描述的信息可能已发生改变