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

清疚 2023-07-18 02:59 85阅读 0赞

##### 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: "密码"//
       ),
     ),

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]

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

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 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 1]

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 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 2]

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 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 3]

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,
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/61fea95ace9b400b860edee0f5cfd35b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/59df6a3ea5ea42f0afcd7592c1e9e42b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230528/2d2faf7aeb974c6ca09a7c11eac3ca89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230528/14d9e3ec58544513a3a95eb3c03268e8.png