Flutter 学习笔记(一) Text 组件
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 o3.12 wordSpacing
单词与单词之间的间距。单位是逻辑像素
例如 hello world4 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
),
),
),
),
);
}
} 转载请注明出处
本文链接：zdran.com/20190214.ht…
