Flutter 表单组件（实例）

文件结构：

内容承接：https://blog.youkuaiyun.com/u013227399/article/details/103893948

routes.dart

import 'package:flutter/material.dart';
import '../pages/tabs.dart';
import '../pages/TextField.dart';
import '../pages/Radio.dart';
import '../pages/CheckBox.dart';
import '../pages/Switch.dart';
import '../pages/FormDemo.dart';

final routes = {
  '/': (context) => Tabs(),
  '/text':(context) => TextFieldPage(),
  '/radio':(context) => RadioPage(),
  '/checkbox':(context) => CheckBoxPage(),
  '/switch':(context) => SwitchPage(),
  '/formdemo':(context) => FormDemoPage(),
};

var onGenerateRoute=(RouteSettings settings){
  //统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
        builder: (context) =>
            pageContentBuilder(context, arguments: settings.arguments),
      );
      return route;
    } else {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context),
      );
      return route;
    }
  }
};

home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Text演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/text');
              },
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text('Radio演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/radio');
              },
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text('CheckBox演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/checkbox');
              },
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text('Switch演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/switch');
              },
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text('表单演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/formdemo');
              },
            ),
          ],
        ),
      );
  }
}

formdemo.dart

import 'package:flutter/material.dart';

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

  @override
  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  var _username;
  var _password;
  int _sex = 1;
  bool _state = true;

  List hobby = [
    {
      "checked": true,
      "title": "读书",
    },
    {
      "checked": false,
      "title": "唱歌",
    },
    {
      "checked": false,
      "title": "刷剧",
    },
  ];

  List<Widget> _getHobby() {
    List<Widget> tempList = [];
    for (var i = 0; i < this.hobby.length; i++) {
      tempList.add(
        Checkbox(
          value: this.hobby[i]["checked"],
          onChanged: (v) {
            setState(() {
              this.hobby[i]["checked"] = v;
            });
          },
        ),
      );
      tempList.add(
        Text(this.hobby[i]["title"]),
      );
    }
    return tempList;
  }

  void _sexChanged(value) {
    setState(() {
      this._sex = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('表单demo'),
      ),
      body: ListView(
        padding: EdgeInsets.all(10),
        children: <Widget>[
          TextField(
            decoration: InputDecoration(
              hintText: '请输入用户名',
              labelText: '用户名',
            ),
            onChanged: (v) {
              setState(() {
                this._username = v;
              });
            },
          ),
          TextField(
            obscureText: true,
            decoration: InputDecoration(
              hintText: '请输入密码',
              labelText: '密码',
            ),
            onChanged: (v) {
              setState(() {
                this._password = v;
              });
            },
          ),
          Row(
            children: <Widget>[
              Text('性别'),
              Radio(
                value: 1,
                onChanged: this._sexChanged,
                groupValue: this._sex,
              ),
              Text('男'),
              Radio(
                value: 2,
                onChanged: this._sexChanged,
                groupValue: this._sex,
              ),
              Text('女'),
            ],
          ),
          Row(
            children: <Widget>[
              Text('协议'),
              Switch(
                value: this._state,
                onChanged: (v) {
                  setState(() {
                    this._state = v;
                  });
                },
              ),
              Text(this._state ? "同意" : "不同意"),
            ],
          ),
          Row(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Text('爱好'),
                ],
              ),
              Row(
                children: this._getHobby(),
              ),
            ],
          ),
          RaisedButton(
            child: Text('提交'),
            onPressed: () {
              print("用户名："+this._username);
              print("密码："+this._password);
              print("性别："+(this._sex == 1 ? "男" : "女"));
              print("协议："+(this._state? "同意" : "不同意"));
              print(this.hobby);
            },
          )
        ],
      ),
    );
  }
}

效果展示：