Flutter:利用表单实现一个简单的信息管理页面

import 'package:flutter/material.dart';

class FormDemoPage extends StatefulWidget {
    
    
  const FormDemoPage({
    
    Key? key}) : super(key: key);

  @override
  State<FormDemoPage> createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
    
    
  late var username;
  late int sex = 1;
  var info ='';

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

  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: [
              Text(this.hobby[i]['title']),
              Checkbox(
                value: this.hobby[i]['checked'],
                onChanged: (v){
    
    
                  setState(() {
    
    
                    this.hobby[i]['checked']=v;
                  });
                },
              )
            ],
          )
      );
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('学员信息登记系统'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(hintText: '输入用户信息'),
              onChanged: (v) {
    
    
                setState(() {
    
    
                  this.username = v;
                });
              },
            ),
            SizedBox(height: 10,),
            Row(
              children: [
                Text('男'),
                Radio(
                    value: 1,
                    groupValue: this.sex,
                    onChanged: _sexChanged
                ),

                SizedBox(width: 20,),
                Text('女'),
                Radio(
                    value: 2,
                    groupValue: this.sex,
                    onChanged: _sexChanged,
                )
              ],
            ),
            SizedBox(height: 40,),

            ///爱好
            Wrap(
              children: _getHobby(),
            ),


            TextField(
              maxLines: 4,
              decoration: InputDecoration(
                hintText: '描述信息',
                border: OutlineInputBorder(),//边框
              ),

              onChanged: (v) {
    
    
                setState(() {
    
    
                  this.info = v;
                });
              },
            ),


            SizedBox(height: 40,),
            Container(
              width: double.infinity, //container自适应
              height: 40,
              child: ElevatedButton(
                child: Text("提交信息"),
                onPressed: () {
    
    
                  print(this.sex);
                  print(this.username);
                  print(this.hobby);
                  print(this.info);
                },
                style: ButtonStyle(),
              ),
            )
          ],
        ),
      ),
    );
  }
}