写点什么

Flutter 学习笔记 (一) Text 组件

用户头像
U+2647
关注
发布于: 2021 年 04 月 16 日

1. Text 组件简介

Text 组件显示单个样式的文本字符串。字符串可能会跨越多行,也可能全部显示在同一行上,具体取决于布局约束。
复制代码

2. Text 属性

2.1 data 属性

该 Text 要显示的文本。值为一串字符串。
复制代码

2.2 textAlign 属性

文本的对齐方式。可选值有:
复制代码


  • TextAlign.start

  • TextAlign.end、

  • 这两个值与文本对齐的方向有关,如果方向是从左向右的,那么 start 就是左对齐,end 就是右对齐。反之亦然

  • TextAlign.left

  • TextAlign.right

  • 这两个值跟文本方向无关,left 是左对齐,right 是右对齐

  • TextAlign.center

  • 文本居中

  • TextAlign.justify

  • 文本两端对齐


PS: 对齐方式可以参考 word 里的对齐方式

2.3 textDirection

该文本的对齐方向。
复制代码


  • TextDirection.ltr

  • 如果 textAlign 的属性是 start 则左对齐,end 是右对齐

  • TextDirection.rtl

  • 如果 textAlign 的属性是 start 则右对齐,end 是左对齐

2.4 maxLines

最大行。最多显示的行数
复制代码

2.5 overflow

处理溢出的文本方式
复制代码


  • TextOverflow.ellipsis

  • 以 ... 显示。 例如: xxx...

  • TextOverflow.clip

  • 直接剪切溢出的文本

  • TextOverflow.fade

  • 将溢出的文本淡化为透明

2.6 textScaleFactor

每个逻辑像素的字体像素数
复制代码

3 Text Style

Text 组件的样式
复制代码

3.1 background

设置 Text 的背景。值是一个 Paint 对象。可以设置 Paint 对象的 color属性来设置 Text 的背景色
复制代码

3.2 color

设置字体颜色
复制代码

3.3 decoration

设置文本装饰,上划线、下划线、中划线等。
复制代码

3.4 decorationColor

上划线、下划线、中划线等线条的颜色
复制代码

3.5 decorationStyle

文本装饰的样式。虚线、短横线、波浪线等
复制代码


  • TextDecorationStyle.dashed

  • 画一条虚线。例如 --------------

  • TextDecorationStyle.dotted

  • 画一条带点的虚线 例如 ............

  • TextDecorationStyle.solid

  • 画一条实线。例如 _______________

  • TextDecorationStyle.double

  • 画两条实线。

  • TextDecorationStyle.wavy

  • 画两条波浪线

3.6 fontSize

字体大小
复制代码

3.7 fontStyle

字体样式。斜体和标准样式
复制代码


  • FontStyle.italic

  • 斜体

  • FontStyle.normal

  • 标准字体

3.8 fontWeight

字体粗细
复制代码


  • FontWeight.w100 - w900

  • FontWeight.w100 最细 FontWeight.w900 最粗

3.9 foreground

Text 前景色,即字体颜色。值为一个 Paint 对象,类似于 background 属性
复制代码


PS:这个属性与 color 冲突,二者不能共存,必须有一个值为 null。

3.10 height

类似于 word 里的行间距。这个值是 行高的倍数。如果 值是 1.5 则行间距是 1.5 倍的行高
复制代码

3.11 letterSpacing

字母与字母之间的间距。单位是逻辑像素。 例如 h  e   l   l   o
复制代码

3.12 wordSpacing

单词与单词之间的间距。单位是逻辑像素例如 hello      world
复制代码

4 shadows

文字阴影。PS:这个值的属性是 List<Shadow>。也就是说可以退添加多个阴影
复制代码

4.1 color

阴影颜色
复制代码

4.2 offset

阴影在 x轴和y轴的偏移量
复制代码

4.3 blurRadius

阴影模糊度
复制代码

5 TextDemo 源码

import 'package:flutter/material.dart';
void main() => runApp(TextDemo());class TextDemo extends StatelessWidget{ @override Widget build(BuildContext context) { var background = Paint(); background.color = Color.fromARGB(111, 255, 1, 1); var foreground = Paint(); foreground.color = Color.fromARGB(255, 1, 122, 11);
var shadowsList = List<Shadow>(); shadowsList.add(Shadow( color: Color.fromARGB(111, 255, 1, 1), offset: Offset(1, 20), blurRadius:1)); shadowsList.add(Shadow( color: Color.fromARGB(255, 1, 122, 11), offset: Offset(20, 1), blurRadius:10));
return MaterialApp( title: 'Text Demo', home: Scaffold( body: Center( child: Text( 'hello ,text,好好学习,天天向上!好好学习,天天向上!好好学习,天天向上!好好学习,天天向上!好好学习,天天向上', textAlign: TextAlign.start, textDirection: TextDirection.rtl, maxLines: 2, overflow: TextOverflow.fade , //textScaleFactor: 1, style: TextStyle( //background: background, //color: Color.fromARGB(255, 1, 122, 11), decoration: TextDecoration.underline, decorationColor: Color.fromRGBO(255, 1, 1, 11), decorationStyle: TextDecorationStyle.wavy , fontSize: 44, fontStyle: FontStyle.normal, fontWeight: FontWeight.w900, //与color 值冲突 foreground: foreground, height: 1.5, letterSpacing: 11, //shadows: shadowsList, wordSpacing: 122 ), ), ), ), ); }
}
复制代码


发布于: 2021 年 04 月 16 日阅读数: 8
用户头像

U+2647

关注

evolving code monkey 2018.11.05 加入

https://zdran.com/

评论

发布
暂无评论
Flutter 学习笔记(一) Text 组件