Flutter form表单综合运用

老规矩,看图
(一)效果图
在这里插入图片描述
在这里插入图片描述

以下代码复制进main.dart文件即可运行
(二)代码实现

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: FormDemoPage()//入口函数
    );
  }
}
class FormDemoPage extends StatefulWidget {
  @override
  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  String username;
  int sex;

  String info;
  List hobby = [
    {
      "checked": true,
      "title": '吃饭',
    },
    {
      "checked": true,
      "title": 'master',
    },
  ];

  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;
    }
  }
  void _sexChange(v) {
    setState(() {
      this.sex = v;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '学员信息登记表',
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(
                hintText: "请输入用户名",
              ),
            ),
            Row(
              children: [
                Text("男"),
                Radio(
                  value: 1,
                  groupValue: this.sex,
                  onChanged: this._sexChange,
                ),
                SizedBox(
                  height: 10,
                ),
                Text("女"),
                Radio(
                  value: 2,
                  groupValue: this.sex,
                  onChanged: this._sexChange,
                ),
              ],
            ),  
            SizedBox(
              height: 10,
            ),
            Wrap(
              children: _getHobby(),
            ),
            TextField(
              maxLines: 4,
              decoration: InputDecoration(
               border: OutlineInputBorder(),
                hintText: "描述信息",
              ),
              onChanged: (v) {
                setState(() {
                  this.info = v;
                });
              },
            ),
             SizedBox(
              height: 10,
            ),
            Container(
              width: double.infinity,
              height: 40,
              child: RaisedButton(
                child: Text("提交信息"),
                onPressed: () {
                  setState(() {
                    print(this.username);
                    print(this.sex);
                    print(this.hobby);
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

看不懂的来问我,嘿嘿

猜你喜欢

转载自blog.csdn.net/weixin_45425105/article/details/111907364