老孟導(dǎo)讀：大家好，這是【Flutter實(shí)戰(zhàn)】系列文章的第二篇，這一篇講解文本組件，文本組件包括文本展示組件（Text和RichText）和文本輸入組件（TextField），基礎(chǔ)用法和五個(gè)案例助你快速掌握。 第一篇鏈接：【Flutter實(shí)戰(zhàn)】移動(dòng)技術(shù)發(fā)展史

Text

Text是顯示文本的組件，最常用的組件，沒(méi)有之一。基本用法如下：

Text('老孟')

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

文本的樣式在style中設(shè)置，類型為T(mén)extStyle，TextStyle中包含很多文本樣式屬性，下面介紹一些常用的。

設(shè)置文本大小和顏色：

Text('老孟',style: TextStyle(color: Colors.red,fontSize: 20),),

上面黑色的字體為沒(méi)有設(shè)置的效果，作為對(duì)比。

設(shè)置字體粗細(xì)：

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

字體粗細(xì)共有9個(gè)級(jí)別，為w100至w900，FontWeight.bold是w700。

設(shè)置斜體：

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

設(shè)置自定義的字體：

首先下載字體庫(kù)（比如中華字體庫(kù)）

將字體文件拷貝的項(xiàng)目中，一般目錄是：assets/fonts/，assets和fonts都需要手動(dòng)創(chuàng)建，此目錄不是必須的，而是約定俗成，資源一般都放在assets目錄下。

配置pubspec.yaml：

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

maobi：是自己對(duì)當(dāng)前字體的命名，有意義即可。

asset：字體文件的目錄。

使用：

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

設(shè)置對(duì)齊方式：

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

textAlign只是控制水平方向的對(duì)齊方式，值說(shuō)明如下：

• left：左對(duì)齊
• right：右對(duì)齊
• center：居中
• justify：兩端對(duì)齊，此屬性中文存在bug（Flutter版本：1.17.3）也可以在官方issue中關(guān)注此問(wèn)題
• start：前端對(duì)齊，和TextDirection屬性有關(guān)，如果設(shè)置TextDirection.ltr，則左對(duì)齊，設(shè)置TextDirection.rtl則右對(duì)齊。
• end：末端對(duì)齊，和TextDirection屬性有關(guān)，如果設(shè)置TextDirection.ltr，則右對(duì)齊，設(shè)置TextDirection.rtl則左對(duì)齊。

設(shè)置文本自動(dòng)換行：

Container(height: 100,width: 200,color: Colors.blue.withOpacity(.4),child: Text('老孟，專注分享Flutter技術(shù)和應(yīng)用實(shí)戰(zhàn)',softWrap: true,), )

文本超出范圍時(shí)的處理：

Container(height: 100,width: 200,color: Colors.blue.withOpacity(.4),child: Text('老孟，專注分享Flutter技術(shù)和應(yīng)用實(shí)戰(zhàn)',overflow: TextOverflow.ellipsis,), )

溢出的處理方式：

• clip：直接裁剪。
• fade：越來(lái)越透明。
• ellipsis：省略號(hào)結(jié)尾。
• visible：依然顯示，此時(shí)將會(huì)溢出父組件。

設(shè)置全局字體樣式：

在MaterialApp的theme中設(shè)置如下

MaterialApp(title: 'Flutter Demo',theme: ThemeData(...textTheme: TextTheme(bodyText2: TextStyle(color: Colors.red,fontSize: 24),)),home: Scaffold(body: TextDemo(),), )

Text組件默認(rèn)為紅色，

Text('老孟'),Text('老孟',style: TextStyle(color: Colors.blue,fontSize: 20),),

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技術(shù)和應(yīng)用實(shí)戰(zhàn)'),]), )

TextField

TextField是文本輸入組件，即輸入框，常用組件之一。基本用法：

TextField()

不需要任何參數(shù)，一個(gè)最簡(jiǎn)單的文本輸入組件就出來(lái)了，效果如下：

decoration是TextField組件的裝飾（外觀）參數(shù)，類型是InputDecoration。

icon顯示在輸入框的前面，用法如下：

TextField(decoration: InputDecoration(icon: Icon(Icons.person),), )

當(dāng)輸入框是空而且沒(méi)有焦點(diǎn)時(shí)，labelText顯示在輸入框上邊，當(dāng)獲取焦點(diǎn)或者不為空時(shí)labelText往上移動(dòng)一點(diǎn)，labelStyle參數(shù)表示文本樣式，具體參考TextStyle， 用法如下：

TextField(decoration: InputDecoration(labelText: '姓名：',labelStyle: TextStyle(color:Colors.red)), )

hasFloatingPlaceholder參數(shù)控制當(dāng)輸入框獲取焦點(diǎn)或者不為空時(shí)是否還顯示labelText，默認(rèn)為true，顯示。

