Flutter - 常用基础组件(Wdiget)-Text

1. Text - 文本框

Text类似于安卓的TextView和iOS的Label;

常用的属性介绍

属性or参数	类型 / 是否可选	作用
data	String / 必须	Text需要显示的文本内容
style	TextStyle / 命名可选	修改Text显示样式,这个最常用的属性,需要到其内部研究此属性能够修改哪些内容
textAlign	TextAlign / 命名可选	文本的对齐方式,在横向占满屏幕时起作用

TextStyle属性介绍

属性	说明
inherit	是否将null值替换为祖先文本样式中的值（例如，在TextSpan树中）。如果为false，则没有显式值的属性将恢复为默认值：白色，字体大小为10像素，采用无衬线字体。
color	字体颜色 如自定义颜色：Color.fromRGBO(155, 155, 155, 1) 也可以使用Colors类里面自带的属性
backgroundColor	文本的背景颜色
fontSize	字体大小，默认14像素
fontWeight	字体厚度
fontStyle	字体变体：
FontStyle.italic	使用斜体
FontStyle.normal	使用直立
letterSpacing	水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近。
wordSpacing	单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。
textBaseline	对齐文本的水平线:
TextBaseline.alphabetic：	文本基线是标准的字母基线
TextBaseline.ideographic：	文字基线是表意字基线； 如果字符本身超出了
alphabetic	基线，那么ideograhpic基线位置在字符本身的底部。
height	文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）
locale	文本的前景色，不能与color共同设置（比文本颜色color区别在Paint功能多，后续会讲解）
background	文本背景色Paint()…color = backgroundColor
foreground	文本的前景色，不能与color共同设置
shadows	文本的阴影可以利用列表叠加处理，例如shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)], color即阴影的颜色， offset即阴影相对文本的偏移坐标，blurRadius即阴影的模糊程度，越小越清晰
decoration	文字的线性装饰，比如 TextDecoration.underline 下划线， TextDecoration.lineThrough删除线
decorationColor	文本装饰线的颜色
decorationStyle	文本装饰线的样式，比如 TextDecorationStyle.dashed 虚线

Center(
            child: Text(
              'hello flutter', // data属性
              style: TextStyle(
                  // backgroundColor: Colors.orange,
                  color: Colors.red,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  shadows: [
                    Shadow(
                        color: Colors.black,
                        offset: Offset(6, 3),
                        blurRadius: 10)
                  ],
                  letterSpacing: 5,
              ),
              // textAlign: TextAlign.left,
            ),
          )
)

image.png

2.最终渲染的RichText

Text并不是最终被Flutter渲染的Widget,当我们点进去,看到Text是有一个build方法,最终返回的是: RichText,
RichText是继承于 : MultiChildRenderObjectWidget.
在Flutter里面,继承于MultiChildRenderObjectWidget的Widget才是最后被渲染的Widget

感受一下富文本的显示效果

class TextDemo extends StatelessWidget {
  const TextDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text.rich(TextSpan(
        text: 'hello flutter',
        style: TextStyle(color: Colors.red, fontSize: 20),
        children: [
          WidgetSpan(
            child: Icon(
              Icons.favorite,
              color: Colors.orange,
            ),
          ),
          TextSpan(
              text: 'hello flutter',
              style: TextStyle(color: Colors.blue, fontSize: 20)
          ),
          WidgetSpan(
            child: Icon(
              Icons.favorite,
              color: Colors.red,
            ),
          ),
          TextSpan(
              text: 'hello flutter',
              style: TextStyle(color: Colors.purple, fontSize: 20))
        ]));
  }
}

image.png