Flutter实战】文本组件及五大案例

概述老孟导读：大家好，这是【Flutter实战】系列文章的第二篇，这一篇讲解文本组件，文本组件包括文本展示组件（Text和RichText）和文本输入组件（TextField），基础用法和五个案例助你快速

老孟导读：大家好，这是【Flutter实战】系列文章的第二篇，这一篇讲解文本组件，文本组件包括文本展示组件（Text和RichText）和文本输入组件（TextFIEld），基础用法和五个案例助你快速掌握。
第一篇链接：【Flutter实战】移动技术发展史

Text

Text是显示文本的组件，最常用的组件，没有之一。基本用法如下：

Text('老孟')

注意：Text组件一定要包裹在Scaffold组件下，否则效果如下：

文本的样式在style中设置，类型为TextStyle，TextStyle中包含很多文本样式属性，下面介绍一些常用的。

设置文本大小和颜色：

Text('老孟',style: TextStyle(color: colors.red,FontSize: 20),),

上面黑色的字体为没有设置的效果，作为对比。

设置字体粗细：

Text('老孟',style: TextStyle(FontWeight: FontWeight.bold))

字体粗细共有9个级别，为w100至w900，FontWeight.bold是w700。

设置斜体：

Text('老孟',style: TextStyle(FontStyle: FontStyle.italic,))

设置自定义的字体：

首先下载字体库（比如中华字体库）将字体文件拷贝的项目中，一般目录是：assets/Fonts/，assets和Fonts都需要手动创建，此目录不是必须的，而是约定俗成，资源一般都放在assets目录下。配置pubspec.yaml：

Fonts:  - family: maobi     Fonts:      - asset: assets/Fonts/maobi.ttf

maobi：是自己对当前字体的命名，有意义即可。

asset：字体文件的目录。

使用：

Text('老孟',style: TextStyle(FontFamily: 'maobi',)),

设置对齐方式：

