天天看點
傳回

Flutter學習筆記（21）--TextField文本框元件和Card卡片元件

今天來學習下TextField文本框元件和Card卡片元件。

隻要是應用程式就少不了互動，基本上所有的應用程式都會有使用者名、密碼輸入框，搜尋框等等，前面我們有寫過一篇基于Form表單的輸入功能，今天來看一下TextField文本框元件，文本輸入是最常見的一種互動方式，TextField元件就是用來做文本輸入的元件。注意這個要和Text元件區分開來，Text元件主要用于顯示文本，并不能接受輸入文本。

如需轉載，請注明出處：Flutter學習筆記（21）--TextField文本框元件和Card卡片元件

今天來學習下TextField文本框元件和Card卡片元件。

隻要是應用程式就少不了互動，基本上所有的應用程式都會有使用者名、密碼輸入框，搜尋框等等，前面我們有寫過一篇基于Form表單的輸入功能，今天來看一下TextField文本框元件，文本輸入是最常見的一種互動方式，TextField元件就是用來做文本輸入的元件。注意這個要和Text元件區分開來，Text元件主要用于顯示文本，并不能接受輸入文本。

  • TextField文本框元件

TextField元件構造方法：

const TextField({
Key key,
// controller是TextField的控制器，當TextField在編輯時回調，
// 如果不設定則TextField預設建立自己的controller，重點是如果兩個TextField使用一個controller，那麼在一個中輸入内容，另一個會同步
this.controller,
this.focusNode,//焦點控制
this.decoration = const InputDecoration(),//TextField裝飾器，主要用于控制TextField的外觀及提示等
TextInputType keyboardType,//鍵盤類型，有number、phone、emailAddress、text等
this.textInputAction,//鍵盤事件類型，有send、search等
this.textCapitalization = TextCapitalization.none,//
this.style,//輸入文本的樣式
this.strutStyle,
this.textAlign = TextAlign.start,//對齊方式，預設開始位置對齊
this.textDirection,//文本方向，預設從左到右
this.autofocus = false,//是否自動獲得焦點，預設false
this.obscureText = false,//文本内容是否加密，預設false
this.autocorrect = true,//是否自動更正
this.maxLines = 1,//最大行數
this.minLines,//最小行數
this.expands = false,
this.maxLength,//最大長度
this.maxLengthEnforced = true,//超過最大長度輸入，是否提示錯誤，預設true，如果設定了false，可以繼續輸入但是會提示錯誤
this.onChanged,//内容改變時回調
this.onEditingComplete,//編輯完成時回調
this.onSubmitted,//送出時回調
this.inputFormatters,//允許輸入的格式，比如隻能輸入數字或字母
this.enabled,//是否禁用
this.cursorWidth = 2.0,//光标寬度
this.cursorRadius,//光标圓角
this.cursorColor,//光标顔色
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection,
this.onTap,//點選控件時調用
this.buildCounter,
this.scrollPhysics,
})

簡單實作一個登陸的功能，限制使用者名輸入框輸入的内容長度為10位，不到10位長度，給toast提示，Demo示例：

