flutter 文本框组件TextField

文本框组件
	TextField(
          maxLines: , 设置后即可将文本框改成多行文本框
          maxLength: , 最大输入长度
          onChanged: (text){} 内容改变回调,第一个参数是输入框的内容,修改状态使用setState
          obscureText: true,  将文本框改成密码输入形式

          controller: 控制器名,  利用控制器来设置文本框初始值

          decoration:InputDecoration(  文本框样式
            hintText:"xx",    类似placeholder效果
            labelText: "xx",  设置文本框内容,输入时标签内容会浮动在文本框上
            labelStyle
            icon:Icon(Icons.search),   在输入框前添加图标
            prefixIcon: Icon(Icons.search),  在输入框内字体前添加图标
            border: InputBorder.none，  取消输入框的下划线
            
            border: OutlineInputBorder( 设置文本框边框样式
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color:Colors.blue,width: 2)
            )

          ) ,
         ),
         
若要预先设定文本框的值
	(1)先定义控制器
		var 控制器名=new TextEditingController();
		
	(2)在文本框的controller参数中赋值控制器名
	(3)设置内容(可以在生命周期函数中设置)
		控制名.text='xx';  可读可写属性

代码示例:

import 'package:flutter/material.dart';

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

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

class _Home2State extends State<Home4> {

  var uname=new TextEditingController();
  var flag=true;
  
  @override
  void initState() { 
    super.initState();
    this.uname.text="初始值";
  }


  @override
  Widget build(BuildContext context) {
    return Container(
       child: Column(children: <Widget>[

         TextField(
          //  maxLines: , 设置后即可将文本框改成多行文本框
          //maxLength: , 最大输入长度
          onChanged: (text){
            setState(() {
              uname.text=text;
            });
            
          },  //内容改变回调
          // obscureText: true, //将文本框改成密码输入形式

          controller: uname,  //利用控制器来设置文本框初始值

          decoration:InputDecoration(
            hintText:"请输入",    //类似placeholder效果
            // labelText: "哈哈"  //设置文本框内容,输入时标签内容会浮动在文本框上
            //labelStyle
            icon:Icon(Icons.search), //在输入框前添加图标
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color:Colors.blue,width: 2)

            )

          ) ,
         )
         

       ]),
    );
  }
}

// 因为表单组件需要改变状态,所以要使用有状态组件