Flutter（十九）：Form 表单

作者: 林ze宏 | 来源:发表于2020-07-22 09:46 被阅读0次

Flutter（十九）：Form 表单
Flutter Form、TextFormField及表单验证、
flutter 表单Form使用示例
Flutter 表单Form
Flutter-Form（表单）和 SnackBar（提示）
Flutter开发入手，一个Form表单初级构建
flutter表单Form内部实现原理浅析(一)
关于vue v-decorator
bootstrap表单
Vue.js-ElementUI表单

Flutter 中常见的表单有 TextField 单行文本框，TextField 多行文本框、CheckBox、Radio、Switch CheckboxListTile、RadioListTile、SwitchListTile、Slide.

扩展小知识点：占据整行

width: double.infinity

1 TextField

import 'package:flutter/material.dart';

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

  _TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}

class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
  var _username = new TextEditingController(); //初始化的时候给表单赋值
  var _password = new TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _username.text = '初始值';
    _password.text = '初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('表单演示页面'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          child: TextDemo(),
          // child: Column(
          //   children: <Widget>[
          //     TextField(
          //       decoration: InputDecoration(hintText: "请输入用户名"),
          //       controller: _username,
          //       onChanged: (value) {
          //         setState(() {
          //           _username.text = value;
          //         });
          //       },
          //     ),
          //     SizedBox(height: 10),
          //     TextField(
          //       obscureText: true,
          //       decoration: InputDecoration(hintText: "密码"),
          //       controller: _password,
          //       onChanged: (value) {
          //         setState(() {
          //           this._password.text = value;
          //         });
          //       },
          //     ),
          //     SizedBox(height: 40),
          //     Container(
          //       width: double.infinity,
          //       height: 40,
          //       child: RaisedButton(
          //         child: Text("登录"),
          //         onPressed: () {
          //           print(this._username.text);
          //           print(this._password.text);
          //         },
          //         color: Colors.blue,
          //         textColor: Colors.white,
          //       ),
          //     )
          //   ],
          // ),
        ));
  }
}

class TextDemo extends StatelessWidget {
  const TextDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          TextField(),
          SizedBox(height: 20),
          TextField(
            decoration: InputDecoration(
                hintText: "请输入搜索的内容", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          TextField(
            maxLines: 4,
            maxLength: 200,
            decoration: InputDecoration(
                hintText: "多行文本框", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          TextField(
            obscureText: true,
            decoration:
                InputDecoration(hintText: "密码框", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "用户名")),
          SizedBox(height: 20),
          TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "密码",
                // labelStyle: TextStyle()
              )),
          SizedBox(height: 20),
          TextField(
              decoration: InputDecoration(
                  icon: Icon(Icons.people), hintText: "请输入用户名")),
        ],
      ),
    );
  }
}

效果

2 Checkbox、CheckboxListTile

import 'package:flutter/material.dart';

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

  _TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}

class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
  var _username = new TextEditingController(); //初始化的时候给表单赋值
  var _password = new TextEditingController();

  var check = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _username.text = '初始值';
    _password.text = '初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('表单演示页面'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          // child: TextDemo(),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(hintText: "请输入用户名"),
                controller: _username,
                onChanged: (value) {
                  setState(() {
                    _username.text = value;
                  });
                },
              ),
              SizedBox(height: 10),
              TextField(
                obscureText: true,
                decoration: InputDecoration(hintText: "密码"),
                controller: _password,
                onChanged: (value) {
                  setState(() {
                    this._password.text = value;
                  });
                },
              ),
              SizedBox(height: 40),
              Checkbox(
                onChanged: (v) {
                  setState(() {
                    this.check = v;
                  });
                },
                value: this.check,
                activeColor: Colors.orange,
              ),
              CheckboxListTile(
                value: this.check,
                onChanged: (v) {
                  setState(() {
                    this.check = v;
                  });
                },
                title: Text('标题'),
                subtitle: Text('副标题'),
                secondary: Image.asset("images/a.jpeg", fit: BoxFit.cover),
                selected: this.check,
              ),
              Divider(),
              CheckboxListTile(
                value: this.check,
                onChanged: (v) {
                  setState(() {
                    this.check = v;
                  });
                },
                title: Text('标题'),
                subtitle: Text('副标题'),
              ),
              Divider(),
              SizedBox(height: 40),
              Container(
                width: double.infinity,
                height: 40,
                child: RaisedButton(
                  child: Text("登录"),
                  onPressed: () {
                    print(this._username.text);
                    print(this._password.text);
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              )
            ],
          ),
        ));
  }
}

3 Radio、RadioListTile

import 'package:flutter/material.dart';

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

  _TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}

