Wigets学习之Form表单

作者：renzp94

时间：2021-07-06 01:34:03

Form

创建一个表单

child：子部件(必填)
autovalidate：是否自动校验输入内容，默认为false，如果为true当子FormField内容发生变化后就会触发校验，为false可通过FromState.validate手动触发校验
onWillPop：是否可以直接返回，此参数值是一个返回Future<bool>的函数，如果解析为false则当前路由不会返回，为true则返回上一个路由
onChanged：当子FormField内容发生变化就会触发

TextFormField

创建一个包含Textfield的FormField

controller：指定默认值，通过TextEditingController(text:'默认值')来指定，不能和initialValue同时使用
initialValue：指定初始值，此参数只会在部件创建时指定，如果值改变则输入框不会内容不会改变，如果会动态改变输入框的值则使用controller
decoration：装饰器，通过InputDecoration来设置
keyboardType：设置文本，通过TextInputType指定
TextInputType.text：文本输入
TextInputType.multiline：多行输入
TextInputType.number：数字输入
TextInputType.phone：手机号键盘
TextInputType.datetime：地址键盘
TextInputType.emailAddress：邮箱键盘
TextInputType.url：链接键盘
TextInputType.visiblePassword：显示密码键盘
TextInputType.name：人名键盘
TextInputType.streetAddress：邮政地址键盘
TextInputType.visiblePassword：显示密码键盘
textCapitalization：设置键盘大小写规则，默认为TextCapitalization.none
TextCapitalization.none：小写键盘
TextCapitalization.words：单词首字母大写
TextCapitalization.sentences：首句字母大写
TextCapitalization.characters：字母大写
textInputAction：键盘类型
style：输入框文字样式
textDirection：文字排列方式
textAlign：文字水平对齐方式，默认为TextAlign.start
textAlignVertical：文字垂直对齐方式
autofocus：自动获取焦点，默认为false
readOnly：是否只读，默认为false
toolbarOptions：双击或长按之后的操作，通过ToolbarOptions指定，ToolbarOptions参数如下：
- selectAll：全选
- copy：复制
- cut：剪切
- paste：粘贴
enableInteractiveSelection：输入框选择是否可用，默认为true，为false时，则toolbarOptions设置无效
showCursor：是否显示光标，默认为：true
obscuringCharacter：掩码字符(只能指定一个字符)，当指定obscureText=true时，此参数生效，每次输入的值在显示的时候都会被掩码替换，默认为•
obscureText：是否显示掩码，默认为false
autocorrect：是否启用自动校验，默认为true
enableSuggestions：是否在输入时给出建议，默认为true
maxLines：最大行数，默认为1
minLines：最小行数
maxLength：最大长度
maxLengthEnforced：达到maxLength长度后是否阻止输入
onChanged：输入框内容发生变化时触发
onTap：点击输入框时触发
onEditingComplete：编辑完成时触发，即点击键盘上的完成或回车时
onFieldSubmitted：完成输入框编辑后触发，接收一个当前输入框的值
onSaved：当调用FormState的save函数时触发
validator：校验函数，通过FormState的validate函数触发，返回null为校验通过，返回字符串则为错误提示
inputFormatters：输入规则，是一个List<TextInputFormatter>类型
enabled：是否可用
cursorWidth：光标宽度
cursorHeight：光标高度
cursorRadius：光标圆角
cursorColor：光标颜色
keyboardAppearance：键盘主题，默认为Brightness.light(浅色)，可选值为Brightness.dark(深色)

InputDecoration

设置Input样式

