Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text
显示“ 文本”单个样式的文本字符串小组件。
创建有三种,效果如下:
new Text() |
构造方法创建,只能生成一种style |
Text.rich() |
静态方法创建,能够生成多种style |
new RichText() |
与Text.rich()一样 |
构造方法源码:
/// Creates a text widget.
/// If the [style] argument is null, the text will use the style from the closest enclosing [DefaultTextStyle].
const Text(this.data, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
}) : assert(data != null), textSpan = null, super(key: key);
/// Creates a text widget with a [TextSpan].
const Text.rich(this.textSpan, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
}): assert(textSpan != null), data = null, super(key: key);
/// Creates a paragraph of rich text.
const RichText({
Key key,
@required this.text,
this.textAlign = TextAlign.start,
this.textDirection,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.textScaleFactor = 1.0,
this.maxLines,
this.locale,
}) : assert(text != null) ,assert(textAlign != null), assert(softWrap != null), assert(overflow != null),
assert(textScaleFactor != null), assert(maxLines == null || maxLines > 0), super(key: key);
参数Key key:官方解释:https://flutterchina.club/widgets-intro/#key
要显示的字符串
文本样式,样式属性如表:
属性 |
说明 |
Color color |
文本颜色。 如果指定了foreground,则此值必须为null。 |
TextDecoration decoration |
绘制文本装饰: 下划线(TextDecoration.underline) 上划线(TextDecoration.overline) 删除线(TextDecoration.lineThrough) 无(TextDecoration.none) |
Color decorationColor |
绘制文本装饰的颜色。 |
TextDecorationStyle decorationStyle |
绘制文本装饰的样式: 画一条虚线 TextDecorationStyle.dashed 画一条虚线 TextDecorationStyle.dotted 画两条线 TextDecorationStyle.double 画一条实线 TextDecorationStyle.solid 画一条正弦线(波浪线) TextDecorationStyle.wavy |
FontWeight fontWeight |
绘制文本时使用的字体粗细: FontWeight.bold 常用的字体重量比正常重。即w700 FontWeight.normal 默认字体粗细。即w400 FontWeight.w100 薄,最薄 FontWeight.w200 特轻 FontWeight.w300 轻 FontWeight.w400 正常/普通/平原 FontWeight.w500 较粗 FontWeight.w600 半粗体 FontWeight.w700 加粗 FontWeight.w800 特粗 FontWeight.w900 最粗 |
FontStyle fontStyle |
字体变体: FontStyle.italic 使用斜体 FontStyle.normal 使用直立 |
TextBaseline textBaseline |
对齐文本的水平线: TextBaseline.alphabetic:文本基线是标准的字母基线 TextBaseline.ideographic:文字基线是表意字基线;如果字符本身超出了alphabetic 基线,那么ideograhpic基线位置在字符本身的底部。 |
String fontFamily |
使用的字体名称(例如,Roboto)。如果字体是在包中定义的,那么它将以'packages / package_name /'为前缀(例如'packages / cool_fonts / Roboto') |
double fontSize |
字体大小(pt、sp),默认为14个逻辑像素(14pt、14sp) |
double letterSpacing |
水平字母之间的空间间隔(逻辑像素为单位)。可以使用负值来让字母更接近。 |
double wordSpacing |
单词之间添加的空间间隔(逻辑像素为单位)。可以使用负值来使单词更接近。 |
double height |
文本行与行的高度,作为字体大小的倍数(取值1~2,如1.2) |
Locale locale |
此属性很少设置,用于选择区域特定字形的语言环境 |
Paint background |
文本背景色 |
Paint foreground |
文本的前景色,不能与color共同设置(比文本颜色color区别在Paint功能多,后续会讲解) |
List |
详解:Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等) |
该 style 参数可选。省略时,文本将使用最接近的DefaultTextStyle的样式。如果给定样式的TextStyle.inherit属性为true(默认值),则给定样式将与最接近的DefaultTextStyle合并。例如,这种合并行为很有用,可以在使用默认字体系列和大小时使文本变为粗体。
文本应如何水平对齐enum:
值 | 说明 |
TextAlign.center |
将文本对齐容器的中心。 |
TextAlign.end |
对齐容器后缘上的文本。 |
TextAlign.justify |
拉伸以结束的文本行以填充容器的宽度。即使用了decorationStyle才起效 |
TextAlign.left |
对齐容器左边缘的文本。 |
TextAlign.right |
对齐容器右边缘的文本。 |
TextAlign.start |
对齐容器前缘上的文本。 |
这个属性估计是给外国人习惯使用,
相对TextAlign中的start、end而言有用(当start使用了ltr相当于end使用了rtl,也相当于TextAlign使用了left)
对于从左到右的文本(TextDirection.ltr),文本从左向右流动;
对于从右到左的文本(TextDirection.rtl),文本从右向左流动。
此属性很少设置,用于选择区域特定字形的语言环境
某一行中文本过长,是否需要换行。默认为true,如果为false,则文本中的字形将被定位为好像存在无限的水平空间。
如何处理视觉溢出:
TextOverflow.clip |
剪切溢出的文本以修复其容器。 |
TextOverflow.ellipsis |
使用省略号表示文本已溢出。 |
TextOverflow.fade |
将溢出的文本淡化为透明。 |
每个逻辑像素的字体像素数
例如,如果文本比例因子为1.5,则文本将比指定的字体大小大50%。
作为textScaleFactor赋予构造函数的值。如果为null,将使用从环境MediaQuery获取的MediaQueryData.textScaleFactor 即手机的像素密度(1.0、1.5、2.0、3.0)
文本要跨越的可选最大行数,
为1,则文本不会换行。否则,文本将被包裹在框的边缘。
图像的语义描述,用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
talkback是一款由谷歌官方开发的系统软件,它的定位是帮助盲人或者视力有障碍的用户提供语言辅助
Voiceover功能是APPLE公司在2009年4月新推出的一种语音辅助程序
https://docs.flutter.io/flutter/widgets/Text-class.html
https://docs.flutter.io/flutter/painting/TextStyle-class.html
sdk源码
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new MyStartUI(),
));
}
// Image
class MyStartUI extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
onPressed: null,
),
),
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Expanded(flex: 1, child: getTextRich()),
new Expanded(flex: 1, child: getText()),
// new Expanded(flex: 1, child: getImage()),
// new Expanded(flex: 1, child: getRow()),
],
));
}
Widget getText() {
Paint pg = Paint();
pg.color = Color(0xFF3344FF);
Paint pf = Paint();
pf.color = Color(0xFF7243FF);
return Text(
'Text\nTe\nxt ---- Style -------------',
style: TextStyle(
color: Color(0xFFFF00FF),
decoration: TextDecoration.underline,
decorationColor: Color(0xFF334433),
decorationStyle: TextDecorationStyle.double,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
textBaseline: TextBaseline.alphabetic,
fontSize: 50,
letterSpacing: 2,
wordSpacing: 10,
height: 1.2,
background: pg,
// foreground: pf,
),
textAlign: TextAlign.start,
textDirection: TextDirection.ltr,
softWrap: false,
semanticsLabel: "Text semanticsLabel",
// overflow: TextOverflow.ellipsis,
);
}
Widget getTextRich() {
List children = new List();
children.add(TextSpan(text: "Chen", style: TextStyle(color: Colors.black)));
children.add(TextSpan(text: "Ying", style: TextStyle(color: Colors.red)));
children.add(TextSpan(text: "you", style: TextStyle(color: Colors.blue)));
List children1 = new List();
children1.add(
TextSpan(text: " Is ", style: TextStyle(color: Colors.blueAccent)));
children1.add(
TextSpan(text: "Androider", style: TextStyle(color: Colors.amber)));
children.add(
TextSpan(children: children1, style: TextStyle(color: Colors.blue)));
TextSpan textSpan = new TextSpan(children: children);
return Text.rich(
textSpan,
);
}