import \'package:flutter/material.dart\';
import \'package:fluttertoast/fluttertoast.dart\';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  final TextEditingController _useController = new TextEditingController();
  final TextEditingController _pwdController = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    _useController.addListener((){
      Fluttertoast.showToast(msg: \'您輸入的内容為：${_useController.text}\');
    });
    return new MaterialApp(
      title: \'TextField And Card Demo\',
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: AppBar(
          title: new Text(\'TextField And Card Demo\'),
        ),
        body: new Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 20,top: 0,right: 20,bottom: 0),
              child: TextField(
                  controller: _useController,//綁定controller
                  maxLines: 1,//最多一行
                  maxLength: 10,//最多輸入10個字元
                  autofocus: true,//自動擷取焦點
                  textAlign: TextAlign.left,//從左到右對齊
                  style: new TextStyle(color: Colors.white,fontSize: 20.0),//輸入内容顔色和字型大小
                  cursorColor: Colors.deepPurple,//光标顔色
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    //添加裝飾效果
                    filled: true,//背景是否填充
                    fillColor: Colors.redAccent,//添加黃色填充色（filled: true必須設定，否則單獨設定填充色不會生效）
                    helperText: \'使用者名\',
                    prefixIcon: Icon(Icons.person_add),//左側圖示
                    suffixText: \'使用者名\',//右側文本提示
                    suffixStyle: new TextStyle(fontSize: 20),//右側提示文案字型大小
                    hintText: \'input user name\',//hint提示文案
                    hintStyle: new TextStyle(color: Colors.amber),//hint提示文案字型顔色
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.0),//添加圓角
                    ),
                  )
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 20,top: 0,right: 20,bottom: 0),
              child: TextField(
                  controller: _pwdController,//綁定controller
                  maxLines: 1,//最多一行
                  maxLength: 10,//最多輸入10個字元
                  autofocus: true,//自動擷取焦點
                  textAlign: TextAlign.left,//從左到右對齊
                  style: new TextStyle(color: Colors.white,fontSize: 20.0),//輸入内容顔色和字型大小
                  cursorColor: Colors.deepPurple,//光标顔色
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    //添加裝飾效果
                    filled: true,//背景是否填充
                    fillColor: Colors.redAccent,//添加黃色填充色（filled: true必須設定，否則單獨設定填充色不會生效）
                    helperText: \'密  碼\',
                    prefixIcon: Icon(Icons.person_add),//左側圖示
                    suffixText: \'密  碼\',//右側文本提示
                    suffixStyle: new TextStyle(fontSize: 20),//右側提示文案字型大小
                    hintText: \'input user pwd\',//hint提示文案
                    hintStyle: new TextStyle(color: Colors.amber),//hint提示文案字型顔色
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.0),//添加圓角
                    ),
                  )
              ),
            ),
            RaisedButton(
                onPressed: _loginSubmit,
                child: new Text(\'登陸\'),
            )
          ],
        ),
      ),
    );
  }

  void _loginSubmit() {
    if(_useController.text.length != 10){
      Fluttertoast.showToast(msg: \'使用者名長度為11位\');
    }
  }
}

效果截圖：

Flutter學習筆記（21）--TextField文本框元件和Card卡片元件

上面的各類屬性設定都有很詳細的注釋，這裡就挑幾個容易踩的坑來講一下吧！

1.多個TextField一定要對應多個controller，不然多個TextField用同一個controller的話，會導緻一個輸入框的内容會同步到其他輸入框内：

final TextEditingController _useController = new TextEditingController();
  final TextEditingController _pwdController = new TextEditingController();

2.如果要給TextField設定背景填充色，filled和fillColor這兩個屬性一定要成對出現，不然你會發現設定不生效：

filled: true,//背景是否填充
fillColor: Colors.redAccent,//添加黃色填充色（filled: true必須設定，否則單獨設定填充色不會生效）

3.通過controller擷取輸入框内輸入的内容：

_useController.text

4.TextField内容變化監聽，一般可用作金額輸入進行動态計算操作：

onChanged: (value){
    Fluttertoast.showToast(msg: value);
},

 5.TextField裝飾器構造方法