icon：左侧图标
labelText：左侧 label 文字
labelStyle：左侧 label 样式
helperText：在输入框下方出现用于展示提示信息的
helperStyle：提示信息的样式
helperMaxLines：提示信息最多展示几行
hintText：占位文本和HTML中的placeholder一样
hintStyle：占位文本样式
hintTextDirection：占位文本的文字排列方式
hintMaxLines：占位文本最多展示几行
errorText：错误信息
errorStyle：错误信息样式
errorMaxLines：错误信息最多展示几行
floatingLabelBehavior：焦点获取时 label 展示行为，默认为FloatingLabelBehavior.auto，可选值FloatingLabelBehavior.always(总是显示)，FloatingLabelBehavior.never(从不显示)
isCollapsed：是否将label和输入框收起，默认为false，如果为true，则label会重叠在输入框上，此时最好设置floatingLabelBehavior=FloatingLabelBehavior.never
isDense：是否将输入框作为Form的一部分，默认为false，当为true时上下间距会少一点
contentPadding：输入框内边距
prefixIcon：前缀图标
prefixIconConstraints：前缀图标约束
prefix：自定义前缀部件
prefixText：前缀文字
prefixStyle：前缀样式
suffixIcon：后缀图标
suffixIconConstraints：后缀图标约束
suffix：自定义后缀部件
suffixText：后缀文字
suffixStyle：后缀样式
counter：自定义输入框下的内容
counterText：输入框下的内容
counterStyle：输入下的内容样式
filled：是否显示输入框背景，默认为false
fillColor：背景颜色

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Form表单学习',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String userName = '';
  String password = '';
  GlobalKey<FormState> _formKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form表单学习'),
      ),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: EdgeInsets.all(24),
          child: Column(
            children: [
              TextFormField(
                  controller: TextEditingController(text: userName),
                  style: TextStyle(color: Colors.cyan),
                  toolbarOptions: ToolbarOptions(
                      selectAll: true, copy: true, cut: true, paste: true),
                  onEditingComplete: () => print('onEditingComplete'),
                  onFieldSubmitted: (value) => print(value),
                  onSaved: (value) => setState(() {
                        userName = value!;
                      }),
                  validator: (value) => value!.isEmpty ? '请输入账号' : null,
                  decoration:
                      InputDecoration(labelText: '账号', hintText: '请输入账号')),
              TextFormField(
                obscureText: true,
                obscuringCharacter: '*',
                cursorColor: Colors.yellow,
                onSaved: (value) => setState(() {
                  password = value!;
                }),
                decoration: InputDecoration(
                  hintText: '请输入密码',
                  counterText: '忘记密码?',
                  counterStyle: TextStyle(color: Colors.black12),
                ),
              ),
              Container(
                  width: double.infinity,
                  height: 48,
                  margin: EdgeInsets.only(top: 24),
                  child: ElevatedButton(
                    onPressed: () {
                      _formKey.currentState!.validate();
                      _formKey.currentState!.save();
                      print('userName：$userName，password：$password');
                    },
                    child: Text("登录"),
                    style: ButtonStyle(
                      elevation: MaterialStateProperty.all(0),
                    ),
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

TextField

输入框

参数和TextFormField基本保存一致

Radio

单选按钮

value：单选值(必填)
groupValue：选中的值(必填)
onChanged：改变事件(必填)，接收当前Radio的value
toggleable：是否可改变，默认为false，为true时，选中的Radio可再次点击取消
activeColor：选中的颜色
fillColor：默认颜色，通过MaterialStateProperty指定，指定此参数之后activeColor无效，可通过MaterialStateProperty.resolveWith判断状态设置不同颜色

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Textfield学习',
      home: Home(),
    );
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int radio = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radio学习'),
      ),
      body: Column(
        children: [
          Radio(
              value: 1,
              groupValue: radio,
              onChanged: (int? value) {
                setState(() {
                  radio = value!;
                });
              }),
          Radio(
              value: 2,
              groupValue: radio,
              toggleable: true,
              activeColor: Colors.red,
              onChanged: (int? value) {
                setState(() {
                  radio = value != null ? value : 0;
                });
              }),
          Radio(
              value: 3,
              groupValue: radio,
              fillColor: MaterialStateProperty.all(Colors.orange),
              onChanged: (int? value) {
                setState(() {
                  radio = value!;
                });
              }),
          Radio(
              value: 4,
              groupValue: radio,
              fillColor: MaterialStateProperty.resolveWith((states) {
                return states.contains(MaterialState.selected)
                    ? Colors.red
                    : Colors.yellow;
              }),
              onChanged: (int? value) {
                setState(() {
                  radio = value!;
                });
              }),
          Radio(
              value: 4,
              groupValue: radio,
              fillColor: MaterialStateProperty.resolveWith((states) {
                return states.contains(MaterialState.selected)
                    ? Colors.red
                    : Colors.yellow;
              }),
              onChanged: (int? value) {
                setState(() {
                  radio = value!;
                });
              }),
        ],
      ),
    );
  }
}