helperText顯示在輸入框的左下部，用于提示用戶，helperStyle參數(shù)表示文本樣式，具體參考TextStyle用法如下：

TextField(decoration: InputDecoration(helperText: '用戶名長(zhǎng)度為6-10個(gè)字母',helperStyle: TextStyle(color: Colors.blue),helperMaxLines: 1), )

hintText是當(dāng)輸入框?yàn)榭諘r(shí)的提示，不為空時(shí)不在顯示，用法如下：

TextField(decoration: InputDecoration(hintText: '請(qǐng)輸入用戶名',hintStyle: TextStyle(color: Colors.grey),hintMaxLines: 1), )

errorText顯示在輸入框的左下部，默認(rèn)字體為紅色，用法如下：

TextField(decoration: InputDecoration(errorText: '用戶名輸入錯(cuò)誤',errorStyle: TextStyle(fontSize: 12),errorMaxLines: 1,errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),), )

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

TextField(decoration: InputDecoration(prefixIcon: Icon(Icons.person)), )

注意prefix和icon的區(qū)別，icon是在輸入框邊框的外部，而prefix在里面。

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

TextField(decoration: InputDecoration(suffixIcon: Icon(Icons.person)), )

counter組件統(tǒng)計(jì)輸入框文字的個(gè)數(shù)，counter僅僅是展示效果，不具備自動(dòng)統(tǒng)計(jì)字?jǐn)?shù)的功能， 自動(dòng)統(tǒng)計(jì)字?jǐn)?shù)代碼如下：

var _textFieldValue = ''; TextField(onChanged: (value){setState(() {_textFieldValue = value;});},decoration: InputDecoration(counterText: '${_textFieldValue.length}/32'), )

filled為true時(shí)，輸入框?qū)?huì)被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號(hào)/手機(jī)號(hào)/郵箱',focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Color(0x00000000)),borderRadius: BorderRadius.all(Radius.circular(100))),),), )

controller是輸入框文本編輯的控制器，可以獲取TextField的內(nèi)容、設(shè)置TextField的內(nèi)容，下面將輸入的英文變?yōu)榇髮?xiě)：

TextEditingController _controller;@override void initState() {super.initState();_controller = TextEditingController()..addListener(() {//獲取輸入框的內(nèi)容，變?yōu)榇髮?xiě)_controller.text = _controller.text.toUpperCase();}); }@override Widget build(BuildContext context) {return TextField(controller: _controller,); }@override dispose() {super.dispose();_controller.dispose(); }

有時(shí)輸入框后面帶有“清除”功能，需要controller來(lái)實(shí)現(xiàn)。如果需要2個(gè)TextField的內(nèi)容進(jìn)行同步，只需要給2個(gè)TextField設(shè)置同一個(gè)controller即可實(shí)現(xiàn)。

keyboardType參數(shù)控制軟鍵盤(pán)的類型，說(shuō)明如下：

• text：通用鍵盤(pán)。
• multiline：當(dāng)TextField為多行時(shí)（maxLines設(shè)置大于1），右下角的為“換行” 按鍵。
• number：數(shù)字鍵盤(pán)。
• phone：手機(jī)鍵盤(pán)，比數(shù)字鍵盤(pán)多"*"和 "#"。
• datetime：在ios上和text一樣，在android上出現(xiàn)數(shù)字鍵盤(pán)、":"和 "-"。
• emailAddress：郵箱鍵盤(pán)，有"@" 和 "."按鍵。
• url：url鍵盤(pán)，有"/" 和 "."按鍵。
• visiblePassword：既有字幕又有數(shù)字的鍵盤(pán)。

textInputAction參數(shù)控制軟鍵盤(pán)右下角的按鍵，說(shuō)明如下：

• none：android上顯示返回鍵，ios不支持。
• unspecified：讓操作系統(tǒng)自己決定哪個(gè)合適，一般情況下，android顯示“完成”或者“返回”。
• done：android顯示代表“完成”的按鈕，ios顯示“Done”（中文：完成）。
• go：android顯示表達(dá)用戶去向目的地的圖標(biāo)，比如向右的箭頭，ios顯示“Go”（中文：前往）。
• search：android顯示表達(dá)搜索的按鈕，ios顯示"Search"（中文：搜索）。
• send：android顯示表達(dá)發(fā)送意思的按鈕，比如“紙飛機(jī)”按鈕，ios顯示"Send"（中文：發(fā)送）。
• next：android顯示表達(dá)“前進(jìn)”的按鈕，比如“向右的箭頭”,ios顯示"Next"（中文：下一項(xiàng)）。
• previous：android顯示表達(dá)“后退”的按鈕，比如“向左的箭頭”,ios不支持。
• continueAction：android 不支持，ios僅在ios9.0+顯示"Continue"（中文：繼續(xù)）。
• join：Android和ios顯示"Join"（中文：加入）。
• route：android 不支持，ios顯示"Route"（中文：路線）。
• emergencyCall：android 不支持，ios顯示"Emergency Call"（中文：緊急電話）。
• newline：android顯示表達(dá)“換行”的按鈕，ios顯示”換行“。

大家可能發(fā)現(xiàn)了，Android上顯示的按鈕大部分是不確定的，比如next有的顯示向右的箭頭，有的顯示前進(jìn)，這是因?yàn)楦鞔髲S商對(duì)Android ROM定制引發(fā)的。

textCapitalization參數(shù)是配置鍵盤(pán)是大寫(xiě)還是小寫(xiě)，僅支持鍵盤(pán)模式為text，其他模式下忽略此配置，說(shuō)明如下：

• words：每一個(gè)單詞的首字母大寫(xiě)。
• sentences：每一句話的首字母大寫(xiě)。
• characters：每個(gè)字母都大寫(xiě)
• none：都小寫(xiě)

這里僅僅是控制軟鍵盤(pán)是大寫(xiě)模式還是小寫(xiě)模式，你也可以切換大小寫(xiě)，系統(tǒng)并不會(huì)改變輸入框內(nèi)的內(nèi)容。

textAlignVertical表示垂直方向的對(duì)齊方式，textDirection表示文本方向，用法如下：

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

toolbarOptions表示長(zhǎng)按時(shí)彈出的菜單，有copy、cut、paste、selectAll，用法如下：

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

cursor表示光標(biāo)，用法如下：

TextField(showCursor: true,cursorWidth: 3,cursorRadius: Radius.circular(10),cursorColor: Colors.red, )

效果如下：

將輸入框設(shè)置為密碼框，只需obscureText屬性設(shè)置true即可，用法如下：

TextField(obscureText: true, )

通過(guò)inputFormatters可以限制用戶輸入的內(nèi)容，比如只想讓用戶輸入字符，設(shè)置如下：

TextField(inputFormatters: [WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),], )

這時(shí)用戶是無(wú)法輸入數(shù)字的。

onChanged是當(dāng)內(nèi)容發(fā)生變化時(shí)回調(diào)，onSubmitted是點(diǎn)擊回車(chē)或者點(diǎn)擊軟鍵盤(pán)上的完成回調(diào)，onTap點(diǎn)擊輸入框時(shí)回調(diào)，用法如下：

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

輸入框右下角經(jīng)常需要字?jǐn)?shù)統(tǒng)計(jì)，除了使用上面介紹的方法外，還可以使用buildCounter，建議使用此方法，用法如下：

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

