Flutter中表单组件综合运用实例

前面介绍了Flutter的各个表单组件的运用，现将这些组件用来实现一个综合练习。

实现的效果图如下：

以下是代码实现，供大家参考：

import 'package:flutter/material.dart';

class FormPage extends StatefulWidget {
    FormPage({Key key}) : super(key: key);
    @override
    _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {

    String username ;
    int sex=1;
    // 用户的爱好集合
    List hobby = [
        {
            "checked":true,
            "title":"玩游戏"
        },
        {
            "checked":true,
            "title":"写代码"
        },
        {
            "checked":true,
            "title":"打豆豆"
        }
    ];
    String info = "";

    // 姓别选择的回调方法
    void _sexChange(value){
        setState(() {
          this.sex = value;
        });
    }

    List<Widget> _getHobby(){
        List <Widget> tempList=[];
        for(int 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;
    }

    @override
    Widget build(BuildContext context) {
        return Container(
            child: 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:20),
                            // 单选按钮
                            Row(
                                children:<Widget>[
                                    Text('男'),
                                    Radio(
                                        value:1,
                                        onChanged: this._sexChange,
                                        groupValue: this.sex,
                                    ),
                                    SizedBox(width:20),
                                    Text("女"),
                                    Radio(
                                        value:2,
                                        onChanged:this._sexChange,
                                        groupValue:this.sex,
                                    ) 
                                ]
                            ),

                            SizedBox(height:20),
                            // 多选框
                            Column(
                                children:this._getHobby(),
                            ),

                            SizedBox(height:20),

                            // 多行文本域
                            TextField(
                                maxLines: 4,
                                decoration: InputDecoration(
                                    border: OutlineInputBorder(),
                                    hintText: "请输入备注信息"
                                ),
                                onChanged:(value){
                                    setState(() {
                                        this.info = value;
                                    });
                                },
                            ),

                            SizedBox(height:20),
                            // 登录按钮
                            Container(
                                width:double.infinity,
                                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
                                )
                            )
                        ],
                    )
                )
            ),
        );
    }
}