RadioListTile

带有标题的单选按钮

value：单选值(必填)
groupValue：选中的值(必填)
onChanged：改变事件(必填)，接收当前RadioListTile的value
toggleable：是否可改变，默认为false，为true时，选中的RadioListTile可再次点击取消
title：标题部件
subtitle：副标题部件
selected：内容部分是否为选中状态，默认为false
activeColor：选中的颜色
tileColor：当前RadioListTile背景色
selectedTileColor：当前RadioListTile选中背景色

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RadioListTile学习',
      home: Home(),
    );
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int radio = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField学习'),
      ),
      body: Column(
        children: [
          RadioListTile(
              value: 1,
              groupValue: radio,
              title: Text('选项1'),
              onChanged: (int? value) {
                setState(() {
                  radio = value!;
                });
              }),
          RadioListTile(
              value: 2,
              groupValue: radio,
              title: Text('选项2'),
              subtitle: Text('副标题'),
              onChanged: (int? value) {
                setState(() {
                  radio = value!;
                });
              }),
          RadioListTile(
              value: 3,
              groupValue: radio,
              title: Text('选项3'),
              subtitle: Text('副标题'),
              activeColor: Colors.white,
              selected: radio == 3,
              tileColor: Colors.cyan,
              selectedTileColor: Colors.orange,
              onChanged: (int? value) {
                setState(() {
                  radio = value!;
                });
              }),
          RadioListTile(
              value: 4,
              groupValue: radio,
              title: Text('选项4'),
              subtitle: Text('副标题'),
              onChanged: (int? value) {
                setState(() {
                  radio = value!;
                });
              }),
        ],
      ),
    );
  }
}

Checkbox

复选框

value：是否选中(必填)
onChanged：改变事件(必填)
tristate：默认为false，如果为true，未选中状态为null，为false则为选中状态为false
activeColor：选中的颜色
checkColor：选中的√颜色
splashRadius：点击水波纹大小
materialTapTargetSize：最小点击范围，默认为MaterialTapTargetSize.padded，可选值为MaterialTapTargetSize.shrinkWrap

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Checkbox学习',
      home: Home(),
    );
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<int> _selectList = [];
  List<int> list = [1, 2, 3, 4];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkbox学习'),
      ),
      body: Column(
        children: list
            .map((item) => Row(
                  children: [
                    Checkbox(
                        value: _selectList.contains(item),
                        activeColor: Colors.yellow,
                        checkColor: Colors.black,
                        splashRadius: 30,
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        onChanged: (value) {
                          value!
                                ? _selectList.add(item)
                                : _selectList.remove(item);
                            setState(() {
                              _selectList = _selectList;
                            });
                        }),
                    Text(item.toString())
                  ],
                ))
            .toList(),
      ),
    );
  }
}

CheckboxListTile

带有标题的复选框

