服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Flutter质感设计之表单输入

Flutter质感设计之表单输入

2022-07-22 11:02何小有 Android

这篇文章主要为大家详细介绍了Flutter质感设计之表单输入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

FormField控件是单一表单字段,这个控件维护表单字段的当前状态,以便更新和验证错误能在UI中可见。TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解),FormField维护输入的当前值,使您不需要自己管理它,更容易一次保存,重置或验证多个字段。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import 'package:flutter/material.dart';
 
class MyApp extends StatefulWidget {
 @override
 _MyApp createState() => new _MyApp();
}
 
class _MyApp extends State<MyApp> {
 
 String _lastName;
 String _firstName;
 GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
 
 void _showMessage(String name) {
  showDialog<Null>(
   context: context,
   child: new AlertDialog(
    content: new Text(name),
    actions: <Widget>[
     new FlatButton(
      onPressed: () {
       Navigator.pop(context);
      },
      child: new Text('确定')
     )
    ]
   )
  );
 }
 
 @override
 Widget build(BuildContext context) {
  return new Scaffold(
   appBar: new AppBar(
    title: new Text('表单输入')
   ),
   // Form:用于将多个表单控件组合在一起的容器
   body: new Form(
    key: _formKey,
    child: new Column(
     children: <Widget> [
      // TextFieldd:包含输入的表单控件,每个表单字段都应该在FormField控件中
      new TextField(
       labelText: '姓氏',
       // onSaved:当通过Form.save()保存表单时调用的方法
       onSaved: (InputValue value) {
        _lastName = value.text;
       }
      ),
      new TextField(
       labelText: '名字',
       onSaved: (InputValue value) {
        _firstName = value.text;
       }
      ),
      new Row(
       children: <Widget> [
        new RaisedButton(
         child: new Text('重置'),
         onPressed: () {
          // reset():将此Form下的每个TextField重置为初始状态
          _formKey.currentState.reset();
          _showMessage('姓名信息已经重置');
         }
        ),
        new RaisedButton(
         child: new Text('提交'),
         onPressed: () {
          // save():保存Form下的每个TextField
          _formKey.currentState.save();
          _showMessage('你的姓名是'+_lastName+_firstName);
         }
        )
       ]
      )
     ]
    )
   )
  );
 }
}
 
void main() {
 runApp(new MaterialApp(
  title: 'Flutter Demo',
  home: new MyApp()
 ));
}

Flutter质感设计之表单输入

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

延伸 · 阅读

精彩推荐