import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Wrap布局练习"),
        ),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  MyForm({Key key}) : super(key: key);

  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(15),
      child: ListView(
        children: <Widget>[     
            //textField 默认的样子
            TextField(),
               SizedBox(height: 10,),
            //带图标的文本框
            TextField(
              decoration: InputDecoration(                
                  //默认显示的字符,输入时自动隐藏
                  hintText: "请输入你的用户名",
                  icon: Icon(Icons.people)                  
                ),
            ),
            SizedBox(height: 10,),
            TextField(
              //修饰这个textField
              decoration: InputDecoration(
                //默认显示的字符,输入时自动隐藏
                hintText: "请输入您的用户名称",
                //边框的颜色
                border:OutlineInputBorder(),
                ),
            ),
            SizedBox(height: 10,),
            //LabelText的使用
            TextField(
              decoration: InputDecoration(                
                  //单没有获取焦点时他和hinttext一样香港,当获取单焦点时他会有动画左上角显示
                  labelText: "用户名",
                  //边框的颜色
                  border:OutlineInputBorder(),
                ),
            ),         
            SizedBox(height: 10,),
            //密码框
            TextField(
              //时间遏制为密码框
              obscureText: true,
              decoration: InputDecoration(                
                  //默认显示的字符,输入时自动隐藏
                  hintText: "请输入你的密码",
                  //边框的颜色
                  border:OutlineInputBorder(),
                ),
            ),
            SizedBox(height: 10,),
            //多行文本框
            TextField(
              //设置最大多少行
              maxLines:4,
              //最大输入字符,如果值为TextField.noMaxLength 那么只显示已输入的字符数量
              maxLength:200,            
              decoration: InputDecoration(                
                  //默认显示的字符,输入时自动隐藏
                  hintText: "这个是多行",
                  //边框的颜色
                  border:OutlineInputBorder(),
                ),
            ),
            
     
        ],
      )
    );
  }
}

效果图: