欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 09:36:28
...
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: "密码"//
   ),
 ),

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

模拟登陆设置获取输入框内容
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

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

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

Flutter 组件之表单组件TextField、CheckBox、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

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

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,
              ),
            )
          ],
        ),
      ),
    );
  }
}
相关标签: flutter