value：是否选中(必填)
onChanged：改变事件(必填)
activeColor：选中的颜色
checkColor：选中的√颜色
title：标题
tileColor：CheckboxListTile背景色
selectedTileColor：CheckboxListTile选中的背景色
subtitle：副标题
isThreeLine：平铺是否要显示三行文本，默认为false
dense：平铺是否为垂直密集
selected：内容部分是否选中，默认为false
tristate：默认为false，如果为true，未选中状态为null，为false则为选中状态为false

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Checkbox学习',
      home: Home(),
    );
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<int> _selectList = [];
  List<int> list = [1, 2, 3, 4];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkbox学习'),
      ),
      body: Column(
        children: list
            .map((item) => CheckboxListTile(
                value: _selectList.contains(item),
                title: Text(item.toString()),
                subtitle: Text('$item subTitle'),
                activeColor: Colors.yellow,
                checkColor: Colors.black,
                onChanged: (value) {
                  value! ? _selectList.add(item) : _selectList.remove(item);
                  setState(() {
                    _selectList = _selectList;
                  });
                }))
            .toList(),
      ),
    );
  }
}

Switch

开关

value：是否选中(必填)
onChanged：改变事件(必填)
activeColor：选中颜色
activeTrackColor：选中的track颜色，即：横向部分的颜色
inactiveThumbColor：未选中的Thumb颜色，即：圆形部分的颜色
inactiveTrackColor：未选中的track颜色，即：横向部分的颜色
thumbColor：Thumb颜色，即：圆形部分的颜色
trackColor：track颜色，即：横向部分的颜色
materialTapTargetSize：最小点击范围，默认为MaterialTapTargetSize.padded，可选值为MaterialTapTargetSize.shrinkWrap

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '开关学习',
      home: Home(),
    );
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('开关学习'),
      ),
      body: Column(
        children: [
          Switch(
              value: true,
              activeColor: Colors.red,
              activeTrackColor: Colors.cyan,
              inactiveThumbColor: Colors.yellow,
              onChanged: (value) {
                print(value);
              }),
          Switch(
              value: false,
              activeColor: Colors.red,
              inactiveThumbColor: Colors.yellow,
              inactiveTrackColor: Colors.orange,
              onChanged: (value) {
                print(value);
              }),
          Switch(
              value: false,
              thumbColor: MaterialStateProperty.all(Colors.cyan),
              trackColor: MaterialStateProperty.all(Colors.amber),
              onChanged: (value) {
                print(value);
              }),
        ],
      ),
    );
  }
}

SwitchListTile

带有标题的开关

value：是否选中(必填)
onChanged：改变事件(必填)
activeColor：选中颜色
activeTrackColor：选中的track颜色，即：横向部分的颜色
inactiveThumbColor：未选中的Thumb颜色，即：圆形部分的颜色
inactiveTrackColor：未选中的track颜色，即：横向部分的颜色
title：标题
tileColor：CheckboxListTile背景色
selectedTileColor：CheckboxListTile选中的背景色
subtitle：副标题
isThreeLine：平铺是否要显示三行文本，默认为false
dense：平铺是否为垂直密集
contentPadding：内边距
secondary：左侧部件

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '开关学习',
      home: Home(),
    );
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool _opened = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('开关学习'),
      ),
      body: Column(
        children: [
          SwitchListTile(
              value: _opened,
              secondary: Icon(Icons.cached),
              title: Text('开关1'),
              onChanged: (value) {
                setState(() {
                  _opened = value;
                });
              })
        ],
      ),
    );
  }
}

Slider

滑块

value：是否选中(必填)
onChanged：改变事件(必填)
onChangeStart：改变开始事件
onChangeEnd：改变结束事件
min：最小值
max：最大值
divisions：间隔数量，设置之后每次改变必须是间隔量
label：滑块的 label，显示在圆点上方
activeColor：已用滑块的颜色
inactiveColor：未用滑块的颜色

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '滑块学习',
      home: Home(),
    );
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double _value = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('滑块学习'),
      ),
      body: Column(
        children: [
          Slider(
            min: 0,
            max: 100,
            value: _value,
            divisions: 10,
            label: '这是一个label',
            activeColor: Colors.orange,
            inactiveColor: Colors.red,
            onChangeStart: (value) {
              print('change start $value');
            },
            onChanged: (value) {
              print(value);
            },
            onChangeEnd: (value) {
              print('change end $value');
              setState(() {
                _value = value;
              });
            },
          ),
        ],
      ),
    );
  }
}