class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
  var _username = new TextEditingController(); //初始化的时候给表单赋值
  var _password = new TextEditingController();

  var radioVal = 1;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _username.text = '初始值';
    _password.text = '初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('表单演示页面'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          // child: TextDemo(),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(hintText: "请输入用户名"),
                controller: _username,
                onChanged: (value) {
                  setState(() {
                    _username.text = value;
                  });
                },
              ),
              SizedBox(height: 10),
              TextField(
                obscureText: true,
                decoration: InputDecoration(hintText: "密码"),
                controller: _password,
                onChanged: (value) {
                  setState(() {
                    this._password.text = value;
                  });
                },
              ),
              SizedBox(height: 40),
              Radio(
                onChanged: (v) {
                  setState(() {
                    this.radioVal = v;
                  });
                },
                value: 1,
                activeColor: Colors.orange,
                groupValue: this.radioVal,
              ),
              Radio(
                onChanged: (v) {
                  setState(() {
                    this.radioVal = v;
                  });
                },
                value: 2,
                activeColor: Colors.orange,
                groupValue: this.radioVal,
              ),
              RadioListTile(
                value: 1,
                onChanged: (v) {
                  setState(() {
                    this.radioVal = v;
                  });
                },
                title: Text('标题'),
                subtitle: Text('副标题'),
                secondary: Image.asset("images/a.jpeg", fit: BoxFit.cover),
                selected: this.radioVal == 1,
                groupValue: this.radioVal,
              ),
              Divider(),
              RadioListTile(
                value: 2,
                onChanged: (v) {
                  setState(() {
                    this.radioVal = v;
                  });
                },
                title: Text('标题'),
                subtitle: Text('副标题'),
                selected: this.radioVal == 2,
                groupValue: this.radioVal,
              ),
              Divider(),
              SizedBox(height: 40),
              Container(
                width: double.infinity,
                height: 40,
                child: RaisedButton(
                  child: Text("登录"),
                  onPressed: () {
                    print(this._username.text);
                    print(this._password.text);
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              )
            ],
          ),
        ));
  }
}

效果

4 Switch

Switch(
  onChanged: (v) {},
  value: true,
),

5 综合实例

import 'package:flutter/material.dart';

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

  _FormDemoPageState createState() => _FormDemoPageState();
}

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

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

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

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

            //爱好
            SizedBox(height: 40),
            Column(
              children: this._getHobby(),
            ),

            // TextField(
            //   maxLines: 4,
            //   decoration: InputDecoration(
            //     hintText: "描述信息",
            //     border: OutlineInputBorder(),
            //   ),
            //   onChanged: (value) {
            //     setState(() {
            //       this.info = value;
            //     });
            //   },
            // ),

            SizedBox(height: 40),
            Container(
              // width: double.infinity,
              child: Wrap(
                alignment: WrapAlignment.start,
                children: <Widget>[
                  Container(
                    width: 120,
                    color: Colors.pink,
                    child: Row(
                      children: <Widget>[
                        Text('shuijiao'),
                        Checkbox(
                            value: this.hobby[1]['checked'],
                            onChanged: (v) {
                              setState(() {
                                this.setState(() {
                                  this.hobby[1]['checked'] = v;
                                });
                              });
                            }),
                      ],
                    ),
                  ),
                  Container(
                    width: 120,
                    child: Row(
                      children: <Widget>[
                        Text('shuijiao'),
                        Checkbox(
                            value: this.hobby[1]['checked'],
                            onChanged: (v) {
                              setState(() {
                                this.setState(() {
                                  this.hobby[1]['checked'] = v;
                                });
                              });
                            }),
                      ],
                    ),
                  ),
                ],
              ),
            ),

            SizedBox(height: 40),
            Container(
              width: double.infinity,
              height: 40,
              child: RaisedButton(
                child: Text("提交信息"),
                onPressed: () {
                  print(this.sex);
                  print(this.username);
                  print(this.hobby);
                },
                color: Colors.blue,
                textColor: Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果

Flutter（十九）：Form 表单
Flutter 中常见的表单有 TextField 单行文本框，TextField 多行文本框、CheckBox、...
Flutter Form、TextFormField及表单验证、
Flutter Form、TextFormField及表单验证、表单输入框聚焦http://www.ptbird....
flutter 表单Form使用示例
介绍 flutter提供一套表单校验框架Form，可以通过Form框架一步校验所有表单，非常方便，比较常用的用法是...
Flutter 表单Form
实际业务中，在正式向服务器提交数据前，都会对各个输入框数据进行合法性校验，但是对每一个TextField都分别进行...
Flutter-Form（表单）和 SnackBar（提示）
我们可以使用flutter自带的Form组件完成表单的创建 SnackBar（提示）
Flutter开发入手，一个Form表单初级构建
Form 表单在开发中必不可少，在 Flutter 中画一个像模像样的 Form 表单，对于一个初学者也不是件容易...
flutter表单Form内部实现原理浅析(一)
使用示例阅读原理之前可以先移步到：flutter 表单Form使用示例[https://www.jianshu....
关于vue v-decorator
ant-desigin-vue中form表单的使用 form表单的使用 form表单之获取表单的数据创建表单通...
bootstrap表单
bootstrap表单 1、form 声明一个表单域2、form-inline 内联表单域3、form-horiz...
Vue.js-ElementUI表单
1 表单el-form 每个表单el-form由多个表单域el-form-item组成。默认情况，表单域是垂直分布...