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