Flutter实现多行文本框、开关按钮、多选框、单选按钮、RadioListTile、Radio、表单

效果图：

Radio.dart

FormDemo.dart

Radio.dart

import 'package:flutter/material.dart';

class RadioPage extends StatefulWidget {
  @override
  _RadioPageState createState() => _RadioPageState();
}

class _RadioPageState extends State<RadioPage> {
  int sex=1;
  bool flag = true;

  @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){         //Radio改变时，触发事件
//                    setState(() {   //重新渲染界面
//                      this.sex=v;
//                    });
//                  },
//                  groupValue: this.sex,   //如果这里的值是一样的，说明都是属于同一个人单选按钮组
//                ),
//                SizedBox(width: 20,),
//                Text('女: '),
//                Radio(                    //类似单选按钮组
//                  value: 2,
//                  onChanged: (v){       //Radio改变时，触发事件
//                    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){         //Radio改变时，触发事件
                setState(() {   //重新渲染界面
                  this.sex=v;
                });
              },
              groupValue: this.sex,   //如果这里的值是一样的，说明都是属于同一个人单选按钮组
              title: Text('标题'),
              subtitle: Text('这是二级标题'),
              secondary: Icon(Icons.help),    //设置：  图标
              selected: this.sex==1,    //选中时，文字发亮
            ),
            RadioListTile(
              value: 2,
              onChanged: (v){         //Radio改变时，触发事件
                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(               //Android里的开关按钮
              value: this.flag,
              onChanged: (v){
                setState(() {
                  print((v));
                  this.flag=v;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

FormDemo.dart

import 'package:flutter/material.dart';

class FormDemoPage extends StatefulWidget {
  @override
  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  String username;
  int sex=1;  //默认1是男
  String info = '';

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

  List<Widget> _getHobby(){   //返回多个checkBox集合

    List<Widget> tempList=[];

    for(var i=0;i<this.hobby.length;i++){

      //写法一：
      tempList.add(Text(this.hobby[i]['title']+":"));
      tempList.add(
        Checkbox(
          value: this.hobby[i]['checked'],
          onChanged: (value){
            setState(() {
              this.hobby[i]['checked']=value;
            });
          },
        )
      );
      //写法二：
//      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,),
            Wrap(
              children: this._getHobby(),
            ),
            SizedBox(height: 20,),
            TextField(
              maxLines: 4,
              decoration: InputDecoration(
                  hintText: '描述信息',
                border: OutlineInputBorder()
              ),
              onChanged: (value){
                setState(() {
                  this.info=value;
                });
              },
            ),

            SizedBox(height: 40,),
            Container(
              width: double.infinity,   //表示Container的宽度变成自适应宽度
              height: 40,
              child: RaisedButton(
                child: Text('提交信息'),
                onPressed: (){
                  print(this.sex);   //获取单选按钮的值
                  print(this.username);   //获取文本框的值
                  print(this.hobby);    //获取多选框的值
                  print(this.info);   //获取描述信息
                },
                color: Colors.blue,
                textColor: Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}