TextFiled文本輸入框。

構(gòu)造方法

const TextField({
    Key key,
    this.controller,           ////控制器，控制TextField文字
    this.focusNode,
    this.decoration = const InputDecoration(),    //輸入器裝飾
    TextInputType keyboardType,   ////輸入的類型
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.textAlign = TextAlign.start,   //文字顯示位置
    this.autofocus = false,
    this.obscureText = false,
    this.autocorrect = true,
    this.maxLines = 1,
    this.maxLength,
    this.maxLengthEnforced = true,
    this.onChanged,                //文字改變觸發(fā)
    this.onEditingComplete,
    this.onSubmitted,   ////文字提交觸發(fā)（鍵盤按鍵）
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
  })

1.decoration
輸入器裝飾

const InputDecoration({
    this.icon,
    this.labelText,
    this.labelStyle,
    this.helperText,
    this.helperStyle,
    this.hintText,
    this.hintStyle,
    this.errorText,
    this.errorStyle,
    this.errorMaxLines,
    this.isDense,
    this.contentPadding,
    this.prefixIcon,
    this.prefix,
    this.prefixText,
    this.prefixStyle,
    this.suffixIcon,
    this.suffix,
    this.suffixText,
    this.suffixStyle,
    this.counterText,
    this.counterStyle,
    this.filled,
    this.fillColor,
    this.errorBorder,
    this.focusedBorder,
    this.focusedErrorBorder,
    this.disabledBorder,
    this.enabledBorder,
    this.border,
    this.enabled = true,
    this.semanticCounterText,
  })

①labelText

labelText: '請(qǐng)你輸入姓名',
labelStyle: new TextStyle( fontSize: 13.0, color: Colors.amberAccent),

效果如圖：

無(wú)焦點(diǎn)

labelText1.png

有焦點(diǎn)

labelText2.png

②hintText
和android正常hint一樣

hintText: '請(qǐng)輸入姓名',
hintStyle: new TextStyle(fontSize: 13.0, color: Colors.pink),

如圖

hintText.png

③errorText和helperText
提示性的文本

labelText: '請(qǐng)你輸入姓名',
labelStyle: new TextStyle( fontSize: 13.0, color: Colors.amberAccent),
helperText: '嘻嘻嘻',

helperText.png

④icon
icon可以是自帶的Icon也可以是自己的圖片

//            icon: new Image.asset(
//              'images/goods_image.png', width: 30.0, height: 30.0,),
            icon: new Icon(Icons.person),
            labelText: '請(qǐng)你輸入姓名',
            labelStyle: new TextStyle(
                fontSize: 13.0, color: Colors.amberAccent),
            helperText: '嘻嘻嘻',

icon.png

⑤contentPadding
內(nèi)容的邊距，默認(rèn)是有一個(gè)邊距的

//            icon: new Image.asset(
//              'images/goods_image.png', width: 30.0, height: 30.0,),
            icon: new Icon(Icons.person),
            labelText: '請(qǐng)你輸入姓名',
            labelStyle: new TextStyle(
                fontSize: 13.0, color: Colors.amberAccent),
            helperText: '嘻嘻嘻',
            contentPadding: new EdgeInsets.all(0.0)

padding.png

⑥prefixIcon
在上面的代碼基礎(chǔ)之上加下面的代碼

prefixIcon: new Icon(Icons.people)

prefixIcon.png

⑦prefixText（同上---icon換成文本）
prifix(同上一樣，他的參數(shù)是widget，可以是文本，圖片，圖片文本的組合container，自己隨便組合)

⑧suffixText，suffixIcon，suffix （后綴，用法同prefix一樣）

⑨border
InputBorder.none--------------無(wú)border，下劃線也沒(méi)了
UnderlineInputBorder--------下劃線
OutlineInputBorder-----------周圍都有border，一個(gè)框

OutlineInputborder.png

（其他暫不介紹）

2. TextInputType keyboardType
鍵盤輸入類型（數(shù)字，文本等各種類型）
2. controller
文本控制器

import 'package:flutter/material.dart';

class FourPage extends StatelessWidget {
  //手機(jī)號(hào)的控制器
  TextEditingController phoneController = TextEditingController();
  //密碼的控制器
  TextEditingController passController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('第四個(gè)界面'),),
      body: new Container(
//        color: Colors.pink,
        margin: new EdgeInsets.all(10.0),
        child: new Column(
        children: <Widget>[
          TextField(
          controller: phoneController,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(10.0),
            icon: Icon(Icons.phone),
            labelText: '請(qǐng)輸入你的用戶名)',
            helperText: '請(qǐng)輸入注冊(cè)的手機(jī)號(hào)',
          ),
          autofocus: false,
        ),
        TextField(
            controller: passController,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.lock),
              labelText: '請(qǐng)輸入密碼)',
            ),
            obscureText: true),
        RaisedButton(
          onPressed: _login,
          child: Text('登錄'),
        ),
        ],
        ),
      ),
    );
  }

  void _login() {
    print({'手機(jī)號(hào)': phoneController.text, '密碼': passController.text});
      phoneController.clear();
    }
  }

flutterTextFiled.png

flutterPrint.png