Container(  height: 100,wIDth: 200,color: colors.blue.withOpacity(.4),child: Text('老孟',textAlign: TextAlign.center),

textAlign只是控制水平方向的对齐方式，值说明如下：

left：左对齐right：右对齐center：居中justify：两端对齐，此属性中文存在BUG（Flutter版本：1.17.3）也可以在官方issue中关注此问题start：前端对齐，和TextDirection属性有关，如果设置TextDirection.ltr，则左对齐，设置TextDirection.rtl则右对齐。end：末端对齐，和TextDirection属性有关，如果设置TextDirection.ltr，则右对齐，设置TextDirection.rtl则左对齐。

设置文本自动换行：

Container(  height: 100,child: Text('老孟，专注分享Flutter技术和应用实战',softWrap: true,)

文本超出范围时的处理：

Container(  height: 100,overflow: TextOverflow.ellipsis,)

溢出的处理方式：

clip：直接裁剪。fade：越来越透明。ellipsis：省略号结尾。visible：依然显示，此时将会溢出父组件。

设置全局字体样式：

在MaterialApp的theme中设置如下

MaterialApp(  Title: 'Flutter Demo',theme: themeData(   ...    texttheme: Texttheme(        bodyText2: TextStyle(color: colors.red,FontSize: 24),)  ),home: Scaffold(    body: TextDemo(),)

Text组件默认为红色，

Text('老孟'),Text('老孟',style: TextStyle(color: colors.blue,

RichText

RichText的属性和Text基本一样，使用如下：

RichText(  text: TextSpan(      style: DefaultTextStyle.of(context).style,children: <Inlinespan>[        TextSpan(text: '老孟',style: TextStyle(color: colors.red)),TextSpan(text: '，'),TextSpan(text: '专注分享Flutter技术和应用实战'),]),)

TextFIEld

TextFIEld是文本输入组件，即输入框，常用组件之一。基本用法：

TextFIEld()

不需要任何参数，一个最简单的文本输入组件就出来了，效果如下：

decoration是TextFIEld组件的装饰（外观）参数，类型是inputdecoration。

icon显示在输入框的前面，用法如下：

TextFIEld(  decoration: inputdecoration(    icon: Icon(Icons.person),)

当输入框是空而且没有焦点时，labelText显示在输入框上边，当获取焦点或者不为空时labelText往上移动一点，labelStyle参数表示文本样式，具体参考TextStyle， 用法如下：

TextFIEld(  decoration: inputdecoration(    labelText: '姓名：',labelStyle: TextStyle(color:colors.red)  ),)

hasfloatingPlaceholder参数控制当输入框获取焦点或者不为空时是否还显示labelText，默认为true，显示。

helperText显示在输入框的左下部，用于提示用户，helperStyle参数表示文本样式，具体参考TextStyle用法如下：

TextFIEld(  decoration: inputdecoration(    helperText: '用户名长度为6-10个字母',helperStyle: TextStyle(color: colors.blue),helperMaxlines: 1  ),)

hintText是当输入框为空时的提示，不为空时不在显示，用法如下：

TextFIEld(  decoration: inputdecoration(    hintText: '请输入用户名',hintStyle: TextStyle(color: colors.grey),hintMaxlines: 1  ),)

errorText显示在输入框的左下部，默认字体为红色，用法如下：

TextFIEld(  decoration: inputdecoration(    errorText: '用户名输入错误',errorStyle: TextStyle(FontSize: 12),errorMaxlines: 1,errorborder: Outlineinputborder(borderSIDe: borderSIDe(color: colors.red)),)

prefix系列的组件是输入框前面的部分，用法如下：

TextFIEld(  decoration: inputdecoration(    prefixIcon: Icon(Icons.person)  ),)

注意prefix和icon的区别，icon是在输入框边框的外部，而prefix在里面。

suffix和prefix相反，suffix在输入框的尾部，用法如下：

TextFIEld(  decoration: inputdecoration(      suffixIcon: Icon(Icons.person)  ),)

counter组件统计输入框文字的个数，counter仅仅是展示效果，不具备自动统计字数的功能， 自动统计字数代码如下：

var _textFIEldValue = '';TextFIEld(  onChanged: (value){    setState(() {      _textFIEldValue = value;    });  },decoration: inputdecoration(    counterText: '${_textFIEldValue.length}/32'  ),)

filled为true时，输入框将会被fillcolor填充，仿QQ登录输入框代码如下：

Container(  height: 60,wIDth: 250,child: TextFIEld(    decoration: inputdecoration(      fillcolor: color(0x30cccccc),filled: true,enabledborder: Outlineinputborder(          borderSIDe: borderSIDe(color: color(0x00FF0000)),borderRadius: borderRadius.all(Radius.circular(100))),hintText: 'QQ号/手机号/邮箱',focusedborder: Outlineinputborder(          borderSIDe: borderSIDe(color: color(0x00000000)),)

controller是输入框文本编辑的控制器，可以获取TextFIEld的内容、设置TextFIEld的内容，下面将输入的英文变为大写：

TextEditingController _controller;@overrIDevoID initState() {  super.initState();  _controller = TextEditingController()    ..addListener(() {      //获取输入框的内容，变为大写      _controller.text = _controller.text.toupperCase();    });}@overrIDeWidget build(BuildContext context) {  return TextFIEld(    controller: _controller,);}@overrIDedispose() {  super.dispose();  _controller.dispose();}

有时输入框后面带有“清除”功能，需要controller来实现。如果需要2个TextFIEld的内容进行同步，只需要给2个TextFIEld设置同一个controller即可实现。

keyboardType参数控制软键盘的类型，说明如下：

text：通用键盘。multiline：当TextFIEld为多行时（maxlines设置大于1），右下角的为“换行” 按键。number：数字键盘。phone：手机键盘，比数字键盘多"*"和 "#"。datetime：在ios上和text一样，在androID上出现数字键盘、":"和 "-"。emailAddress：邮箱键盘，有"@" 和 "."按键。url：url键盘，有"/" 和 "."按键。visiblePassword：既有字幕又有数字的键盘。

textinputAction参数控制软键盘右下角的按键，说明如下：

none：androID上显示返回键，ios不支持。unspecifIEd：让 *** 作系统自己决定哪个合适，一般情况下，androID显示“完成”或者“返回”。done：androID显示代表“完成”的按钮，ios显示“Done”（中文：完成）。go：androID显示表达用户去向目的地的图标，比如向右的箭头，ios显示“Go”（中文：前往）。search：androID显示表达搜索的按钮，ios显示"Search"（中文：搜索）。send：androID显示表达发送意思的按钮，比如“纸飞机”按钮，ios显示"Send"（中文：发送）。next：androID显示表达“前进”的按钮，比如“向右的箭头”,ios显示"Next"（中文：下一项）。prevIoUs：androID显示表达“后退”的按钮，比如“向左的箭头”,ios不支持。continueAction：androID 不支持，ios仅在ios9.0+显示"Continue"（中文：继续）。join：AndroID和ios显示"Join"（中文：加入）。route：androID 不支持，ios显示"Route"（中文：路线）。emergencyCall：androID 不支持，ios显示"Emergency Call"（中文：紧急电话）。newline：androID显示表达“换行”的按钮，ios显示”换行“。

大家可能发现了，AndroID上显示的按钮大部分是不确定的，比如next有的显示向右的箭头，有的显示前进，这是因为各大厂商对AndroID ROM定制引发的。

textCAPItalization参数是配置键盘是大写还是小写，仅支持键盘模式为text，其他模式下忽略此配置，说明如下：

words：每一个单词的首字母大写。sentences：每一句话的首字母大写。characters：每个字母都大写none：都小写

这里仅仅是控制软键盘是大写模式还是小写模式，你也可以切换大小写，系统并不会改变输入框内的内容。

textAlignVertical表示垂直方向的对齐方式，textDirection表示文本方向，用法如下：

TextFIEld(  textAlignVertical: TextAlignVertical.center,textDirection: TextDirection.rtl,)

toolbarOptions表示长按时d出的菜单，有copy、cut、paste、selectAll，用法如下：

TextFIEld(  toolbarOptions: ToolbarOptions(    copy: true,cut: true,paste: true,selectAll: true  ),)

cursor表示光标，用法如下：

TextFIEld(  showCursor: true,cursorWIDth: 3,cursorRadius: Radius.circular(10),cursorcolor: colors.red,)

效果如下：

将输入框设置为密码框，只需obscureText属性设置true即可，用法如下：

TextFIEld(  obscureText: true,)

通过inputFormatters可以限制用户输入的内容，比如只想让用户输入字符，设置如下：

TextFIEld(  inputFormatters: [    WhiteListingTextinputFormatter(RegExp("[a-zA-Z]")),],)

这时用户是无法输入数字的。

onChanged是当内容发生变化时回调，onsubmitted是点击回车或者点击软键盘上的完成回调，onTap点击输入框时回调，用法如下：

TextFIEld(  onChanged: (value){    print('onChanged:$value');  },onEditingComplete: (){    print('onEditingComplete');  },onTap: (){    print('onTap');  },)

输入框右下角经常需要字数统计，除了使用上面介绍的方法外，还可以使用buildCounter，建议使用此方法，用法如下：

TextFIEld(  maxLength: 100,buildCounter: (    BuildContext context,{    int currentLength,int maxLength,bool isFocused,}) {    return Text(      '$currentLength/$maxLength',);  },)

动态获取焦点

FocusScope.of(context).requestFocus(_focusNode);

_focusNode为TextFIEld的focusNode：

_focusNode = FocusNode();TextFIEld(	focusNode: _focusNode,...)

动态失去焦点

_focusNode.unfocus();

过渡颜色的文字

Builder(  builder: (BuildContext context) {    RenderBox Box = context.findRenderObject();    final Shader linearGradIEnt = linearGradIEnt(      colors: <color>[colors.purple,colors.blue],).createShader(        Rect.fromLTWH(0.0,0.0,Box?.size?.wIDth,Box?.size?.height));    return Text(      '老孟，专注分享Flutter技术和应用实战',style: new TextStyle(          FontSize: 18.0,FontWeight: FontWeight.bold,foreground: Paint()..shader = linearGradIEnt),)

Builder组件是为了计算当前Text组件大小，生成linearGradIEnt。

带前后置标签的文本

RichText(  text: TextSpan(      style: DefaultTextStyle.of(context).style,children: <Inlinespan>[        WidgetSpan(            child: Container(              margin: EdgeInsets.only(right: 10),padding: EdgeInsets.symmetric(horizontal: 10),decoration: Boxdecoration(                  shape: BoxShape.rectangle,borderRadius: borderRadius.all(Radius.circular(20)),color: colors.blue),child: Text(                '判断题',style: TextStyle(color: colors.white),TextSpan(text: '泡沫灭火器可用于带电灭火'),)

“服务协议”

通常在登录页面的底部会出现登录即代表同意并阅读 《服务协议》，其中《服务协议》为蓝色且可点击：

Text.rich(  TextSpan(      text: '登录即代表同意并阅读',style: TextStyle(FontSize: 11,color: color(0xFF999999)),children: [        TextSpan(          text: '《服务协议》',FontWeight: FontWeight.bold),recognizer: TapGestureRecognizer()            ..onTap = () {              print('onTap');            },)

登录密码输入框

TextFIEld(  decoration: inputdecoration(    fillcolor: color(0x30cccccc),enabledborder: Outlineinputborder(        borderSIDe: borderSIDe(color: color(0x00FF0000)),hintText: '输入密码',focusedborder: Outlineinputborder(        borderSIDe: borderSIDe(color: color(0x00000000)),textAlign: TextAlign.center,obscureText: true,onChanged: (value) {  },)

评论回复

Text.rich(  TextSpan(      text: '回复',children: [        TextSpan(          text: '@老孟：',TextSpan(          text: '你好，想知道Flutter发展前景如何？',)

交流

老孟Flutter博客地址（330个控件用法）：http://laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

总结

以上是内存溢出为你收集整理的Flutter实战】文本组件及五大案例全部内容，希望文章能够帮你解决Flutter实战】文本组件及五大案例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。