Flutter實戰】文本組件及五大案例

老孟導讀:大家好,這是【Flutter實戰】系列文章的第二篇,這一篇講解文本組件,文本組件包括文本展示組件(Text和RichText)和文本輸入組件(TextField),基礎用法和五個案例助你快速掌握。
第一篇鏈接:【Flutter實戰】移動技術發展史

Text

Text是显示文本的組件,最常用的組件,沒有之一。基本用法如下:

Text('老孟')

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

文本的樣式在style中設置,類型為TextStyleTextStyle中包含很多文本樣式屬性,下面介紹一些常用的。

設置文本大小和顏色:

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

上面黑色的字體為沒有設置的效果,作為對比。

設置字體粗細:

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

字體粗細共有9個級別,為w100w900FontWeight.boldw700

設置斜體:

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

設置自定義的字體:

  1. 首先下載字體庫(比如中華字體庫)
  2. 將字體文件拷貝的項目中,一般目錄是:assets/fonts/,assets和fonts都需要手動創建,此目錄不是必須的,而是約定俗成,資源一般都放在assets目錄下。
  3. 配置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,
  width: 200,
  color: Colors.blue.withOpacity(.4),
  child: Text('老孟,專註分享Flutter技術和應用實戰',softWrap: true,),
)

文本超出範圍時的處理:

Container(
  height: 100,
  width: 200,
  color: Colors.blue.withOpacity(.4),
  child: Text('老孟,專註分享Flutter技術和應用實戰',overflow: TextOverflow.ellipsis,),
)

溢出的處理方式:

  • clip:直接裁剪。
  • fade:越來越透明。
  • ellipsis:省略號結尾。
  • visible:依然显示,此時將會溢出父組件。

設置全局字體樣式:

MaterialApptheme中設置如下

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,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技術和應用實戰'),
      ]),
)

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)),
          borderRadius: BorderRadius.all(Radius.circular(100))),
    ),
  ),
)

controller是輸入框文本編輯的控制器,可以獲取TextField的內容、設置TextField的內容,下面將輸入的英文變為大寫:

TextEditingController _controller;

@override
void initState() {
  super.initState();
  _controller = TextEditingController()
    ..addListener(() {
      //獲取輸入框的內容,變為大寫
      _controller.text = _controller.text.toUpperCase();

    });
}

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,
  );
}

@override
dispose() {
  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表示長按時彈出的菜單,有copycutpasteselectAll,用法如下:

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: '《服務協議》',
          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) {

  },
)

評論回復

Text.rich(
  TextSpan(
      text: '回復',
      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發展前景如何?',
        ),
      ]),
)

交流

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

歡迎加入Flutter交流群(微信:laomengit)、關注公眾號【老孟Flutter】:

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

台北網頁設計公司這麼多該如何選擇?

※智慧手機時代的來臨,RWD網頁設計為架站首選

※評比南投搬家公司費用收費行情懶人包大公開

※回頭車貨運收費標準