Flutter 组件之表单组件TextField、CheckBox、Radio、Switch

TextField

普通输入框

TextField(//文本输入框
  decoration: InputDecoration(//表单定义模块
      hintText: "请输入用户名"//类似html的placeholder
  ),
),

图标输入框

TextField(//文本输入框
  decoration: InputDecoration(//表单定义模块
      hintText: "图标输入框",
      icon: Icon(Icons.people)//表单内的Icon
  ),
),

带有边框的本输入框

TextField(//文本输入框
	decoration: InputDecoration(//表单定义模块
	hintText: "带有边框的表单",//类似html的placeholder
	border: OutlineInputBorder(),//带有边框的输入框
),

多行文本输入框

 TextField(//多行文本输入框
   maxLines: 4,//控制函数,类似html 文本域textarea
   decoration: InputDecoration(//表单定义模块
       hintText: "请输入多行文本"//类似html的placeholder
   ),
 ),

密码输入框

 TextField(
   obscureText: true,//密码输入框属性
   decoration: InputDecoration(
       labelText: "密码：", //label文字内容
       hintText: "密码"//
   ),
 ),

模拟登陆设置获取输入框内容

class _PeopleState extends State<People> {
//  表单controller-> TextEditingController()可以配置表单默认显示内容
  var _username=new TextEditingController();   //初始化的时候给表单赋值
  var _password;//定义类属性

  @override
  void initState() {//初始化组件name默认赋值
    // TODO: implement initState
    super.initState();
    _username.text='初始值';//初始化数据
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('模拟登陆'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          // child:TextDemo() ,
          child:Column(
            children: <Widget>[
              TextField(//input文本输入框
                decoration: InputDecoration(//表单定义模块
                    hintText: "请输入用户名"//类似html的placeholder
                ),
                onChanged: (value){
                  setState(() {//设置获取文本内容
                    _username.text=value;
                  });
                },
              ),
              SizedBox(height: 20,),
              TextField(
                obscureText: true,//密码输入框属性
                decoration: InputDecoration(
                    hintText: "密码"//
                ),
                onChanged: (value){//表单改变事件可以获取vlue值
                  setState(() {
                    this._password=value;//不设置默认值直接就可以赋值
                  });
                },
              ),
              SizedBox(height: 40),
              Container(//登陆按钮
                width: double.infinity,//无穷大与外层容器,就是自适应的意思
                height: 40,
                child: RaisedButton(
                  child: Text("登录"),
                  onPressed: (){//点击获取文本
                    print(this._username.text);
                    print(this._password);
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              )
            ],
          ) ,
        )
    );
  }
}

Checkbox

class _PeopleState extends State<People> {
  var flag=true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("checkbox"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(children: <Widget>[
            Checkbox(//独立多选框
              value: this.flag,
              onChanged: (v){
                setState(() {
                  this.flag=v;
                });
              },
              activeColor: Colors.red,
            ),Checkbox(//多选框
              value: this.flag,
              onChanged: (v){
                setState(() {
                  this.flag=v;
                });
              },
              activeColor: Colors.red,
            ),
          ]),
          Row(
            children: <Widget>[
              Text(this.flag?"选中":"未选中")//获取this.flag的值
            ],
          ),
          SizedBox(height: 40),
           CheckboxListTile(//列表和checkBox结合属性
              value: this.flag,
               onChanged: (v){
                 setState(() {
                    this.flag=v;
                 });
               },
               title: Text("标题"),
               subtitle:Text("这是二级标题") ,
           ),
          Divider(),
          CheckboxListTile(
              value: this.flag,
              onChanged: (v){
                setState(() {
                  this.flag=v;
                });
              },
              title: Text("标题"),
              subtitle:Text("这是二级标题") ,
              secondary:Icon(Icons.help)
          )
        ],
      ),
    );
  }
}

Radio、Switch

class _PeopleState extends State<People> {
  var flag=true;
  var sex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Radio"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
             Row(
               children: <Widget>[
                 Text("男:"),
                 Radio(
                   value:1,
                   onChanged: (v){//通过change事件获取单选框的值
                     setState(() {
                        this.sex=v;
                     });
                   },
                   groupValue:this.sex ,//单选按钮值
                 ),
                 SizedBox(width: 20),
                 Text("女:"),
                 Radio(
                   value:2,
                   onChanged: (v){
                     setState(() {
                        this.sex=v;
                     });
                   },
                   groupValue:this.sex ,
                 )
               ],
             ),
             Row(
               children: <Widget>[
                 Text("${this.sex}"),
                 Text(this.sex==1?"男":"女")
               ],
             ),
            SizedBox(height: 40),
            RadioListTile(//单选按钮列表
              value:1,
              onChanged: (v){
                setState(() {
                  this.sex=v;
                });
              },
              groupValue:this.sex ,
              title: Text("标题"),
              subtitle:Text("这是二级标题") ,
              secondary:Icon(Icons.help),//尾部图标
              selected: this.sex==1,//通过判断来选中
            ),
            RadioListTile(
              value:2,
              onChanged: (v){
                setState(() {
                  this.sex=v;
                });
              },
              groupValue:this.sex ,
              title: Text("标题"),
              subtitle:Text("这是二级标题") ,
              secondary:Image.network('https://www.itying.com/images/flutter/1.png'),
              selected: this.sex==2,//通过判断来选中
            ),
            SizedBox(height: 40),
            Switch(//Switch选框 值是true,false
              value: this.flag,
              onChanged: (v){//同样change事件来监听
                setState(() {
                  print(v);
                  this.flag=v;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

表单Demo

class _PeopleState extends State<People> {
  String username;
  int sex=1;
  String info='';

  List hobby=[
    {
      "checked":true,
      "title":"吃饭"
    },
    {
      "checked":false,
      "title":"睡觉"
    },
    {
      "checked":true,
      "title":"写代码"
    }
  ];

  List<Widget> _getHobby(){

    List<Widget> tempList=[];
    for(var i=0;i<this.hobby.length;i++){
      tempList.add(
          Row(
            children: <Widget>[
              Text(this.hobby[i]["title"]+":"),
              Checkbox(
                  value: this.hobby[i]["checked"],
                  onChanged: (value){
                    setState(() {
                      this.hobby[i]["checked"]=value;
                    });
                  }
              )
            ],
          )
      );
    }
    return tempList;
  }

  void _sexChanged(value){
    setState(() {
      this.sex=value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("学员信息登记系统"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                  hintText: "输入用户信息"
              ),
              onChanged: (value){
                setState(() {
                  this.username=value;
                });
              },
            ),
            SizedBox(height:10),
            Row(
              children: <Widget>[
                Text("男"),
                Radio(
                    value: 1,
                    onChanged: this._sexChanged,
                    groupValue: this.sex
                ),
                SizedBox(width: 20),
                Text("女"),
                Radio(
                    value: 2,
                    onChanged:this._sexChanged,
                    groupValue: this.sex
                )
              ],
            ),
            //爱好
            SizedBox(height:40),
            Column(
              children: this._getHobby(),
            ),
            TextField(
              maxLines: 4,
              decoration: InputDecoration(
                  hintText: "描述信息",
                  border: OutlineInputBorder()
              ),
              onChanged: (value){
                setState(() {
                  this.info=value;
                });
              },
            ),
            SizedBox(height:40),
            Container(
              width: double.infinity,
              height: 40,
              child: RaisedButton(
                child: Text("提交信息"),
                onPressed: (){
                  print(this.sex);
                  print(this.username);
                  print(this.hobby);
                },
                color: Colors.blue,
                textColor: Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}