動(dòng)態(tài)獲取焦點(diǎn)

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

_focusNode為T(mén)extField的focusNode：

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

動(dòng)態(tài)失去焦點(diǎn)

_focusNode.unfocus();

過(guò)渡顏色的文字

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技術(shù)和應(yīng)用實(shí)戰(zhàn)',style: new TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold,foreground: Paint()..shader = linearGradient),);}, )

Builder組件是為了計(jì)算當(dāng)前Text組件大小，生成LinearGradient。

帶前后置標(biāo)簽的文本

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: '泡沫滅火器可用于帶電滅火'),]), )

“服務(wù)協(xié)議”

通常在登錄頁(yè)面的底部會(huì)出現(xiàn)登錄即代表同意并閱讀 《服務(wù)協(xié)議》，其中《服務(wù)協(xié)議》為藍(lán)色且可點(diǎn)擊：

Text.rich(TextSpan(text: '登錄即代表同意并閱讀',style: TextStyle(fontSize: 11, color: Color(0xFF999999)),children: [TextSpan(text: '《服務(wù)協(xié)議》',style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),recognizer: TapGestureRecognizer()..onTap = () {print('onTap');},),]), )

登錄密碼輸入框

TextField(decoration: InputDecoration(fillColor: Color(0x30cccccc),filled: true,enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Color(0x00FF0000)),borderRadius: BorderRadius.all(Radius.circular(100))),hintText: '輸入密碼',focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Color(0x00000000)),borderRadius: BorderRadius.all(Radius.circular(100))),),textAlign: TextAlign.center,obscureText: true,onChanged: (value) {}, )

評(píng)論回復(fù)

Text.rich(TextSpan(text: '回復(fù)',style: TextStyle(fontSize: 11, color: Color(0xFF999999)),children: [TextSpan(text: '@老孟：',style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),recognizer: TapGestureRecognizer()..onTap = () {print('onTap');},),TextSpan(text: '你好，想知道Flutter發(fā)展前景如何？',),]), )

交流

老孟Flutter博客地址（330個(gè)控件用法）：http://laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關(guān)注公眾號(hào)【老孟Flutter】

總結(jié)

以上是生活随笔為你收集整理的fastreport文本字数太多换行_Flutter实战】文本组件及五大案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。