TextField用于接收用戶的文本輸入曾掂，屬性介紹歧蕉。
常見的屬性：

• keyboardType：鍵盤的類型汰蓉，
• style：設(shè)置樣式委煤，
• textAlign：文本對齊方式奋姿，
• maxLength：最大顯示行數(shù)
• decoration：用于設(shè)置輸入框相關(guān)的樣式
• icon：設(shè)置左邊顯示的圖標(biāo)
• labelText：在輸入框上面顯示一個提示的文本
• hintText：顯示提示的占位文字
• border：輸入框的邊框，默認(rèn)底部有一個邊框素标，可以通過InputBorder.none刪除掉
• filled：是否填充輸入框称诗，默認(rèn)為false
• fillColor：輸入框填充的顏色
• controller：綁定的控制器，可以使用它設(shè)置文本的初始值头遭，也可以使用它來監(jiān)聽文本的改變
• onChanged：監(jiān)聽輸入框內(nèi)容的改變寓免，傳入一個回調(diào)函數(shù)
• onSubmitted：點擊鍵盤中右下角的down時，會回調(diào)的一個函數(shù)

代碼示例:

import 'package:flutter/material.dart';

main(List<String> args) {
  // imageCache : 圖片緩存類
  // imageCache.clear();
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('基本部件 - TextField'),
      ),
      body: Center(
        child: TextFieldDemo(),
      ),
    ),
  ));
}

class TextFieldDemo extends StatefulWidget {
  @override
  _TextFieldDemoState createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  final nameC = TextEditingController();
  final passwordC = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //姓名
        UserNameField(nameC),
        //密碼
        PasswordField(passwordC),
        //登錄
        Container(
          width: 180,
          height: 44,
          child: TextButton(
            style: ButtonStyle(
              textStyle: MaterialStateProperty.all(TextStyle()),
              backgroundColor:
                  MaterialStateColor.resolveWith((states) => Colors.red),
            ),
            onPressed: () {
              print('commit ${nameC.text}-${passwordC.text}');
            },
            child: Text('登錄'),
          ),
        )
      ],
    );
    ;
  }
}

// ignore: must_be_immutable
class UserNameField extends StatelessWidget {
  TextEditingController userNameController;

  UserNameField(TextEditingController controller) {
    userNameController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(18),
      child: TextField(
        controller: userNameController,
        decoration: InputDecoration(
          labelText: '姓名',
          hintText: '請輸入',
          hintStyle: TextStyle(color: Colors.green),
          icon: Icon(Icons.people),
          border: OutlineInputBorder(
              borderSide: BorderSide(
                  color: Colors.red, width: 0.1, style: BorderStyle.none)),
          filled: true,
          fillColor: Colors.lightGreen[50], // 需設(shè)置filled為true才可生效
          hoverColor: Colors.red,
        ),
        onChanged: (value) {
          print('姓名: $value');
        },
        onSubmitted: (value) {
          print('姓名提交: $value');
        },
      ),
    );
  }
}

// ignore: must_be_immutable
class PasswordField extends StatelessWidget {
  TextEditingController passwordController;

  PasswordField(TextEditingController controller) {
    passwordController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(18),
      child: TextField(
        controller: passwordController,
        decoration: InputDecoration(
          labelText: '密碼',
          hintText: '請輸入',
          hintStyle: TextStyle(color: Colors.green),
          icon: Icon(Icons.lock),
          border: OutlineInputBorder(
              borderSide: BorderSide(
                  color: Colors.red, width: 0.1, style: BorderStyle.none)),
          filled: true,
          fillColor: Colors.lightGreen[50], // 需設(shè)置filled為true才可生效
          hoverColor: Colors.red,
        ),
        onChanged: (value) {
          print('密碼: $value');
        },
        onSubmitted: (value) {
          print('密碼提交: $value');
        },
      ),
    );
  }
}

效果圖.png