flutter Text 控件介绍

一、使用方法

1. 构造方法

• 设置普通的text Text("")

Text(this.data, {Key key,this.style,this.textAlign,this.textDirection,this.locale,this.softWrap,this.overflow,this.textScaleFactor,this.maxLines,this.semanticsLabel,}）Text('Hello, $_name! How are you?',textAlign: TextAlign.center,overflow: TextOverflow.ellipsis,style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),)复制代码

• 设置textSpan Text.rich()

Text.rich(this.textSpan, {Key key,this.style,this.textAlign,this.textDirection,this.locale,this.softWrap,this.overflow,this.textScaleFactor,this.maxLines,this.semanticsLabel,})Text.rich(TextSpan(text: 'Hello', // default text stylechildren: <TextSpan>[TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic,color: Colors.red,fontSize: 20)),TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20)),],))
复制代码

二、常用属性

1. 设置样式 通过TextStyle 设置文字的样式

TextStyle({this.inherit = true,//是否继承this.color,//字体颜色this.fontSize,//字体大小this.fontWeight,//字体厚度，也就是字体粗细this.fontStyle,//字体样式 normal或者italicthis.letterSpacing,//字母间隙(负值可以让字母更紧凑)this.wordSpacing,//单词间隙(负值可以让单词更紧凑)this.textBaseline,//文本绘制基线(alphabetic/ideographic)this.height,//高度this.locale,//区域设置this.foreground,//设置前景this.background,//设置背景颜色this.shadows,//设置阴影this.decoration,//设置文字装饰(none/underline/overline/lineThrough)this.decorationColor,//设置文字装饰颜色this.decorationStyle,//文字装饰的风格(solid/double/dotted/dashed/wavy)this.debugLabel,//？String fontFamily,//？String package,//?})
复制代码

2、设置字体对齐方式 TextAlign

• center 将文本对齐容器的中心
• end 对齐容器后缘上的文本。

 对于从左到右的文本（TextDirection.ltr），这是右边缘。对于从右到左的文本（TextDirection.rtl），这是左边缘。
复制代码

• justify 拉伸结束的文本行以填充容器的宽度,对齐边缘。

• left 对齐容器左边缘的文本。

• right 对齐容器右边缘的文本。

• start 对齐容器前缘上的文本。

对于从左到右的文本（TextDirection.ltr），这是左边缘。
对于从右到左的文本（TextDirection.rtl），这是正确的边缘。
复制代码

3、maxLines 文本要跨越的可选最大行数。如果文本超过给定的行数，则会根据溢出将其截断。

4、textDirection 用于设置文本的对齐方式

• 有些语言是从左到右书写的（例如，英语，泰米尔语或中文），而其他语言是从右到左书写的（例如阿拉姆语，希伯来语或乌尔都语）。有些也是混合写的，例如阿拉伯语大多是从右到左书写的，数字从左到右书写。textDirection 主要就是用于处理文字的对齐形式。
• TextDirection有两种枚举:

    TextDirection.trl 从左到右TextDirection.trl 从右到左
复制代码

5、overflow 当文字超出屏幕的时候，设置处理方式

    TextOverflow.clip(末位裁剪)TextOverflow.fade(末位渐隐)TextOverflow.ellipsis(末位省略号)
复制代码

6、设置字体显示倍率

    textScaleFactor: 2.0,//设置字体显示倍率为原来字体的两倍
复制代码

三、一个完整的例子

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Text Demo',theme: ThemeData(primarySwatch: Colors.green),home: TextPageDemo(title: 'Text Demo'),);}
}class TextPageDemo extends StatefulWidget {TextPageDemo({Key key, this.title}) : super(key: key);final String title;@override_TextPageDemoState createState() => _TextPageDemoState();
}class _TextPageDemoState extends State<TextPageDemo>{@overrideWidget build(BuildContext context) {var _name = "flutter ";return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,child: ListView(children: <Widget>[Text('1.Hello, $_name! How are you? \n',textAlign: TextAlign.center,style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),// 例子3 设置TextSpanText.rich(TextSpan(text: '2. Hello', // default text stylechildren: <TextSpan>[TextSpan(text: ' beautiful ',style: TextStyle(fontStyle: FontStyle.italic,color: Colors.red,fontSize: 20,debugLabel: "得到的",fontFamily: "aaaaaaa")),TextSpan(text: 'world \n',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20)),],)),Text(//例子3 设置当文字的对齐形式'3. Hello flutter! Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter! \n',
//             enum TextAlign {
//           /// Align the text on the left edge of the container.
//           left,
//           /// Align the text on the right edge of the container.
//           right,
//           /// Align the text in the center of the container.
//           center,
//           /// Stretch lines of text that end with a soft line break to fill the width of
//           /// the container.
//           /// Lines that end with hard line breaks are aligned towards the [start] edge.
//           justify,
//           /// Align the text on the leading edge of the container.
//           ///
//           /// For left-to-right text ([TextDirection.ltr]), this is the left edge.
//           ///
//           /// For right-to-left text ([TextDirection.rtl]), this is the right edge.
//           start,
//           /// Align the text on the trailing edge of the container.
//           ///
//           /// For left-to-right text ([TextDirection.ltr]), this is the right edge.
//           ///
//           /// For right-to-left text ([TextDirection.rtl]), this is the left edge.
//           end,
//           }textAlign: TextAlign.left,maxLines: 5,textDirection: TextDirection.ltr,),Text(// 例子4 设置当文字超出屏幕的时候，如何处理 ，及设置文本的书写方向'4. Hello flutter! Hellod flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!\n',textAlign: TextAlign.left,textDirection: TextDirection.ltr,style: TextStyle(fontSize: 20),overflow: TextOverflow.fade,),Text(//例子5 设置是否自动换行'5. Hello flutter! Hellod flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!\n',textAlign: TextAlign.left,softWrap: true,//设置是否自动换行textDirection: TextDirection.ltr,style: TextStyle(fontSize: 20),overflow: TextOverflow.fade,),Text(//例子6 设置字体显示倍率,可以通过设置字体显示倍率调整文字的大小'6.Hello flutter text \n',textAlign: TextAlign.left,softWrap: true,//设置是否自动换行textDirection: TextDirection.rtl,style: TextStyle(fontSize: 20),overflow: TextOverflow.fade,textScaleFactor: 2.0,//设置字体显示倍率为原来字体的两倍),],),),);}
}复制代码