InputDecoration({
    this.icon,    //位于裝飾器外部和輸入框前面的圖檔
    this.labelText,  //用于描述輸入框，例如這個輸入框是用來輸入使用者名還是密碼的，當輸入框擷取焦點時預設會浮動到上方，
    this.labelStyle,  // 控制labelText的樣式,接收一個TextStyle類型的值
    this.helperText, //輔助文本，位于輸入框下方，如果errorText不為空的話，則helperText不會顯示
    this.helperStyle, //helperText的樣式
    this.hintText,  //提示文本，位于輸入框内部
    this.hintStyle, //hintText的樣式
    this.hintMaxLines, //提示資訊最大行數
    this.errorText,  //錯誤資訊提示
    this.errorStyle, //errorText的樣式
    this.errorMaxLines,   //errorText最大行數
    this.hasFloatingPlaceholder = true,  //labelText是否浮動，預設為true，修改為false則labelText在輸入框擷取焦點時不會浮動且不顯示
    this.isDense,   //改變輸入框是否為密集型，預設為false，修改為true時，圖示及間距會變小
    this.contentPadding, //内間距
    this.prefixIcon,  //位于輸入框内部起始位置的圖示。
    this.prefix,   //預先填充的Widget,跟prefixText同時隻能出現一個
    this.prefixText,  //預填充的文本，例如手機号前面預先加上區号等
    this.prefixStyle,  //prefixText的樣式
    this.suffixIcon, //位于輸入框後面的圖檔,例如一般輸入框後面會有個眼睛，控制輸入内容是否明文
    this.suffix,  //位于輸入框尾部的控件，同樣的不能和suffixText同時使用
    this.suffixText,//位于尾部的填充文字
    this.suffixStyle,  //suffixText的樣式
    this.counter,//位于輸入框右下方的小控件，不能和counterText同時使用
    this.counterText,//位于右下方顯示的文本，常用于顯示輸入的字元數量
    this.counterStyle, //counterText的樣式
    this.filled,  //如果為true，則輸入使用fillColor指定的顔色填充
    this.fillColor,  //相當于輸入框的背景顔色
    this.errorBorder,   //errorText不為空，輸入框沒有焦點時要顯示的邊框
    this.focusedBorder,  //輸入框有焦點時的邊框,如果errorText不為空的話，該屬性無效
    this.focusedErrorBorder,  //errorText不為空時，輸入框有焦點時的邊框
    this.disabledBorder,  //輸入框禁用時顯示的邊框，如果errorText不為空的話，該屬性無效
    this.enabledBorder,  //輸入框可用時顯示的邊框，如果errorText不為空的話，該屬性無效
    this.border, //正常情況下的border
    this.enabled = true,  //輸入框是否可用
    this.semanticCounterText,  
    this.alignLabelWithHint,
  })

  • Card卡片元件

Card即卡片元件塊，内容可以由大多數類型的Widget構成，但通常和ListTitle一起使用，Card有一個child，但它可以是支援多個child的列、行、網格或其他小部件。預設情況下，Card将其大小縮小為0像素，你可以使用SizeBox來限制Card的大小，在Flutter中，Card具有圓角和陰影。

demo示例：

import \'package:flutter/material.dart\';
import \'package:fluttertoast/fluttertoast.dart\';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: \'TextField And Card Demo\',
      home: Scaffold(
        appBar: AppBar(
          title: new Text(\'TextField And Card Demo\'),
        ),
        body: Center(
          child: new SizedBox(
            height: 360,
            child: Card(
              color: Colors.white,
              margin: EdgeInsets.only(left: 20,top: 0,right: 20,bottom: 0),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),//設定圓角
              child: Column(
                children: <Widget>[
                  new ListTile(
                    leading: Icon(Icons.add_circle_outline),
                    title: new Text(\'TextField And Card Demo1\'),
                    subtitle: new Text(\'副标題1\'),
                  ),
                  new Divider(),
                  new ListTile(
                    leading: Icon(Icons.add_circle_outline),
                    title: new Text(\'TextField And Card Demo2\'),
                    subtitle: new Text(\'副标題2\'),
                    onTap: (){

                    },
                  ),
                  new Divider(),
                  new ListTile(
                    leading: Icon(Icons.add_circle_outline),
                    title: new Text(\'TextField And Card Demo3\'),
                    subtitle: new Text(\'副标題3\'),
                  ),
                  new Divider(),
                  new ListTile(
                    leading: Icon(Icons.add_circle_outline),
                    title: new Text(\'TextField And Card Demo4\'),
                    subtitle: new Text(\'副标題4\'),
                  ),
                  new Divider(),
                ],
              ),
            ),
          ),
        )
      ),
    );
  }
}

效果截圖：

Flutter學習筆記（21）--TextField文本框元件和Card卡片元件

以上就是今天的學習内容啦！！！

上一篇: ubuntu 安裝GPU黑屏 修改GRUB_Ubuntu安裝mysql後修改使用者名和密碼
下一篇: vnc遠端登入linux黑屏,linux VNC安裝好後登入黑屏 滑鼠顯示黑色大叉的解決方法